DWEC

Appearance

Arquitectura de las aplicaciones web ​

Evolución de las aplicaciones web ​

La World Wide Web (WWW) nació como un sistema para compartir documentos enlazados mediante hipertexto. Las primeras páginas web eran completamente estáticas: el servidor enviaba un documento HTML al navegador y el usuario únicamente podía consultar su contenido. Cada interacción requería solicitar una nueva página al servidor.

Con el paso de los años aparecieron las aplicaciones web dinámicas, capaces de generar contenido de forma personalizada en función del usuario, de los datos almacenados en una base de datos o de las acciones realizadas durante la navegación. Esta evolución permitió desarrollar aplicaciones cada vez más complejas, como gestores de contenidos, plataformas de comercio electrónico o redes sociales.

En la actualidad predominan las Single Page Applications (SPA), aplicaciones que cargan una única página HTML y actualizan dinámicamente su contenido mediante JavaScript sin necesidad de recargar completamente la página. Frameworks como Vue, React o Angular facilitan este modelo de desarrollo.

Ejemplo

En una tienda online tradicional, al pulsar sobre el carrito de la compra el navegador solicita una nueva página al servidor.

En una SPA, el carrito se actualiza instantáneamente mediante JavaScript sin abandonar la página actual.

Arquitectura cliente-servidor ​

La mayor parte de las aplicaciones web siguen una arquitectura cliente-servidor, donde cada componente desempeña una función claramente diferenciada.

El cliente es la aplicación utilizada por el usuario para acceder al servicio, normalmente un navegador web. Su función consiste en solicitar recursos al servidor, interpretar los documentos recibidos y permitir la interacción con la aplicación.

El servidor es el sistema encargado de procesar las peticiones del cliente, acceder a bases de datos, ejecutar la lógica de negocio y generar las respuestas correspondientes.

Esta separación de responsabilidades permite distribuir el trabajo entre ambos extremos, mejorando la escalabilidad, la seguridad y el mantenimiento de las aplicaciones.

Ejemplo

Cuando un usuario inicia sesión en una aplicación web:

  • El navegador recoge el nombre de usuario y la contraseña.
  • Los datos se envían al servidor.
  • El servidor comprueba las credenciales en la base de datos.
  • Si son correctas, devuelve una respuesta autorizando el acceso.
  • El navegador actualiza la interfaz mostrando la zona privada.

Comunicación entre cliente y servidor ​

La comunicación entre cliente y servidor se realiza habitualmente mediante el protocolo HTTP (HyperText Transfer Protocol) o su versión segura HTTPS (HTTP Secure).

Cada intercambio de información sigue un esquema muy sencillo:

  1. El cliente envía una petición (request).
  2. El servidor procesa la solicitud.
  3. El servidor devuelve una respuesta (response).

Las peticiones incluyen información como el recurso solicitado, el método HTTP empleado y diferentes cabeceras con información adicional.

Los métodos HTTP más utilizados son:

  • GET: solicita información.
  • POST: envía nuevos datos.
  • PUT: actualiza recursos existentes.
  • DELETE: elimina recursos.

Las respuestas incluyen un código de estado que informa del resultado de la operación.

Algunos códigos habituales son:

  • 200 OK: operación realizada correctamente.
  • 201 Created: recurso creado.
  • 404 Not Found: recurso inexistente.
  • 500 Internal Server Error: error interno del servidor.

Ejemplo

Al acceder a la URL:

https://api.ejemplo.com/products

el navegador realiza una petición GET y el servidor responde con una lista de productos en formato JSON.

Ejecución del código en el navegador ​

Los navegadores modernos incorporan un motor JavaScript encargado de interpretar y ejecutar el código incluido en las páginas web.

Cuando un navegador carga un documento HTML, analiza progresivamente su contenido y construye la estructura interna de la página. Durante este proceso, cuando encuentra una etiqueta <script>, detiene temporalmente el análisis del documento para ejecutar el código JavaScript correspondiente (salvo determinadas excepciones como el uso de defer o async, que se estudiarán posteriormente).

JavaScript se ejecuta en un único hilo de ejecución (single-threaded), lo que significa que únicamente puede ejecutar una instrucción cada vez. Para gestionar operaciones asíncronas, como temporizadores o peticiones a servidores, utiliza el denominado Event Loop, cuyo funcionamiento se estudiará en unidades posteriores.

Ejemplo

html
<script>
  console.log("Primer mensaje");
  console.log("Segundo mensaje");
</script>

Ambos mensajes se ejecutan secuencialmente siguiendo el orden en el que aparecen en el código.

Capacidades y limitaciones de JavaScript en el navegador ​

JavaScript proporciona acceso a numerosas funcionalidades del navegador mediante las denominadas APIs Web. Gracias a ellas es posible modificar el contenido de una página, responder a eventos del usuario, almacenar información localmente o realizar comunicaciones con servidores remotos.

Sin embargo, por motivos de seguridad, el navegador ejecuta el código JavaScript dentro de un entorno aislado denominado sandbox, que impide acceder libremente a los recursos del sistema operativo.

Entre otras limitaciones, un script no puede leer archivos del disco duro sin autorización del usuario, acceder a información perteneciente a otras páginas web o comunicarse libremente con servidores de dominios diferentes debido a la Same-Origin Policy.

Estas restricciones constituyen uno de los principales mecanismos de protección frente a aplicaciones maliciosas.

Ejemplo

Un script ejecutado desde https://tienda.com no puede acceder directamente a las cookies o al contenido de una página perteneciente a https://banco.com, aunque ambas se encuentren abiertas simultáneamente en el navegador.