Què són les aplicacions d'una sola pàgina i les aplicacions web progressives?

Què són les aplicacions d'una sola pàgina i les aplicacions web progressives?

Les aplicacions de pàgina única (SPAs) i les aplicacions web progressives (PWA) estan revolucionant el web. Tots dos són tecnologies noves que semblen, però no ho són. De cara, la gent sol utilitzar-los indistintament.





Aprofundim en les característiques bàsiques i l'arquitectura de cadascun d'ells per entendre'ls millor.



Què són les aplicacions d'una sola pàgina?

Les SPA, tal com sonen, són llocs web que carreguen contingut de manera dinàmica dins d’una sola pàgina. En essència, tota forma de contingut i element que necessiteu per interactuar amb estiraments en una pàgina. Això vol dir que no cal carregar models d'objectes de document (DOM) separats quan navegueu per aquest lloc web.





Dit això, l’objectiu és mantenir els usuaris a la mateixa pàgina carregant tot el que han d’utilitzar i veure alhora. Això es tradueix en una millor experiència d'usuari.

La interfície d'usuari, d'altra banda, depèn de com dissenyeu i organitzeu el vostre SPA. Això es resumeix en el motiu pel qual és possible que vulgueu dividir la pàgina estirada en navegacions. I això no impedeix que sigui una sola pàgina, ja que el contingut encara es carrega una sola vegada.



Per tant, quan navegueu per un SPA, esteu navegant per contingut precarregat en un sol DOM i no visiteu diferents DOM, tal com és possible que hagueu cregut erròniament.

Desglossar un SPA en seccions de contingut separades normalment implica donar a cadascun d’ells un URL mitjançant visualitzacions JavaScript. El enllaç de dades connector enllaça aquestes seccions amb el DOM principal i us permet accedir-hi de manera asíncrona.



Encara que altres tecnologies com Com i olm-spa arriben, JavaScript continua sent el llenguatge de programació més comú per a l'elaboració de SPA.

Relacionat: marcs JavaScript que val la pena aprendre



JavaScript utilitza un fitxer asíncron / espera funció que us permet carregar contingut dinàmic i estàtic de manera asíncrona sense que una entrada bloquegi la sortida d'una altra sol·licitud. Per tant, les SPA funcionen amb un sistema d’entrada-sortida (E / S) que no bloqueja.

Dit això, els frameworks JavaScript com ReactJS, Vue.js, AngularJS, Ember.js i Backbone.js admeten el ràpid desenvolupament de SPAs. Per començar, podeu consultar la visió general de Vue.js per a principiants.

Com que confereix velocitat, la majoria d’aplicacions empresarials han adoptat la idea de transformar els seus llocs web en una sola pàgina. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter i Pinterest són exemples de SPA.

Què són les aplicacions web progressives?

Un PWA és una aplicació web o un programari que utilitza pautes de navegador web estàndard i emergents en la seva funcionalitat. Les PWA, a diferència de les SPA, basen la seva arquitectura en alguns conjunts de directrius que els fan escalables, adaptables a l’usuari, súper ràpids, instal·lables i semblants als natius.

Presentat el 2015 per Google, l’objectiu d’un PWA és crear aplicacions que parlin de manera directa i progressiva amb els seus usuaris. Té com a objectiu que els usuaris flueixin amb l’aplicació, fins i tot quan hi ha una connexió de xarxa deficient o inexistent.

Invariablement, un PWA proporciona tot el que necessiteu en un instant. No passa per la característica típica de càrrega de contingut inicial d'un SPA.

En conseqüència, l'usuari interactua amb l'aplicació com si fos nativa. Tot i que la característica bàsica dels PWA és la instal·labilitat, encara podeu accedir-hi al volant des del navegador web sense cap instal·lació. Dit això, com qualsevol altre lloc web, un PWA també ha de tenir un URL.

Relacionat: Què són les aplicacions web progressives i com s'instal·la una?

Les aplicacions web progressives són úniques, ja que tenen ajudants de fons que ofereixen contingut en un tres i no res. Per tant, fins i tot abans d’arribar a l’aplicació web, el contingut i els components estan fàcilment disponibles per utilitzar-los. Això els fa super ràpids i més fiables.

Aplicacions com Spotify, Slack i Uber, entre d’altres, són exemples de PWA.

Els PWA solen tenir una regla arquitectònica comuna. Perquè un PWA funcioni com hauria de tenir, ha de tenir els atributs següents:

1. Un treballador

