Arquitectura de Aplicaciones Web

¿Qué es una aplicación web?

Una aplicación web es un programa de software que se ejecuta en un servidor y al que los usuarios acceden a través de un navegador mediante internet o intranet, sin necesidad de instalar nada localmente.

El flujo básico ocurre así:

1. El usuario escribe una URL en el navegador
2. La solicitud viaja por Internet usando HTTP o HTTPS
3. Un servidor recibe, procesa y responde
4. El navegador muestra el resultado

La arquitectura web define cómo están organizados los componentes de una aplicación y cómo se comunican entre sí. Una buena arquitectura garantiza escalabilidad, mantenimiento y rendimiento.

Ejemplos de aplicaciones web que usas a diario:

Aplicación	Tipo	Característica
Google Docs	SaaS	Editor colaborativo en tiempo real
Netflix	Streaming	Microservicios altamente escalable
Moodle	LMS	Gestión de cursos y calificaciones
Facebook	Red social	APIs distribuidas y servicios propios

Todas comparten algo: funcionan en el navegador, se ejecutan en servidores remotos y se comunican vía HTTP/S.

---

Tipos de aplicaciones web

No todas las aplicaciones web son iguales. Se clasifican según su complejidad y propósito:

Página web

Documento HTML estático o dinámico accesible por URL. Contenido fijo o semi-dinámico, sin autenticación compleja. Ejemplo: wikipedia.org

Sitio web

Conjunto de páginas relacionadas bajo un mismo dominio. Navegación estructurada, puede incluir blog, galería y formularios de contacto. Ejemplo: apple.com

Sistema web

Aplicación con lógica de negocio completa, base de datos y gestión de usuarios. Incluye autenticación, roles, CRUD de datos y flujos complejos. Ejemplos: Moodle, SAP

API web

Interfaz de programación que expone datos y funciones vía HTTP. Responde en JSON o XML, no tiene interfaz visual, conecta aplicaciones entre sí. Ejemplos: REST, GraphQL

---

Modelo Cliente–Servidor

El modelo fundamental de comunicación en la web: el cliente pide, el servidor responde.

Usuario → Navegador → Internet / DNS → Servidor Web → Base de Datos
   ←          ←              ←               ←              ←

El cliente

Es el dispositivo o navegador que usa la persona: Chrome, Firefox, Safari. Envía requests (solicitudes) al servidor.

El servidor

Es la computadora que almacena información y responde solicitudes: Apache, Nginx, Node.js. Devuelve responses (respuestas) al cliente.

Puntos clave:

• El cliente pide recursos (HTTP Request)
• El servidor responde con datos (HTTP Response)
• HTTPS cifra toda la comunicación

---

Modelo de Tres Capas

Una arquitectura que separa la aplicación en tres responsabilidades independientes:

🖥️ Capa de Presentación (Frontend · UI)

• Interfaz de usuario: HTML, CSS, JavaScript
• Lo que el usuario ve e interactúa
• Tecnologías: React, Vue, Angular, Blade, Twig

⚙️ Capa de Lógica de Negocio (Backend)

• Reglas y procesos del sistema
• Validaciones, cálculos y flujos de trabajo
• Tecnologías: PHP, Python, Node.js, Java

🗄️ Capa de Datos

• Almacenamiento persistente de información
• Consultas y transacciones SQL/NoSQL
• Tecnologías: MySQL, PostgreSQL, MongoDB

Cada capa se comunica únicamente con la adyacente, lo que permite modificar una capa sin afectar las demás.

---

Patrón MVC

Modelo – Vista – Controlador: el patrón arquitectónico más usado en desarrollo web.

👁️ Vista (View)

Todo lo que el usuario ve e interactúa. Renderiza los datos del Modelo sin contener lógica de negocio.

🔀 Controlador (Controller)

El intermediario. Recibe peticiones HTTP, procesa la lógica de flujo y coordina el Modelo y la Vista. Maneja rutas y validaciones.

💾 Modelo (Model)

La lógica de datos. Accede a la base de datos, aplica reglas de negocio y devuelve información estructurada al Controlador.

Frameworks que usan MVC:

• Laravel (PHP)
• Django (Python)
• Ruby on Rails
• ASP.NET Core (.NET)
• CodeIgniter (PHP)

---

Comparación de Arquitecturas

Criterio	Cliente-Servidor	Tres Capas	MVC
Organización	2 nodos: cliente y servidor	3 capas independientes	3 componentes por rol
Escalabilidad	Media — limitada	Alta — capas escalan solas	Alta — separación clara
Mantenimiento	Difícil — cambios afectan todo	Fácil — capas aisladas	Fácil — componentes independientes
Reutilización	Baja	Media	Alta
Uso común	Apps simples, FTP, correo	ERP, sistemas empresariales	Laravel, Django, Rails
Complejidad inicial	Baja	Media	Media

---

APIs en Aplicaciones Web

Una API (Application Programming Interface) es un conjunto de reglas y protocolos que permite que dos aplicaciones se comuniquen entre sí de forma estandarizada.

Como un menú de restaurante: defines qué puedes pedir y cómo recibirás la respuesta.

Las APIs permiten que frontend y backend trabajen de forma independiente, y que servicios de terceros (pagos, mapas, redes sociales) se integren fácilmente.

Conceptos clave de una API:

• Endpoints: URLs que representan recursos (/usuarios, /productos)
• Verbos HTTP: GET (leer), POST (crear), PUT (actualizar), DELETE (eliminar)
• Formato: Responden en JSON (mayormente) o XML
• Autenticación: Token JWT, API Key, OAuth

---

Tipos de APIs Web

API de Acceso a Datos

Permite leer, crear, actualizar y eliminar datos de un sistema. Opera sobre recursos. Ejemplos: Google Maps API, OpenWeather API

API Cliente-Servidor (REST)

La más común. Sigue HTTP: el cliente hace una request y el servidor devuelve una response. Ejemplos: Spotify API, GitHub API

API Punto a Punto

Comunicación directa entre dos aplicaciones sin intermediario central. Alta eficiencia. Ejemplo: sistemas de pagos internos

API en Tiempo Real

Comunicación bidireccional y continua mediante WebSockets o Server-Sent Events. Ejemplos: WhatsApp Web, chat en vivo, datos de bolsa

Las APIs REST son el estándar más usado. Retornan JSON y se acceden mediante verbos HTTP: GET · POST · PUT · DELETE.

---

Stack Tecnológico Moderno

El ecosistema actual de desarrollo web full stack:

Frontend

• React, Vue.js, Angular
• Next.js, Svelte

Backend

• Laravel (PHP), Node.js
• Django (Python), Ruby on Rails, ASP.NET Core

Base de Datos

• MySQL, PostgreSQL (relacionales)
• MongoDB, Redis, Firebase (NoSQL)

Cloud / DevOps

• AWS, Azure, Google Cloud
• Docker, Kubernetes

---

Caso Práctico: Sistema Escolar Web

Un sistema escolar web moderno aplica todos los conceptos vistos. Su arquitectura completa sería:

Usuarios → Frontend → API Gateway → Backend → Base de Datos

• Frontend (React/Vue): vistas para alumno, docente y admin — calificaciones, horarios, tareas, chat
• API Gateway (REST · JSON): punto de entrada centralizado para todas las peticiones
• Backend (Laravel/Node): autenticación JWT, lógica de notas, notificaciones, reportes PDF
• Base de Datos (MySQL/PostgreSQL): tablas de alumnos, materias, calificaciones y usuarios

Patrón aplicado: MVC + API REST. Frontend desacoplado del Backend. Base de datos relacional para garantizar integridad de los datos escolares.

---