Kas yra vieno puslapio programos ir progresyviosios žiniatinklio programos?

Vieno puslapio programos (SPA) ir „Progressive“ žiniatinklio programos (PWA) daro perversmą internete. Jie abu yra naujos technologijos, kurios atrodo panašiai, bet nėra. Akivaizdu, kad žmonės dažnai juos naudoja kaip vieną kitą.

Panagrinėkime kiekvieno iš jų pagrindines savybes ir architektūrą, kad geriau juos suprastume.

Kas yra vieno puslapio programos?

Kaip atrodo, SPA yra svetainės, kurios dinamiškai įkelia turinį viename puslapyje. Iš esmės kiekviena turinio ir elemento forma, su kuria jums reikia bendrauti, driekiasi viename puslapyje. Tai reiškia, kad naršant tokioje svetainėje nereikia įkelti atskirų dokumentų objektų modelių (DOM).

Tai reiškia, kad siekiama išlaikyti vartotojus tame pačiame puslapyje, vienu metu įkeliant viską, ko reikia naudoti ir matyti. Tai reiškia geresnę vartotojo patirtį.

Kita vertus, vartotojo sąsaja priklauso nuo to, kaip suprojektuosite ir sutvarkysite savo SPA. Tai paaiškina, kodėl galite suskaidyti ištemptą puslapį į naršymą. Tai netrukdo būti vienu puslapiu, nes turinys vis tiek įkeliamas tik vieną kartą.

Taigi, kai naršote SPA, naršote iš anksto įkeltą turinį viename DOM ir nesilankote skirtinguose DOM, kaip galbūt klaidingai manėte.

Padalinus SPA į atskiras turinio skiltis, kiekvienam iš jų nurodomas URL naudojant „JavaScript“ rodinius. duomenų nuoroda jungtis susieja tas sekcijas su pagrindiniu DOM ir leidžia jums jas pasiekti asinchroniškai.

Nors kitos technologijos kaip Mėta ir guoba-SPA „JavaScript“ vis dar yra labiausiai paplitusi programavimo kalba kuriant SPA.

Susijęs: Verta išmokti „JavaScript“ sistemas

„JavaScript“ naudoja nesinchronizuoti / laukti funkcija, leidžianti asinchroniškai įkrauti tiek dinaminį, tiek statinį turinį, nes viena įvestis neužblokuoja kitos užklausos išvesties. Taigi, SPA veikia pagal neužblokuojančią įvesties-išvesties (įvesties / išvesties) sistemą.

Tai reiškia, kad „JavaScript“ sistemos, tokios kaip „ReactJS“, „Vue.js“, „AngularJS“, „Ember.js“ ir „Backbone.js“, palaiko spartų SPA vystymąsi. Norėdami pradėti, galite tai išgyventi pradedančiųjų Vue.js apžvalga.

Kadangi tai suteikia greitį, dauguma įmonių programų priėmė idėją savo svetaines paversti vienu puslapiu. „Netflix“, „YouTube“, „PayPal“, „Facebook“, „Instagram“, „Twitter“ ir „Pinterest“ yra visi SPA pavyzdžiai.

Kas yra progresyvios žiniatinklio programos?

PWA yra žiniatinklio programa arba programinė įranga, kurios funkcionalumui naudojamos standartinės ir naujos žiniatinklio naršyklės gairės. Skirtingai nei SPA, PWA savo architektūrą grindžia tam tikru gairių rinkiniu, kuris padaro juos keičiamo dydžio, pritaikomus vartotojui, ypač greitą, įdiegiamą ir panašų į vietinius.

2015 m. „Google“ pristatytas PWA tikslas yra kurti programas, tiesiogiai ir palaipsniui kalbančias su jos vartotojais. Jo tikslas - išlaikyti naudotojų srautą su programa net ir tada, kai tinklo ryšys prastas arba jo nėra.

Neabejotinai PWA pateikia viską, ko jums reikia. Tai neatitinka įprasto pradinio SPA turinio įkėlimo būdo.

Taigi vartotojas sąveikauja su programa taip, lyg ji būtų gimtoji. Nors pagrindinė PWA charakteristika yra diegiamumas, vis tiek galite jas pasiekti naudodamiesi savo žiniatinklio naršykle be jokio diegimo. Be to, kaip ir bet kuri kita svetainė, PWA taip pat turi turėti URL.

Susijęs: Kas yra progresyvios žiniatinklio programos ir kaip ją įdiegti?

Progresyvios žiniatinklio programos yra unikalios tuo, kad jose yra fono pagalbininkų, teikiančių turinį per akį. Taigi, net prieš patekdami į žiniatinklio programą, turinį ir komponentus galite lengvai naudoti. Tai daro juos itin greitus ir patikimesnius.

