Čo sú to jednostránkové aplikácie a progresívne webové aplikácie?

Čo sú to jednostránkové aplikácie a progresívne webové aplikácie?

Jednostránkové aplikácie (SPA) a progresívne webové aplikácie (PWA) prinášajú na web revolúciu. Obe sú to nové technológie, ktoré vyzerajú podobne, ale nie sú. Tvárou v tvár ich ľudia často používajú zameniteľne.





Poďme sa ponoriť do základných funkcií a architektúry každého z nich, aby sme im lepšie porozumeli.





Čo sú to jednostránkové aplikácie?

SPA, ako to znie, sú webové stránky, ktoré načítavajú obsah dynamicky na jednej stránke. V podstate každá forma obsahu a prvku, s ktorou potrebujete pracovať, sa tiahne na jednej stránke. To znamená, že pri navigácii na takom webe nemusíte načítať samostatné modely objektových dokumentov (DOM).





To znamená, že cieľom je udržať používateľov na tej istej stránke načítaním všetkého, čo potrebujú na použitie a zobrazenie naraz. To znamená lepšiu používateľskú skúsenosť.

Používateľské rozhranie na druhej strane závisí od toho, ako svoje SPA navrhnete a usporiadate. To sa scvrkáva na dôvod, prečo by ste mohli chcieť rozdrobenú stránku rozdeliť na navigácie. A to nezabráni tomu, aby to bola jedna stránka, pretože obsah sa stále načítava iba raz.



Keď teda navigujete v SPA, prehliadate si vopred načítaný obsah v jednom DOM a nenavštevujete rôzne DOM, ako ste sa mohli mylne domnievať.

Rozdelenie SPA na samostatné sekcie obsahu zvyčajne zahŕňa poskytnutie každej z nich adresy URL pomocou zobrazení JavaScript. The dátový odkaz konektor prepojí tieto sekcie s hlavným DOM a umožní vám k nim prístup asynchrónne.





Aj keď iné technológie ako As a brestové kúpele prichádzajú, JavaScript je stále najbežnejším programovacím jazykom na vytváranie SPA.

Súvisiace: Rámce JavaScriptu, ktoré sa oplatí naučiť





JavaScript používa príponu asynchrónne/čakajte funkcia, ktorá vám umožní asynchrónne načítať dynamický aj statický obsah bez toho, aby jeden vstup blokoval výstup ďalšej požiadavky. SPA teda fungujú na neblokujúcom systéme vstupno-výstupných (I/O).

To znamená, že rámce JavaScript ako ReactJS, Vue.js, AngularJS, Ember.js a Backbone.js všetky podporujú rýchly vývoj SPA. Ak chcete začať, môžete si prejsť tento prehľad začiatočníkov o Vue.js.

Pretože poskytuje rýchlosť, väčšina podnikových aplikácií prijala myšlienku transformácie svojich webových stránok na jednu stránku. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter a Pinterest sú príkladmi SPA.

Čo sú to progresívne webové aplikácie?

PWA je webová aplikácia alebo softvér, ktorý vo svojej funkcii používa štandardné a novo vznikajúce pokyny pre webový prehliadač. PWA, na rozdiel od SPA, stavia svoju architektúru na nejakom súbore smerníc, vďaka ktorým sú škálovateľné, užívateľsky prispôsobiteľné, super rýchle, inštalovateľné a natívne.

Cieľom spoločnosti PWA, ktorú v roku 2015 predstavila spoločnosť Google, je vytvárať aplikácie, ktoré priamo a postupne komunikujú so svojimi používateľmi. Cieľom je udržať používateľov v prevádzke, aj keď je slabé alebo neexistujúce sieťové pripojenie.

PWA vždy dodá všetko, čo potrebujete, okamžite. Neprechádza typickou počiatočnou charakteristikou načítania obsahu v SPA.

V dôsledku toho používateľ potom s aplikáciou interaguje, ako keby bola natívna. Napriek tomu, že základnou charakteristikou PWA je inštalovateľnosť, máte k nim stále prístup prostredníctvom webového prehliadača bez akejkoľvek inštalácie. To znamená, že ako každá iná webová stránka, aj PWA musí mať adresu URL.

Súvisiace: Čo sú to progresívne webové aplikácie a ako si ich inštalujete?

Progresívne webové aplikácie sú jedinečné v tom, že majú pomocníkov na pozadí, ktorí doručia obsah mihnutím oka. Takže ešte predtým, ako sa dostanete k webovej aplikácii, je obsah a komponenty pripravené na použitie. Vďaka tomu sú super rýchle a spoľahlivejšie.

Aplikácie ako Spotify, Slack a Uber, okrem iných, sú príkladmi PWA.

PWA majú spravidla spoločné architektonické pravidlo. Aby PWA fungovala tak, ako by mala, musí mať nasledujúce atribúty:

1. Pracovník

Servisní pracovníci dodávajú obsah pohotovo v PWA. Zaisťujú, že vaša aplikácia dokáže načítať porovnateľné údaje uložené vo vyrovnávacej pamäti, ak nie je k dispozícii sieťové pripojenie. To je možné pomocou rozhrania Cache API, ktoré ukladá reakcie na vaše offline požiadavky. Pracovník teda narúša navigáciu a požiadavky používateľov.

