Salta el contingut

Arquitectures Web

Actors principals

Els primers navegadors van ser essencials per popularitzar la web:

  • WorldWideWeb (1990) – Creat per Tim Berners-Lee, només per a NeXTSTEP.
  • Mosaic (1993) – Primer navegador amb interfície gràfica per Windows i Mac.
  • Netscape Navigator (1994) – Va dominar el mercat inicialment.
  • Internet Explorer (1995) – Integrat a Windows, va marcar una època.
  • Mozilla Firefox (2002) i Google Chrome (2008) – Van consolidar la web moderna, segura i estandarditzada.

Aquests navegadors han anat incorporant noves tecnologies com CSS, JavaScript, AJAX, i HTML5, permetent aplicacions cada cop més interactives i ràpides.

Servidor Web

Un servidor web és un programa que processa sol·licituds HTTP/HTTPS i serveix contingut web als clients. Les seves funcions principals inclouen:

  • Processament de peticions HTTP/HTTPS
  • Servei de contingut estàtic (HTML, CSS, JS, imatges)
  • Execució de contingut dinàmic (PHP, Python, Node.js)
  • Gestió de connexions concurrents
  • Control d'accés i autenticació
  • Registre d'activitat (logging)

Els servidors web moderns utilitzen diferents models de processament:

  • Multi-Process Model (MPM): Processos independents
  • Multi-Threaded Model: Fils d'execució
  • Event-Driven Model: Basat en esdeveniments asíncrons
  • Hybrid Model: Combinació dels anteriors

Servidor d'Aplicacions

És habitual confondre'l amb el servidor web, però té un rol diferent:

  • Un servidor web (Apache, IIS, Nginx) va néixer per servir contingut estàtic via HTTP/HTTPS (HTML, imatges, CSS). Amb mòduls, també pot executar codi (PHP, etc.), però aquesta no és la seva funció original.
  • Un servidor d'aplicacions està orientat des del principi a executar programes que atenen les peticions dels clients i en retornen el resultat (sovint en HTML, via els mateixos protocols HTTP). A més d'executar la lògica de negoci, sol incloure serveis complementaris: persistència de dades, seguretat, gestió de transaccions i concurrència.

Quan el servidor d'aplicacions no sap parlar HTTP directament, es col·loca darrere d'un servidor web que fa d'intermediari amb el client:

flowchart LR
    B[Navegador] -->|HTTP/HTTPS| W[Servidor Web]
    W -->|Plug-in| A[Servidor d'Aplicacions]
    A --> D[(Base de Dades)]
    A --> S[Altres serveis backend]

Arquitectures Web

Amb el temps, les aplicacions web han evolucionat des de models senzills fins a estructures complexes i distribuïdes. Una aplicació distribuïda és una col·lecció d'ordinadors autònoms, enllaçats per una xarxa, que es comporten de cara a l'usuari com un únic servei integrat: el client no necessita saber si "el servidor" és en realitat un servidor web, un d'aplicacions i una base de dades treballant junts.

Arquitectura Client-Servidor

Aquest model és la base del funcionament d’Internet. El client sol·licita un recurs, i el servidor el processa i retorna una resposta. Aquesta arquitectura és sincrònica i centrada en peticions, i s'expressa amb el protocol HTTP.

sequenceDiagram
    participant C as Client (Navegador)
    participant S as Servidor Web
    C->>S: HTTP Request (GET /index.html)
    S-->>C: HTTP Response (HTML, CSS, JS)

Arquitectura Multinivell (o N-Tier)

Quan les aplicacions van començar a créixer, va sorgir la necessitat de dividir les seves parts en nivells lògics. Els més habituals són:

  1. Presentació (client) – Interfície d’usuari (HTML, JS, navegadors, apps).
  2. Lògica de negoci (aplicació) – Processament de dades, regles, API REST.
  3. Dades (servidor de base de dades) – Emmagatzematge i consultes.

Aquesta separació facilita la mantenibilitat, escalabilitat i seguretat de les aplicacions.

graph TD
    A[Client Web o Mòbil] --> B[Servidor d'Aplicacions]
    B --> C[Base de Dades]
    B --> D[Serveis Externs / API]

Model Vista-Controlador (MVC)

Dins del servidor d'aplicacions, el patró Model-Vista-Controlador separa el codi en tres responsabilitats independents, facilitant-ne el manteniment:

  • Model: les dades de l'aplicació, les regles de negoci i la lògica associada.
  • Vista: la representació visible per a l'usuari (la interfície).
  • Controlador: rep la interacció de l'usuari (peticions) i la tradueix en ordres cap al model o la vista.
flowchart LR
    U((Usuari)) -->|Petició| C[Controlador]
    C -->|Consulta/actualitza| M[Model]
    C -->|Selecciona| V[Vista]
    V -->|Resposta| U

AC0375/03/02 — Miniactivitat

RA3 · CA3a

Dibuixa un diagrama (a mà o amb una eina com draw.io) de l'arquitectura d'una aplicació web que coneguis o utilitzis habitualment (per exemple, una botiga en línia o una xarxa social), identificant-hi el navegador, el(s) servidor(s) web, el servidor d'aplicacions i la base de dades. Indica quin patró s'hi assembla més: client-servidor simple, N-Tier o MVC.

Referències

Documentació oficial, eines de testatge i vídeos sobre serveis web: consulta la secció Serveis Web a la pàgina d'Annexos · Recursos.