Una aplicació d'una sola pàgina (SPA) és una aplicació web que es presenta a l'usuari mitjançant una única pàgina HTML per ser més sensible i per replicar més de prop una aplicació d'escriptori o una aplicació nativa.
De vegades ve un SPA defiinterfície de pàgina única (SPI).
Una aplicació d'una sola pàgina pot obtenir tot l'HTML, JavaScript i CSS de l'aplicació durant la càrrega inicial, o pot carregar dinàmicament recursos per actualitzar-los en resposta a la interacció de l'usuari o altres esdeveniments.
Altres aplicacions web, presenten a l'usuari una pàgina d'inici enllaçada a parts de l'aplicació en pàgines HTML separades, la qual cosa significa que l'usuari ha d'esperar que es carregui una pàgina nova cada vegada que fa una nova sol·licitud.
Tecnologies
Els SPA utilitzen HTML5 i Ajax (JavaScript i XML asíncrons) per permetre respostes fluides i dinàmiques a les sol·licituds dels usuaris, permetent que el contingut s'actualitzi immediatament quan un usuari fa una acció. Un cop carregada la pàgina, les interaccions amb el servidor tenen lloc mitjançant trucades Ajax i les dades es retornen, detectades en format JSON (JavaScript Object Notation), per actualitzar la pàgina sense necessitat de recàrregues.
SPA al detall
Les aplicacions d'una sola pàgina destaquen per la seva capacitat de redissenyar qualsevol part de la interfície d'usuari sense requerir un viatge d'anada i tornada del servidor per obtenir l'HTML. Això s'aconsegueix separant les dades de la presentació de dades amb una capa de model que gestiona les dades i una capa de vista que llegeix dels models.
Un bon codi prové de resoldre el mateix problema diverses vegades o de refactoritzar-lo. Normalment, aquest procés evoluciona en patrons recurrents, amb un mecanisme fent el mateix de manera coherent.
Per escriure codi que es pugui mantenir, cal escriure codi d'una manera senzilla. Aquesta és una lluita constant, de fet és fàcil afegir complexitat (entrants/dependències) escrivint codi per resoldre un problema; i és fàcil resoldre un problema d'una manera que no redueixi la complexitat.
Els espais de noms són un exemple d'això.
Aplicacions de pàgina única (SPA) Aplicacions de pàgines múltiples (MPA) comparades
Les aplicacions de diverses pàgines (MPA) contenen diverses pàgines amb dades estàtiques i enllaços a altres llocs. HTML i CSS són les principals tecnologies utilitzades per desenvolupar llocs web MPA. Poden utilitzar JavaScript per reduir la càrrega i augmentar la velocitat. Les organitzacions que ofereixen una àmplia gamma de serveis, com ara les botigues en línia, haurien de considerar l'ús de MPA, ja que facilita la connexió a diferents bases de dades d'usuaris.
Les aplicacions d'una sola pàgina es diferencien de les aplicacions de diverses pàgines en els aspectes següents:
- Procés de desenvolupament: Quan creeu MPA, no necessiteu coneixements de JavaScript, a diferència dels SPA. No obstant això, l'acoblament de front-ends i back-ends a les AMP significa que aquests llocs requereixen temps de construcció relativament més llargs que les AMP.
- Velocità: els MPA funcionen relativament més lentament, i requereixen que cada pàgina nova es carregui des de zero. Tanmateix, els SPA es carreguen molt més ràpidament després de la descàrrega inicial, ja que emmagatzemen dades a la memòria cau per a un ús posterior.
- Ottimització per i motori di ricerca: Els motors de cerca poden indexar fàcilment llocs web amb MPA. Les MPA tenen més pàgines rastrejades pels motors de cerca per generar millors rànquings de SEO. El contingut de cada pàgina també és estàtic, la qual cosa la fa més accessible. En canvi, els SPA tenen una pàgina amb un únic URL únic (Uniform Resource Locator). També utilitzen JavaScript, que no està indexat correctament per la majoria de motors de cerca. Això fa que els rànquings de SEO per a SPA siguin més difícils.
- Seguretat: A MPA, heu de protegir cada pàgina en línia individualment. Tanmateix, els SPA són més propensos als atacs de pirates informàtics. Però amb l'enfocament adequat, els equips de desenvolupament poden millorar la seguretat de les aplicacions.
A mesura que més empreses migren per utilitzar SPA, els rastrejadors i els motors de cerca evolucionaran per indexar-los millor. Donada la seva velocitat, només és qüestió de quan els SPA es convertiran en l'opció de referència per al desenvolupament d'aplicacions web. Aleshores, els avantatges de l'MPA sobre l'SPA començaran a esvair-se.
Quan utilitzar aplicacions d'una sola pàgina?
Hi ha cinc escenaris on aquestes aplicacions són més rellevants:
- Els usuaris que vulguin desenvolupar un lloc web amb una plataforma dinàmica i volums de dades més baixos poden utilitzar SPA.
- Els usuaris que planifiquen crear una aplicació mòbil per al seu lloc web també poden considerar utilitzar SPA. Poden utilitzar l'API de fons (Application Programming Interface) per al lloc i l'aplicació mòbil.
- L'arquitectura SPA és adequada per construir xarxes socials com Facebook, plataformes SaaS i comunitats tancades, ja que requereixen menys SEO.
- Els usuaris que vulguin oferir als seus consumidors una interacció perfecta també haurien d'utilitzar els SPA. Els consumidors també poden accedir a actualitzacions en directe de dades i gràfics en directe.
- Usuaris que volen oferir una experiència d'usuari coherent, nativa i dinàmica a través de dispositius, sistemes operatius i navegadors.
Un bon equip hauria de tenir el pressupost, les eines i el temps per crear una aplicació d'una sola pàgina d'alta qualitat. Això garantirà un SPA fiable i eficient que no experimenti temps d'inactivitat relacionat amb el trànsit.
Arquitectura d'aplicacions d'una sola pàgina
Les aplicacions d'una sola pàgina interactuen amb els visitants carregant i treballant a la pàgina actual, eliminant la necessitat de carregar diverses pàgines web des del servidor.
Els llocs web amb SPA consisteixen en un únic enllaç URL. El contingut es baixa i els components específics de la interfície d'usuari (UI) s'actualitzen quan es fa clic. L'experiència de l'usuari es millora ja que l'usuari pot interactuar amb la pàgina actual a mesura que s'obté contingut nou del servidor. Quan es produeix una actualització, parts de la pàgina actual s'actualitzen amb el contingut nou.
La sol·licitud inicial del client a SPA carrega l'aplicació i tots els seus actius rellevants, com ara HTML, CSS i JavaScript. El fitxer de càrrega inicial pot ser important per a aplicacions complexes i provocar un temps de càrrega més lent. Una interfície de programació d'aplicacions (API) obté dades noves mentre l'usuari navega per un SPA. el servidor només respon amb dades en format JSON (JavaScript Object Notation). En rebre aquestes dades, el navegador actualitza la vista de l'aplicació que veu l'usuari sense tornar a carregar cap pàgina.
L'arquitectura d'aplicacions d'una sola pàgina inclou tecnologies de representació del costat del servidor i del costat del client. El lloc es mostra i es presenta a l'usuari mitjançant la representació del costat del client (CSR), la representació del costat del servidor (SSR) o el generador de llocs estàtic (SSG).
- Representació del costat del client (CSR)
Amb la representació del costat del client, el navegador fa una sol·licitud al servidor d'un fitxer HTML i rep un fitxer HTML bàsic amb scripts i estils adjunts. Mentre executa JavaScript, l'usuari veu una pàgina en blanc o una imatge de carregador. L'SPA recupera les dades, produeix visualitzacions i envia les dades al model d'objectes de document (DOM). Després es prepara l'SPA per al seu ús. La CSR és sovint la més llarga de les tres alternatives i de tant en tant pot desbordar el navegador a causa del seu gran ús dels recursos del dispositiu en visualitzar contingut. A més, la RSC és una gran alternativa per als llocs web d'alt trànsit, ja que presenta informació als consumidors sense una comunicació excessiva amb el servidor, el que resulta en una experiència d'usuari més ràpida.
- Renderització del costat del servidor (SSR)
Durant la representació del costat del servidor, els navegadors sol·liciten un fitxer HTML al servidor, que obté les dades sol·licitades, representa l'SPA i crea el fitxer HTML per a l'aplicació en moviment. A continuació, es presenta material accessible a l'usuari. L'arquitectura SPA és necessària per adjuntar esdeveniments, produir un DOM virtual i realitzar més operacions. A continuació, es prepara l'SPA per al seu ús. SSR fa que el programa sigui ràpid, ja que combina la velocitat d'un SPA amb no sobrecarregar el navegador de l'usuari.
- Generador de llocs estàtics (SSG)
Dins del creador de llocs estàtic, els navegadors sol·liciten immediatament al servidor un fitxer HTML. La pàgina es mostra a l'usuari. L'SPA recupera les dades, genera vistes i omple el model d'objectes de document (DOM). Aleshores, l'SPA està llest per al seu ús. Deduint del nom, els SSG són adequats sobretot per a pàgines estàtiques. Proporcionen pàgines estàtiques amb una opció bona i ràpida. Per als llocs web amb contingut dinàmic, es recomana als usuaris que triïn una de les altres dues opcions de representació d'informació.
Avantatges de les aplicacions d'una sola pàgina
Grans empreses com Meta, YouTube i Netflix han passat d'aplicacions de diverses pàgines a aplicacions d'una sola pàgina. Els SPA ofereixen una experiència d'usuari més fluida, un major rendiment i capacitat de resposta. A continuació es mostren els avantatges d'utilitzar aplicacions d'una sola pàgina.
- Funció de memòria cau
Una aplicació d'una sola pàgina fa una sol·licitud única al servidor en la descàrrega inicial i desa les dades que rep. Els consumidors poden utilitzar les dades rebudes per treballar fora de línia si és necessari, cosa que fa que sigui més convenient per als usuaris, ja que els permet consumir menys recursos de dades. A més, quan un client té una mala connexió a Internet, les dades locals es poden sincronitzar amb el servidor si la connexió LAN ho permet.
- Ràpid i sensible
L'ús de SPA pot millorar la velocitat d'un lloc web, ja que només actualitza el contingut sol·licitat en lloc d'actualitzar tota la pàgina. Els SPA carreguen un fitxer JSON menor en lloc d'una pàgina nova. El fitxer JSON garanteix una velocitat de càrrega i una eficiència més ràpides. Dóna accés instantani a totes les característiques i funcions d'una pàgina sense cap demora. Aquest és un gran avantatge, ja que el temps de càrrega d'un lloc web pot afectar significativament els ingressos i les vendes.
Els SPA permeten transicions suaus proporcionant tota la informació de la pàgina a l'instant. El lloc web no s'ha d'actualitzar, de manera que els seus processos són més eficients que les aplicacions en línia típiques.
A més, amb SPA, actius com HTML, CSS i scripts Java només s'obtindran una vegada al llarg de la vida d'una aplicació. Només s'intercanvien les dades necessàries d'anada i tornada.
Les pàgines amb SPA també permeten als usuaris navegar més ràpidament gràcies a la memòria cau i als volums de dades reduïts. Només es transmeten les dades necessàries d'anada i tornada i només es descarreguen les parts que falten del contingut actualitzat.
- Depuració amb Chrome
La depuració detecta i elimina errors, errors i vulnerabilitats de seguretat de les aplicacions web que alenteixen el rendiment. La depuració de SPA es facilita amb les eines per a desenvolupadors de Chrome. Els desenvolupadors poden controlar la representació del codi JS des del navegador, depurar SPA sense revisar moltes línies de codi.
Els SPA es construeixen sobre marcs de JavaScript com ara les eines de desenvolupament AngularJS i React, cosa que els facilita la depuració amb els navegadors Chrome.
Les eines per a desenvolupadors permeten als desenvolupadors entendre com el navegador sol·licitarà dades dels servidors, les emmagatzemarà a la memòria cau i com mostrarà els elements de la pàgina. A més, aquestes eines permeten als desenvolupadors supervisar i analitzar els elements de la pàgina, les operacions de xarxa i les dades associades.
- Desenvolupament ràpid
Durant el procés de desenvolupament, el front-end i el back-end d'un SPA es poden separar, la qual cosa permet que dos o més desenvolupadors treballin en paral·lel. Canviar el frontend o el backend no afecta l'altre extrem, afavorint així un desenvolupament més ràpid.
Els desenvolupadors poden reutilitzar el codi del servidor i separar els SPA de la interfície d'usuari frontal. L'arquitectura desacoblada als SPA separa les pantalles frontals i els serveis de fons. Això permet als desenvolupadors canviar perspectives, crear i experimentar sense afectar el contingut ni preocupar-se per la tecnologia de fons. Aleshores, els clients poden tenir una experiència coherent utilitzant aquestes aplicacions.
- Experiència d'usuari millorada
Amb els SPA, els usuaris tenen accés a les pàgines visualitzades a l'instant amb tot el contingut alhora. Això és més convenient, ja que els usuaris poden desplaçar-se còmodament i sense problemes. Sembla com si utilitzes una aplicació d'escriptori o mòbil nativa.
Els SPA proporcionen una UX positiva amb un inici, un mig i un final diferents. A més, els usuaris poden arribar al contingut desitjat sense fer clic a diversos enllaços, com en les MPA. Experimenteu percentatges de rebot més baixos quan els usuaris tenen accés instantani a la informació, a diferència de les MPA on els usuaris es senten frustrats perquè les pàgines triguen molt de temps a carregar-se. La navegació també és més ràpida perquè els elements de la pàgina es reutilitzen.
- Conversió a aplicacions iOS i Android
Els desenvolupadors que vulguin passar a aplicacions d'iOS i Android haurien d'utilitzar SPA, ja que són relativament més fàcils de convertir. Poden utilitzar el mateix codi per canviar de SPA a aplicacions mòbils. Com que tot el codi es proporciona en una sola instància, els SPA són fàcils de navegar, cosa que els fa ideals per a aplicacions mòbils.
- Compatibilitat multiplataforma
Els desenvolupadors poden utilitzar una única base de codi per crear aplicacions que es puguin executar en qualsevol dispositiu, navegador i sistema operatiu. Això millora l'experiència del consumidor, ja que poden utilitzar l'SPA a qualsevol lloc. També permet als desenvolupadors i als enginyers de DevOps crear aplicacions riques en funcions, inclosa l'anàlisi en temps real, mentre desenvolupen aplicacions d'edició de contingut.
Desavantatges
Malgrat tots els avantatges de les aplicacions d'una sola pàgina, sorgeixen alguns desavantatges quan s'utilitzen marcs SPA. Afortunadament, s'està treballant per superar aquests problemes amb les SPA. A continuació es mostren alguns desavantatges;
- Optimització per a motors de cerca (SEO)
Es creu àmpliament que les aplicacions d'una sola pàgina no són bones per al SEO. La majoria de motors de cerca, com Google o Yahoo, no han pogut rastrejar llocs web SPA basats en les interaccions d'Ajax amb els servidors durant un temps. Com a resultat, la majoria d'aquests llocs SPA es van mantenir sense indexar. Actualment, als robots de Google se'ls ha ensenyat a utilitzar JavaScript en lloc de l'HTML normal per indexar llocs web de SPA, cosa que perjudica els rànquings.
Intentar encaixar el SEO en un lloc SPA ja fet és un repte i costós. Els desenvolupadors han de crear un lloc web independent, representat pel servidor del motor de cerca, que és ineficient i implica molt codi addicional. També es poden utilitzar altres tècniques com ara la detecció de característiques i la representació prèvia. A les instal·lacions de SPA, un únic URL per a cada pàgina limita les capacitats de SEO dels SPA.
- Botó de navegació enrere i endavant
Els navegadors guarden informació per ajudar les pàgines web a carregar-se ràpidament. Quan els consumidors prem el botó enrere, la majoria espera que la pàgina estigui en un estat semblant a l'última vegada que la van veure i que la transició es produeixi ràpidament. Les arquitectures web tradicionals ho permeten utilitzant còpies en memòria cau del lloc i recursos relacionats. Tanmateix, en una implementació ingènua d'un SPA, prémer el botó enrere té el mateix efecte que fer clic a un enllaç. Provoca una sol·licitud del servidor, augment del retard i canvis de dades visibles.
Per satisfer les expectatives dels usuaris i oferir una experiència més ràpida, els desenvolupadors de SPA han d'imitar la funcionalitat dels navegadors natius que utilitzen JavaScript.
- Ubicació de desplaçament
Els navegadors emmagatzemen informació com ara la darrera posició de desplaçament de les pàgines visitades. Tanmateix, els usuaris poden trobar que les posicions de desplaçament han canviat quan naveguen pels SPA mitjançant els botons enrere i endavant del navegador. Per exemple, a Facebook, de vegades els usuaris es desplacen fins a les darreres posicions de desplaçament, però de vegades no ho fan. Això resulta en una experiència d'usuari subòptima, ja que han de reprendre manualment el desplaçament cap a la posició de desplaçament anterior.
Per solucionar aquest problema, els desenvolupadors han de proporcionar codi que desi, recuperi i demani la posició de desplaçament correcta mentre l'usuari es desplaça cap endavant i cap enrere.
- Anàlisi web
En afegir codi d'anàlisi a una pàgina, els usuaris poden fer un seguiment del trànsit a la pàgina. Tanmateix, els SPA dificulten determinar quines pàgines o contingut és més popular, ja que només és una pàgina. Heu de proporcionar codi addicional perquè les analítiques facin un seguiment de les pseudopàgines a mesura que es visualitzen.
- Problemes de seguretat
Els SPA són més propensos a ser compromesos cross site scripting. Permeten als consumidors descarregar tota l'aplicació, exposant-los a més oportunitats de trobar vulnerabilitats mitjançant l'enginyeria inversa. Per solucionar aquest problema, els desenvolupadors han d'assegurar-se que tota la lògica del client relacionada amb la seguretat de les aplicacions web, com ara l'autenticació i la validació d'entrada, es dupliqui al servidor per a la verificació. A més, els desenvolupadors han de proporcionar un accés limitat basat en rols.
Concloent
Les aplicacions d'una sola pàgina marquen el següent pas en l'evolució de les experiències d'aplicacions. Són més ràpids, més intuïtius i es poden integrar amb funcions avançades com la personalització. És per això que les millors empreses amb molts usuaris concurrents, com ara Gmail, Netflix o el canal de notícies de Facebook, confien en una arquitectura de pàgina única. Amb la implementació d'aquesta tecnologia, les empreses poden treure més valor de les seves propietats en línia i fer noves incursions com a negoci digital.
Ercole Palmeri