Súvisiace: Ako funguje vyrovnávacia pamäť CPU?

Pomocou a sľub objekt, pracovník môže dodať už stiahnutý obsah v prípade prípadnej požiadavky používateľa (aj keď je offline). Servisný pracovník však udeľuje neblokujúcu vlastnosť PWA.

2. Bezpečný kontext

Servisný pracovník potrebuje na dôvernosť dodaného obsahu zabezpečené pripojenie (HTTPS). Keď odošlete požiadavku, pracovník nadviaže zabezpečenú komunikáciu medzi PWA a prehliadačom. Zabezpečený kontext preto zabraňuje narušeniu dôvernosti, ako je útok typu man-in-the-middle (MITM) v PWA.

3. Súbor manifestu webovej aplikácie

Webový manifest je súbor JSON, ktorý definuje vlastnosti PWA. Podrobne popisuje predpoklady na prístup k obsahu PWA, jeho objavovanie a používanie. Obvykle obsahuje názov vašej aplikácie, jej adresu URL a súčasti. Nakoniec súbor manifestu obsahuje informácie potrebné na premenu vašej webovej aplikácie na inštalovateľnú aplikáciu.

Aké sú podobnosti medzi PWA a SPA?

Aj keď je logika pozadia PWA a SPA odlišná, stále zdieľajú iba niekoľko spoločných vecí. Aj keď sa ich rýchlosť doručenia môže výrazne líšiť, konvenčné webové stránky v rýchlosti a prístupnosti stále zaostávajú.

Cieľom oboch je zlepšiť používateľský zážitok tým, že poskytne responzívne rozhranie.

Pretože obaja prinášajú zážitok z aplikácie, je ľahké ich zamiešať a pri interakcii s nimi len ťažko rozoznáte, ktorá je ktorá. Nakoniec, v tejto poznámke, obaja potrebujú URL, aby ste k nim mali prístup.

Kľúčové rozdiely medzi SPA a PWA

PWA a SPA môžu mať spoločné niektoré viditeľné vlastnosti, ale sú to dve rôzne veci. Tu sú rozdiely medzi kľúčovými funkciami, ktoré by ste si mali uvedomiť:

Kľúčové vlastnosti jednostránkových aplikácií

  • Sú prístupné iba prostredníctvom prehliadača.
  • Aj keď sa to neodporúča, môžete im slúžiť prostredníctvom nezabezpečenej siete (HTTP).
  • Nevyžadujú servisných pracovníkov.
  • SPA nemajú súbor manifestu JSON, čo znamená, že ich nemožno odinštalovať.
  • Musia byť jednostranové.
  • Nie je dostupné, keď nie je žiadna sieť.

Kľúčové vlastnosti progresívnych webových aplikácií

  • Prístup k nim prostredníctvom prehliadača je možnosťou, pretože sú inštalovateľné.
  • Všetky PWA potrebujú servisných pracovníkov a tí musia podávať požiadavky prostredníctvom zabezpečenej siete (HTTPS).
  • Odpovede sa ukladajú do vyrovnávacej pamäte a doručujú sa prostredníctvom a sľub predmet.
  • Sú prístupné aj bez pripojenia k sieti.
  • Sú rýchlejšie ako SPA.
  • Vždy majú súbor manifestu, takže sú stiahnuteľné, inštalovateľné a ľahko dostupné.
  • PWA nemusí byť jednostranová aplikácia.

SPA a PWA ovplyvňujú doručovanie webových stránok

Pretože mnoho podnikových webových stránok teraz prijíma tieto nové technológie, teraz dochádza k pozitívnemu posunu k poskytovaniu služieb.

Ešte dôležitejšie je, že prijatie PWA zlepšuje všeobecnú používateľskú skúsenosť, čo následne znižuje mieru okamžitých odchodov a zvyšuje príjmy pre väčšinu podnikových aplikácií. Kúpele SPA na druhej strane tiež oživili sociálne médiá a uľahčili ľuďom interakciu na webe bez pomalého načítania stránok.

upgrade ram v mac book pro
zdieľam zdieľam Tweet E -mail Synchrónne a asynchrónne programovanie: Ako sa líšia?

Mali by ste pre svoj ďalší projekt použiť synchrónne alebo asynchrónne programovanie? Zistite to tu.

Čítajte ďalej
Súvisiace témy
  • Programovanie
  • Programovanie
  • Vývoj aplikácií
O autorovi Idisou Omisola(94 publikovaných článkov)

Idowu je zanietený pre čokoľvek, čo sa týka inteligentných technológií a produktivity. Vo svojom voľnom čase sa hrá s kódovaním a keď sa nudí, prejde na šachovnicu, ale tiež sa rád z času na čas odtrhne od rutiny. Jeho vášeň ukazovať ľuďom cestu okolo moderných technológií ho motivuje písať viac.

Viac od Idowu Omisola

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber