Aplicacions web

Una aplicació web és un programari que implica un client i un servidor que es comuniquen utilitzant la xarxa i el seu protocol HTTP.

  • El client és un navegador web, que sap com renderitzar documents basats en els estàndards web HTML (estructura), CSS (estil) i JavaScript (lògica).
  • El servidor permet rebre peticions HTTP de diferents tipus (GET, POST, PUT, DELETE...) per a retornar, crear, modificar o esborrar continguts.

Hi ha diferents models d'aplicació web que es distingeixen en funció de qui, com i quan genera els documents o continguts que renderitzarà el navegador per a l'usuari.

Història

Inicialment, els continguts eren només estàtics. Hi ha servidors web que serveixen HTML i CSS amb HTTP GET. L'adreça del navegador és un HTTP GET cap el servidor, que serveix continguts estàtics. Aquests continguts els ha creat prèviament un dissenyador utilitzant eines de disseny.

L'aparició de PHP revoluciona la web. Es tracta d'un llenguatge que permet rebre peticions HTTP POST, accedir a bases de dades i generar documents HTML de forma dinàmica. Per tant, els documents els genera el servidor dinàmicament en funció de les peticions del navegador utilitzant motors de plantilles. Se'n diuen Multi-Page Applications (MPA), i van apareixen nous frameworks (Servlets, ASP.NET, Laravel, Django, Spring).

També el navegador evoluciona, amb JavaScript, que permet manipular el DOM i fer interaccions dinàmiques, així com Ajax, que permet fer peticions al servidor sense recarregar la pàgina. Els navegadors són cada cop més compatibles, i es desenvolupa un motor JavaScript en el servidor, Node.js. Podem comunicar-nos amb el servidor amb altres tipus de continguts, com per exemple JSON. També tenim JQuery, una llibreria que facilita la manipulació del DOM.

És el preàmbul de les Single-Page Applications (SPA).

Single-Page Application

Una SPA encapsula la majoria de la lògica de l'aplicació al client mitjançant JavaScript, i sap com generar els documents HTML i CSS. El navegador obté aquesta lògica mitjançant una petició de documents estàtics (HTML amb JavaScript), i esdevé una aplicació autònoma. De fet, intercepta el routing de la URL a l'adreça del navegador, que no produeix necessàriament comunicació amb el servidor.

Només accedirà a un servidor si necessita interactuar amb altres recursos externs dins d'una arquitectura centralitzada que comparteix amb altres usuaris o aplicacions. D'aquesta arquitectura se'n diu full-stack web, i té dues aplicacions: la del client (front-end) i la del servidor (back-end), comunicades amb un protocol sobre HTTP i un format de dades, com JSON.

Tenim diverses solucions al client i al servidor, que poden ser intercanviables si es respecta el protocol:

  • Al client hi ha diverses llibreries o frameworks, com Angular, React o Vue.
  • Al servidor es poden utilitzar frameworks MPA o bé de nous, com Node.js (Express.js).