Els treballadors del servei ofereixen contingut fàcilment a PWA. Asseguren que la vostra aplicació pugui carregar dades relacionades a la memòria cau quan no hi hagi connexió de xarxa. Això és possible amb l'ajuda de l'API Cache, que emmagatzema les respostes a les vostres sol·licituds fora de línia. Per tant, un treballador interfereix en les navegacions i les sol·licituds dels usuaris.

Relacionat: Com funciona la memòria cau de la CPU?

Utilitzant un fitxer promesa objecte, un treballador pot lliurar contingut ja descarregat en cas que l’usuari ho sol·liciti (fins i tot si no té connexió). Un treballador del servei, però, confereix una propietat que no bloqueja als PWA.

2. Un context segur

Un treballador del servei necessita una connexió segura (HTTPS) per a la confidencialitat del contingut lliurat. Quan envieu una sol·licitud, un treballador estableix una comunicació segura entre el PWA i el navegador. Un context segur, per tant, evita les violacions de confidencialitat com un atac man-in-the-middle (MITM) als PWA.

3. Un fitxer de manifest d'aplicacions web

Un manifest web és un fitxer JSON que defineix les característiques d'un PWA. Detalla els requisits previs per accedir, descobrir i utilitzar el contingut d’una PWA. Normalment inclou el nom de la vostra aplicació, el seu URL i els seus components. En definitiva, un fitxer de manifest conté la informació necessària per convertir la vostra aplicació web en una aplicació instal·lable.

Quines són les similituds entre PWAs i SPAs?

Tot i que la lògica de fons de les PWA i les SPA és diferent, encara comparteixen algunes coses en comú. Tot i que la seva velocitat de lliurament pot variar significativament, els llocs web convencionals encara queden enrere en velocitat i accessibilitat.

Tots dos pretenen millorar l’experiència de l’usuari proporcionant una interfície sensible.

Com que tots dos ofereixen una experiència d'aplicació, és fàcil barrejar-los i difícilment es pot saber quin és quan interactua amb ells. Finalment, en aquesta nota, tots dos necessiten un URL per poder accedir-hi.

Les diferències clau entre les SPA i les PWA

Les PWA i les SPA poden compartir algunes característiques notables en comú, però són dues coses diferents. A continuació, es detallen les principals diferències de característiques:

Funcions clau de les aplicacions d’una sola pàgina

  • Només són accessibles des del navegador.
  • Tot i que no es recomana, podeu publicar-los en una xarxa insegura (HTTP).
  • No requereixen treballadors del servei.
  • Els SPA no tenen un fitxer de manifest JSON, cosa que significa que no es poden instal·lar.
  • Han de ser d’una sola pàgina.
  • No accessible quan no hi ha xarxa.

Funcions clau de les aplicacions web progressives

  • Accedir-hi a través del navegador és una opció ja que es pot instal·lar.
  • Tots els PWA necessiten treballadors del servei i han de fer sol·licituds mitjançant una xarxa segura (HTTPS).
  • Les respostes es guarden a la memòria cau i es lliuren mitjançant un promesa objecte.
  • Són accessibles fins i tot en absència de connexió de xarxa.
  • Són més ràpids que els SPA.
  • Sempre tenen un fitxer manifest, de manera que es poden descarregar, instal·lar i accedir fàcilment.
  • Un PWA pot no ser una aplicació d’una sola pàgina.

Els SPAs i PWA estan influint en el lliurament de llocs web

Amb molts llocs web empresarials que ara adopten aquestes noves tecnologies, ara hi ha un canvi positiu cap a la prestació de serveis.

Més important encara, l’adopció de PWA millora l’experiència general de l’usuari, que en conseqüència redueix els percentatges de rebots i augmenta els ingressos de la majoria d’aplicacions empresarials. Les SPA, en canvi, també han rejovenit les xarxes socials, cosa que facilita la interacció de la gent a través de la web sense càrregues de pàgines lentes.

com es pot capturar el registre de Snapchat sense que ho sàpiguen
Compartir Compartir Tweet Correu electrònic Programació síncrona versus programació asíncrona: en què són diferents?

Heu d’utilitzar programació síncrona o asíncrona per al vostre proper projecte? Informa’t aquí.

Llegiu a continuació Temes relacionats
  • Programació
  • Programació
  • Desenvolupament d'aplicacions
Sobre l'autor Idisou Omisola(94 articles publicats)

Idowu és un apassionat de qualsevol tecnologia intel·ligent i productivitat. Durant el temps lliure, juga amb la codificació i canvia al tauler d’escacs quan s’avorreix, però també li agrada deixar de banda la rutina de tant en tant. La seva passió per mostrar a la gent el camí cap a la tecnologia moderna el motiva a escriure més.

Més de Idowu Omisola

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us