Arquitectura cliente-servidor

Las aplicaciones web se basan en una arquitectura cliente-servidor, en la que diferentes sistemas se comunican a través de una red.

De forma simplificada, podemos distinguir dos componentes:

• Cliente: Solicita recursos o servicios realizando peticiones o requests. En una aplicación web, normalmente es el navegador.
• Servidor: Recibe las peticiones o requests del cliente, las procesa y devuelve una respuesta o response.

Comunicación cliente-servidor

Cuando accedemos a una aplicación web, el navegador realiza una petición HTTP a un servidor.

El servidor procesa la petición y devuelve una respuesta HTTP.

Cliente                              Servidor
Navegador
   │                                    │
   │──────── Petición HTTP ────────────>│
   │                                    │
   │<─────── Respuesta HTTP ────────────│
   │                                    │

La respuesta puede contener diferentes tipos de recursos:

• Documentos HTML.
• Hojas de estilo CSS.
• Código JavaScript.
• Imágenes.
• Fuentes.
• Datos en formatos como JSON.

HTTP y HTTPS

HTTP (Hypertext Transfer Protocol) es el protocolo utilizado habitualmente para la comunicación entre clientes y servidores web.

Cuando la comunicación está cifrada mediante TLS se utiliza HTTPS.

Ejecución en el servidor

El código de servidor se ejecuta en una máquina controlada por el proveedor de la aplicación.

Puede encargarse, entre otras tareas, de:

• Acceder a bases de datos.
• Autenticar usuarios.
• Comprobar permisos.
• Aplicar reglas de negocio.
• Procesar información.
• Generar respuestas para los clientes.

Para desarrollar código de servidor pueden utilizarse diferentes lenguajes y plataformas, como Java, PHP, Python, Node.js o .NET.

Por ejemplo, cuando un usuario inicia sesión, el servidor puede recibir sus credenciales, comprobarlas y devolver una respuesta indicando si el acceso está autorizado.

Navegador                Servidor                 Base de datos
    │                        │                          │
    │── usuario/password ───>│                          │
    │                        │──── consulta ───────────>│
    │                        │<─── resultado ───────────│
    │<── respuesta ──────────│                          │

El cliente no recibe necesariamente el código utilizado para realizar estas operaciones. Recibe únicamente el resultado que el servidor decide enviar.

Ejecución en el cliente

El código de cliente se ejecuta en el dispositivo del usuario.

En una aplicación web, el entorno de ejecución del cliente es principalmente el navegador y el lenguaje de programación utilizado es JavaScript.

JavaScript permite, por ejemplo:

• Responder a las acciones del usuario.
• Modificar el contenido de una página.
• Mostrar u ocultar elementos.
• Comprobar inicialmente los datos de un formulario.
• Realizar peticiones a un servidor.
• Actualizar partes de la interfaz sin recargar completamente la página.

Por ejemplo:

document.querySelector("button").addEventListener("click", () => {
  console.log("Button clicked");
});

Este código se descarga junto con la aplicación y se ejecuta en el navegador del usuario.

Cliente y servidor

Una aplicación web suele repartir sus responsabilidades entre ambos entornos.

Característica	Cliente	Servidor
Ejecución	Navegador del usuario	Servidor
Lenguaje habitual en este módulo	JavaScript	Diferentes lenguajes y plataformas
Interfaz de usuario	Sí	No directamente
Acceso directo a la base de datos	No	Habitualmente sí
Código accesible por el usuario	Sí	Normalmente no
Validaciones de interfaz	Sí	—
Validaciones de seguridad	No son suficientes	Sí

Por ejemplo, en una aplicación de gestión de clientes:

Cliente

Mostrar formulario
       ↓
Validar inicialmente los campos
       ↓
Enviar los datos

Servidor

Recibir los datos
       ↓
Validarlos
       ↓
Comprobar permisos
       ↓
Guardar en la base de datos
       ↓
Enviar una respuesta

WARNING

Las validaciones realizadas en el navegador mejoran la experiencia del usuario, pero no sustituyen las validaciones realizadas en el servidor.

El usuario tiene control sobre el código que se ejecuta en su navegador y puede modificarlo o evitar su ejecución.

Aplicaciones web actuales

Las aplicaciones web modernas combinan continuamente la ejecución en el cliente y en el servidor.

Por ejemplo, al consultar un listado de clientes:

1. El usuario pulsa un botón en el navegador.
2. JavaScript detecta la acción.
3. El navegador solicita los datos al servidor.
4. El servidor consulta la información necesaria.
5. El servidor devuelve los datos.
6. JavaScript actualiza la interfaz.

Usuario
   ↓
JavaScript
   ↓
Navegador ──────> Servidor ──────> Base de datos
          <──────          <──────
   ↓
Actualización de la interfaz

A lo largo del módulo nos centraremos principalmente en el desarrollo en entorno cliente, utilizando JavaScript y Vue 3 para implementar el comportamiento de las aplicaciones que se ejecuta en el navegador.