UT01 Arquitecturas Web

En este tema trabajaremos los siguientes RAs:

• RA1. Selecciona las arquitecturas y tecnologías de programación Web en entorno servidor, analizando sus capacidades y características propias.

UT01 Arquitecturas Web

Introducción

Una página web estática es aquella cuyo contenido no cambia en función de la interacción del usuario o del contexto. Estas páginas están compuestas principalmente por archivos HTML y CSS, que se almacenan en un servidor y se envían tal cual al navegador del usuario. El servidor simplemente "sirve" estos archivos, sin procesamiento adicional.

Las aplicaciones web modernas requieren mayor interactividad y personalización, lo que nos lleva a la necesidad de páginas web dinámicas, donde el contenido cambia según la interacción, datos de bases de datos o servicios externos.

Las aplicaciones web modernas se basan en la arquitectura cliente-servidor. Los clientes (navegadores web) realizan peticiones al servidor, que responde enviando los recursos solicitados, como se ve en el esquema siguiente:

El cliente realiza peticiones al servidor, habitualmente usando el protocolo HTTP. El servidor procesa la solicitud y responde con el contenido adecuado.

Existen dos formas principales de generar páginas dinámicas:

• Procesamiento en el servidor: El servidor genera contenido dinámico usando lenguajes como PHP, Python, Ruby, Java, .NET, etc.
• Consumo de servicios externos desde el cliente: El navegador usa JavaScript para solicitar datos a servicios REST y actualizar la página dinámicamente.

Arquitectura Cliente-Servidor

El modelo cliente-servidor reparte tareas entre los proveedores de recursos (servidores) y los consumidores (clientes), habitualmente comunicándose a través de una red, aunque pueden residir en la misma máquina en desarrollo.

1. El usuario solicita una URL desde el navegador web.
2. El servidor recibe la petición HTTP y la procesa mediante su lógica de negocio.
3. Produce una respuesta HTTP, que puede contener archivos HTML, CSS, XML, JSON, multimedia, JavaScript, etc.
4. El navegador interpreta y representa la respuesta (normalmente página web).

Ventajas:

• Centralización del control.
• Escalabilidad: aumentar capacidad de clientes y servidores.
• Portabilidad: independencia del sistema operativo.
• Fácil mantenimiento y encapsulación.
• Tecnologías desarrolladas para usabilidad y seguridad.

Desventajas:

• Congestión de tráfico puede causar sobrecargas.
• Caída del servidor implica falla en las peticiones.
• Dependencia de hardware y software específico.

Ejemplo práctico

Usando las herramientas de desarrollador del navegador vamos a observar los pasos al consultar una URL (Campus Virtual FP).

1. Abrimos una pestaña en el navegador e introducimos la URL www.campusvirtualfp.com.
   
2. Abrimos las herramientas de desarrollador y vamos a la pestaña Network.
   
3. Refrescamos la página y observamos:
   
   • whois: indica la IP del servidor.
   • builtwith: analiza los servidores y tecnologías empleadas.
4. El servidor responde y la información se muestra en el navegador.

Pinchando en la petición principal vemos los datos y la respuesta, incluyendo el código HTTP devuelto (200).

Generación de páginas web

Estáticas

Las webs estáticas no actualizan dinámicamente su contenido por interacción del usuario; la misma URL siempre devuelve la misma información, salvo cambios manuales por un desarrollador.

Dinámicas

Las webs dinámicas generan contenido en función de datos actuales en el servidor, normalmente usando bases de datos y tecnologías que permiten operaciones CRUD (crear, leer, modificar, eliminar).

Arquitecturas Web: Capas Físicas y Lógicas

Las arquitecturas web modernas usan capas físicas (tiers) y capas lógicas para organizar funcionalidad y facilitar escalabilidad/mantenimiento.

Capas Físicas (Tiers)

• Servidor web
• Servidor de aplicaciones
• Servidor de base de datos

Capas Lógicas (Layers)

• Presentación: Interfaz de usuario
• Negocio/Aplicación: Lógica de negocio
• Datos/Persistencia: Gestión de datos

Modelo MVC (Modelo-Vista-Controlador)

• Modelo: Gestión de datos y acceso
• Controlador: Procesa acciones del usuario y coordina entre modelo y vista
• Vista: Presentación al usuario e interacción

Patrones y tipos de arquitecturas en Servidor

Principios SOLID

Cinco principios para diseño de software orientado a objetos.

Video SOLID

1. Responsabilidad única: Una clase debe tener una sola razón para cambiar.
2. Abierto/Cerrado: Clases abiertas a extensión, cerradas a modificación.
3. Sustitución de Liskov: Las subclases deben poder sustituir a la superclase sin alterar el funcionamiento.
4. Segregación de interfaces: Los clientes no deben depender de interfaces que no usan.
5. Inversión de dependencias: Dependencia de abstracciones, no implementaciones concretas.

Patrones de Diseño

• Patrones de creación: Singleton, Factory, Builder...
• Patrones estructurales: Adapter, Decorator, Proxy...
• Patrones de comportamiento: Observer, Strategy, Command...
• Patrones arquitectónicos: MVC, Capas, Microservicios...
• Patrones de concurrencia: Mutex, Semaphore, Monitor...

Más información en Refactoring Guru y Entornos de Desarrollo 8.

Arquitecturas Software

• Monolítica: Todo en una sola aplicación. Fácil de desarrollar pero difícil de escalar y mantener.
• De capas: Separación por capas lógicas, mejorando modularidad, mantenibilidad y escalabilidad.
• Servicios web: Servicios independientes que se comunican por protocolos estándar, permitiendo modularidad y escalabilidad horizontal.
• Microservicios: División máxima en servicios pequeños y autónomos, ideal para grandes sistemas pero costoso para pequeños.

Ejemplo de arquitectura: Netflix

Netflix usa una arquitectura basada en microservicios, cada uno dedicado a tareas específicas y comunicándose por interfaces bien definidas, permitiendo alta escalabilidad y flexibilidad.

API Web

Una API web permite que diferentes aplicaciones o sistemas se comuniquen y compartan datos. Utiliza HTTP y formatos como JSON o XML.

• API RESTful: Usa métodos HTTP para acceder/manipular recursos. Exposición de datos vía URLs, usando JSON.
• API GraphQL: Una especificación para pedir exactamente los datos necesarios en cada consulta.
• API Websocket: Permiten comunicación bidireccional en tiempo real entre cliente y servidor.