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

Jednostránkové aplikácie (SPA) a progresívne webové aplikácie (PWA) spôsobujú revolúciu v oblasti webu. Sú to obe nové technológie, ktoré vyzerajú podobne, ale nie sú. Zoči-voči ich ľudia často používajú zameniteľné.

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ú jednostránkové aplikácie?

SPA, ako znejú, sú webové stránky, ktoré načítavajú obsah dynamicky na jednej stránke. V podstate každá forma obsahu a prvku, ktorú potrebujete na interakciu s úsekmi na jednej stránke. To znamená, že pri navigácii na takomto webe nemusíte načítať samostatné modely objektov dokumentov (DOM).

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

Užívateľské rozhranie na druhej strane závisí od toho, ako navrhujete a usporiadate svoje SPA. Toto sa týka toho, prečo možno budete chcieť rozbalenú stránku rozdeliť na navigácie. A to nezabráni tomu, aby to nebola jedna stránka, pretože obsah sa stále načítava iba raz.

Takže keď navigujete v SPA, prechádzate vopred načítaný obsah v jednom DOM a nenavštevujete rôzne DOMs, ako ste si mohli mylne myslieť.

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

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

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

JavaScript používa asynchronizovať / čakať funkcia, ktorá umožňuje asynchrónne načítať dynamický aj statický obsah bez toho, aby jeden vstup blokoval výstup inej požiadavky. SPA teda fungujú na neblokujúcom systéme vstup-výstup (I / O).

To znamená, že rámce JavaScriptu 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ť tým prehľad pre začiatočníkov vo Vue.js.

Pretože to 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ú progresívne webové aplikácie?

PWA je webová aplikácia alebo softvér, ktorý vo svojej funkčnosti využíva štandardné a nové pokyny pre webový prehliadač. PWA, na rozdiel od SPA, zakladajú svoju architektúru na nejakom súbore pokynov, vďaka ktorým sú škálovateľné, užívateľsky prispôsobiteľné, superrýchle, inštalovateľné a podobné natívnym.

Cieľom aplikácie PWA, ktorú v roku 2015 predstavila spoločnosť Google, je vytváranie aplikácií, ktoré komunikujú priamo a postupne s jej používateľmi. Jeho cieľom je udržať používateľov v toku aplikácií, aj keď je sieťové pripojenie slabé alebo vôbec neexistuje.

PWA nepretržite poskytuje všetko, čo potrebujete, okamžite. Neprejde typickou počiatočnou charakteristikou načítania obsahu SPA.

V dôsledku toho potom používateľ interaguje s aplikáciou, akoby bola pôvodná. Aj keď hlavnou charakteristikou PWA je inštalácia, stále k nim môžete pristupovať za behu prostredníctvom webového prehľadávač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ú progresívne webové aplikácie a ako si ich nainštalujete?

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

Medzi príklady PWA patria napríklad aplikácie ako Spotify, Slack a Uber.

PWA majú všeobecne spoločné architektonické pravidlo. Aby PWA fungovala tak, ako má, musí mať nasledujúce atribúty:

1. Pracovník

Servisní pracovníci dodávajú obsah ľahko v PWA. Zaisťujú, že vaša aplikácia dokáže načítať údaje z relatívnej medzipamäte, keď nie je k dispozícii sieťové pripojenie. To je možné pomocou rozhrania Cache API, ktoré ukladá odpovede na vaše offline požiadavky. Pracovník teda zasahuje do navigácií a požiadaviek používateľov.

Súvisiace: Ako funguje medzipamäť procesora?

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

2. Bezpečné súvislosti

Servisný pracovník potrebuje na zabezpečenie dôvernosti dodávaného obsahu zabezpečené pripojenie (HTTPS). Keď pošlete žiadosť, pracovník nadviaže bezpečnú komunikáciu medzi PWA a prehliadačom. Bezpečný 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 uvádza predpoklady pre prístup, objavenie a používanie obsahu PWA. Spravidla obsahuje názov vašej aplikácie, jej adresu URL a komponenty. Súbor manifestu nakoniec obsahuje informácie potrebné na to, aby sa z vašej webovej aplikácie stala inštalovateľná aplikácia.

Aké sú podobnosti medzi PWA a SPA?

Aj keď je logika pozadia PWA a SPA odlišná, spája ich stále len niekoľko spoločného. Aj keď sa ich rýchlosť doručovania môže výrazne líšiť, konvenčné webové stránky v rýchlosti a dostupnosti stále zaostávajú za nimi.

Obaja sa zameriavajú na zlepšenie používateľského zážitku poskytnutím responzívneho rozhrania.

Pretože obidve poskytujú zážitky z aplikácie, je ľahké ich zmiešať a pri interakcii s nimi ťažko zistíte, ktorá je ktorá. Nakoniec, v tejto poznámke, obaja potrebujú URL, aby ste k nim mali prístup.

Hlavné rozdiely medzi SPA a PWA

PWA a SPA môžu mať spoločné niektoré výrazné vlastnosti, ale sú to dve odlišné veci. Tu by ste si mali uvedomiť kľúčové rozdiely funkcií:

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

• Sú prístupné iba cez prehliadač.
• Aj keď sa to neodporúča, môžete ich poskytovať cez nezabezpečenú sieť (HTTP).
• Nevyžadujú pracovníkov v službách.
• SPA nemajú súbor manifestu JSON, čo znamená, že sú odinštalovateľné.
• Musia byť jednostránkové.
• Nie je prístupné, keď nie je k dispozícii sieť.

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

• Prístup k nim cez prehliadač je voľba, pretože sú inštalovateľné.
• Všetky PWA potrebujú servisných pracovníkov a tí musia zadávať požiadavky prostredníctvom zabezpečenej siete (HTTPS).
• Odpovede sa ukladajú do medzipamäte a doručujú sa prostredníctvom a sľub objekt.
• Sú prístupné aj pri absencii sieťového pripojenia.
• Sú rýchlejšie ako SPA.
• Vždy majú súbor manifestu, takže sú stiahnuteľné, inštalovateľné a ľahko prístupné.
• PWA nemusí byť jednostránková aplikácia.

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

Pretože mnoho podnikových webov teraz prijíma tieto nové technológie, došlo k pozitívnemu posunu smerom k poskytovaniu služieb.

Dôležitejšie je, že zavedenie PWA zlepšuje všeobecné užívateľské prostredie, čo následne znižuje mieru okamžitých odchodov a zvyšuje príjmy väčšiny podnikových aplikácií. Na druhej strane SPA tiež omladili sociálne médiá, čo uľahčuje ľuďom interakciu cez web bez pomalého načítania stránok.

Synchrónne vs. Asynchrónne programovanie: V čom sa líšia?

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

Prečítajte si Ďalej

O autorovi