PWA pavyzdžiai, be kitų, yra tokios programos kaip „Spotify“, „Slack“ ir „Uber“.

PWA paprastai turi bendrą architektūrinę taisyklę. Kad PWA veiktų taip, kaip turėtų, jis turi turėti šiuos atributus:

1. Darbininkas

Aptarnavimo darbuotojai lengvai pateikia turinį PWA. Jie užtikrina, kad jūsų programa gali įkelti reliatyvius talpyklos duomenis, kai nėra tinklo ryšio. Tai įmanoma naudojant „Cache“ API, kuri saugo atsakymus į jūsų užklausas neprisijungus. Taigi darbuotojas kišasi į naršymą ir vartotojo užklausas.

Susijęs: Kaip veikia procesoriaus talpykla?

Naudojant a pažadas objektas, darbuotojas gali pateikti jau atsisiųstą turinį, jei vartotojas to paprašys (net kai jis neprisijungęs). Tačiau paslaugų darbuotojas PWA suteikia neužblokuojantį turtą.

2. Saugus kontekstas

Aptarnavimo darbuotojui reikalingas saugus ryšys (HTTPS), kad būtų užtikrintas pristatomo turinio konfidencialumas. Kai siunčiate užklausą, darbuotojas užmezga saugų ryšį tarp PWA ir naršyklės. Todėl saugus kontekstas užkerta kelią konfidencialumo pažeidimams, pvz., „Žmogus viduryje“ atakai PWA.

3. Žiniatinklio programos manifesto failas

Žiniatinklio aprašas yra JSON failas, apibrėžiantis PWA charakteristikas. Jame išsamiai aprašomos būtinos sąlygos norint pasiekti, atrasti ir naudoti PWA turinį. Paprastai jame yra jūsų programos pavadinimas, URL ir komponentai. Galų gale, aprašo faile yra informacija, reikalinga norint jūsų žiniatinklio programą paversti įdiegiama programa.

Kuo panašūs PWA ir SPA?

Nors PWA ir SAT foninė logika skiriasi, jie vis tiek turi tik keletą bendrų dalykų. Nors jų pristatymo greitis gali smarkiai skirtis, įprastos svetainės vis tiek atsilieka nuo jų greičio ir prieinamumo.

Jų abiejų tikslas - pagerinti vartotojo patirtį teikiant interaktyvią sąsają.

Kadangi jie abu teikia programų patirtį, juos lengva sumaišyti, ir jūs vargu ar galite pasakyti, kuris iš jų yra, kai bendraujate su jais. Pagaliau šioje pastaboje abiem reikia URL, kad galėtumėte juos pasiekti.

Pagrindiniai SPA ir PWA skirtumai

PWA ir SPA gali turėti keletą pastebimų savybių, tačiau tai yra du skirtingi dalykai. Štai pagrindiniai funkcijų skirtumai, kuriuos turėtumėte atkreipti dėmesį:

Pagrindinės vieno puslapio programų savybės

• Jie pasiekiami tik per naršyklę.
• Nors nerekomenduojama, galite juos aptarnauti nesaugiame tinkle (HTTP).
• Jie nereikalauja aptarnaujančių darbuotojų.
• SPA neturi JSON aprašo failo, o tai reiškia, kad juos galima pašalinti.
• Jie turi būti vieno puslapio.
• Nepasiekiama, kai nėra tinklo.

Pagrindinės pažangių žiniatinklio programų savybės

• Prieiga prie jų per naršyklę yra galimybė, nes jas galima įdiegti.
• Visiems PWA reikalingi aptarnavimo darbuotojai ir jie turi pateikti užklausas per saugų tinklą (HTTPS).
• Atsakymai laikomi talpykloje ir pateikiami per pažadas objektas.
• Jie pasiekiami net ir neturint tinklo ryšio.
• Jie greitesni nei SPA.
• Jie visada turi manifesto failą, todėl juos galima atsisiųsti, įdiegti ir lengvai pasiekti.
• PWA negali būti vieno puslapio programa.

SPA ir PWA daro įtaką svetainių pristatymui

Daugelyje įmonių svetainių dabar diegiamos šios naujos technologijos, todėl dabar teigiamas poslinkis link jų teikiamų paslaugų.

Dar svarbiau tai, kad PWA priėmimas pagerina bendrą vartotojo patirtį, todėl sumažėja atmetimo rodikliai ir padidėja daugumos įmonės programų pajamos. Kita vertus, SPA taip pat atnaujino socialinę žiniasklaidą, todėl žmonėms buvo lengva bendrauti per internetą be vangaus puslapių įkėlimo.

Sinchroninis vs. Asinchroninis programavimas: kuo jie skiriasi?

Ar kitame projekte turėtumėte naudoti sinchroninį ar asinchroninį programavimą? Sužinokite čia.

Skaitykite toliau

Apie autorių