SPA (Single Page Application)

Què és una single page application?

Una single page application carrega un document HTML i després reescriu el contingut visible amb JavaScript a mesura que l'usuari navega. El navegador mai fa una recàrrega completa de la pàgina. En fer clic en un enllaç s'intercanvia la vista, s'obtenen les dades que necessiti a través d'una API i s'actualitza la pantalla sobre la marxa. El resultat se sent més a prop d'una aplicació d'escriptori que d'una web tradicional.

Aquest és el model darrere de frameworks com React, Vue i Angular. El compromís és real. Les SPA donen una navegació ràpida i fluida després de la primera càrrega i una separació neta entre frontend i backend, però el bundle inicial és més pesat, i els cercadors i els rastrejadors socials històricament s'ho passaven magre amb contingut que només existeix després que corri el JavaScript. Aquest últim problema és el perquè el renderitzat en servidor i la generació estàtica existeixen com a companys del model SPA. Una eina de gestió de projectes on un usuari arrossega targetes entre columnes, filtra tasques i edita sobre la marxa sense que la pàgina parpellegi mai és una SPA de manual.

Una SPA contrasta amb una aplicació multipàgina, on cada ruta és un document a part servit pel servidor. Les SPA guanyen en interactivitat. Les apps multipàgina guanyen en simplicitat i velocitat de primera càrrega. La majoria de productes seriosos acaben barrejant totes dues.

Les SPA a Dallonses

Una SPA és la decisió encertada quan la interfície és de debò una aplicació: interacció pesada, estat en viu, molta edició sobre la marxa. És la decisió equivocada quan algú hi recorre per costum per al que en realitat és un lloc de contingut. N'hem heretat molts del segon tipus, on una pàgina de màrqueting es va llançar com una SPA de cinc megabytes i Google gairebé no la va veure. Part de la nostra feina de desenvolupament d'aplicacions web és saber quin problema tenim de debò abans d'escollir la forma.

Quan sí que en construïm una, l'arquitectura importa més que el framework. Obtenció de dades clara, divisió de codi assenyada perquè la primera càrrega segueixi lleugera i una estratègia de renderitzat que mantingui l'app trobable. Combinem el desenvolupament d'aplicacions web a mida amb el disseny de l'API que té al darrere, perquè una SPA és només tan bona com el contracte amb què parla. Tots dos es construeixen junts, no se n'atornilla un després.

Construeixes una cosa prou interactiva com per necessitar una SPA? Encertem amb l'arquitectura des del principi.

Parlem de la teva app