Kas yra vieno puslapio programos ir progresyvios žiniatinklio programos?

Vieno puslapio programos (SPA) ir progresyvios žiniatinklio programos (PWA) daro revoliuciją internete. Abi yra naujos technologijos, kurios atrodo panašiai, bet nėra. Veide žmonės dažnai juos naudoja pakaitomis.

Pažvelkime į pagrindines kiekvieno iš jų ypatybes ir architektūrą, kad geriau jas suprastume.

Kas yra vieno puslapio programos?

SPA, kaip skamba, yra svetainės, kuriose dinamiškai įkeliamas turinys viename puslapyje. Iš esmės visos turinio formos ir elementai, su kuriais reikia bendrauti, tęsiasi viename puslapyje. Tai reiškia, kad naršant tokioje svetainėje nereikia įkelti atskirų dokumentų objektų modelių (DOM).

Tai reiškia, kad tikslas yra išlaikyti vartotojus tame pačiame puslapyje, įkeliant viską, ką reikia naudoti ir pamatyti iš karto. Tai reiškia geresnę vartotojo patirtį.

Kita vertus, vartotojo sąsaja priklauso nuo to, kaip kuriate ir sutvarkote SPA. Tai paaiškinama tuo, kodėl galbūt norėsite ištrauktą puslapį suskaidyti į naršymą. Ir 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, o ne lankotės skirtinguose DOM, kaip galbūt klaidingai manėte.

SPA suskaidymas į atskiras turinio dalis paprastai apima kiekvieno URL suteikimą naudojant „JavaScript“ rodinius. The duomenų nuoroda jungtis susieja tuos skyrius su pagrindiniu DOM ir leidžia juos pasiekti asinchroniškai.

Nors kitos technologijos patinka Kaip ir guoba-spa „JavaScript“ vis dar yra labiausiai paplitusi programavimo kalba kuriant SPA.

Susiję: „JavaScript“ rėmai, kuriuos verta išmokti

„JavaScript“ naudoja async/wait funkcija, leidžianti asinchroniškai įkelti tiek dinaminį, tiek statinį turinį be vieno įvesties, blokuojančios kitos užklausos išvestį. Taigi SPA veikia neužblokuojančioje įvesties ir išvesties (įvesties/išvesties) sistemoje.

Tačiau „JavaScript“ sistemos, tokios kaip „ReactJS“, „Vue.js“, „AngularJS“, „Ember.js“ ir „Backbone.js“, palaiko greitą SPA kūrimą. Norėdami pradėti, galite peržiūrėti šią pradedantiesiems skirtą „Vue.js“ apžvalgą.

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

Kas yra progresyvios žiniatinklio programos?

PWA yra žiniatinklio programa arba programinė įranga, kurios funkcionalumas naudoja standartines ir naujas žiniatinklio naršyklės gaires. PWA, skirtingai nei SPA, savo architektūrą grindžia tam tikromis gairėmis, kurios daro jas keičiamo dydžio, pritaikomas vartotojui, itin greitas, įdiegtas ir panašus į vietines.

2015 m. „Google“ pristatytas PWA tikslas yra sukurti programas, kurios tiesiogiai ir palaipsniui kalbėtų su savo vartotojais. Ja siekiama, kad vartotojai galėtų naudotis programa, net jei yra prastas arba visai neegzistuojantis tinklo ryšys.

Visada PWA suteikia viską, ko reikia akimirksniu. Ji neatitinka tipiškos pradinės turinio įkėlimo charakteristikos, taikomos SPA.

Todėl vartotojas sąveikauja su programa taip, lyg ji būtų gimtoji. Nors pagrindinė PWA charakteristika yra įdiegimas, vis tiek galite prieiti prie jų per savo interneto naršyklę be jokio diegimo. Tai reiškia, kad, kaip ir bet kuri kita svetainė, PWA taip pat turi turėti URL.

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

Progresyvios žiniatinklio programos yra unikalios tuo, kad jose yra pagalbinių pagalbininkų, kurie pateikia turinį akies mirksniu. Taigi, net prieš pradėdami naudotis žiniatinklio programa, turinį ir komponentus galite lengvai naudoti. Dėl to jie yra itin greiti ir patikimesni.

Tokios programos kaip „Spotify“, „Slack“ ir „Uber“, be kita ko, yra PWA pavyzdžiai.

PWA paprastai turi bendrą architektūros 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 susietus talpykloje saugomus duomenis, kai nėra tinklo ryšio. Tai įmanoma naudojant „Cache“ API, kuri saugo atsakymus į jūsų užklausas neprisijungus. Taigi darbuotojas trukdo naršyti ir vartotojo užklausoms.

Susijęs: Kaip veikia procesoriaus talpykla?

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

2. Saugus kontekstas

Paslaugos 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., „Viduryje vykstančiai atakai“ (MITM) PWA.

3. Žiniatinklio programos manifesto failas

Žiniatinklio manifestas yra JSON failas, apibrėžiantis PWA savybes. Jame išsamiai aprašytos prieigos prie PWA turinio, jo atradimo ir naudojimo sąlygos. Paprastai jame nurodomas programos pavadinimas, URL ir komponentai. Galiausiai manifesto faile yra informacijos, kurios reikia norint paversti žiniatinklio programą įdiegta programa.

Kokie yra PWA ir SPA panašumai?

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

Abu jie siekia pagerinti vartotojo patirtį, sukurdami reaguojančią sąsają.

Kadangi jie abu suteikia galimybę naudotis programa, juos nesunku sumaišyti ir sąveikaudami su jais vargu ar galite pasakyti, kuris yra kuris. Galiausiai, šioje pastaboje abiems reikia URL, kad galėtumėte juos pasiekti.

Pagrindiniai SPA ir PWA skirtumai

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

Pagrindinės vieno puslapio programų savybės

Jie pasiekiami tik per naršyklę.
Nors ir nerekomenduojama, galite juos pateikti per nesaugų tinklą (HTTP).
Jiems nereikia aptarnaujančių darbuotojų.
SPA neturi JSON manifesto failo, o tai reiškia, kad jų negalima pašalinti.
Jie turi būti vieno puslapio.
Nepasiekiamas, 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 reikia aptarnavimo darbuotojų ir jie turi pateikti užklausas per saugų tinklą (HTTPS).
Atsakymai saugomi talpykloje ir pateikiami per pažadas objektas.
Jie pasiekiami net ir nesant tinklo ryšio.
Jie greitesni už SPA.
Jie visada turi manifesto failą, todėl juos galima atsisiųsti, įdiegti ir lengvai pasiekti.
PWA gali būti ne vieno puslapio programa.

SPA ir PWA daro įtaką svetainės pristatymui

Kadangi daugelis įmonių svetainių dabar priima šias naujas technologijas, dabar yra teigiamas poslinkis jų paslaugų teikimo link.

Dar svarbiau, kad PWA priėmimas pagerina bendrą vartotojo patirtį, todėl sumažėja atmetimo rodikliai ir padidėja daugumos įmonių programų pajamos. Kita vertus, SPA taip pat atnaujino socialinę žiniasklaidą, todėl žmonės gali lengvai bendrauti internete be lėto puslapių įkėlimo.

kaip siųsti didelius failus per el. pašto priedą

Dalintis Dalintis „Tweet“ Paštu Sinchroninis ir asinchroninis programavimas: kuo jie skiriasi?

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

Skaityti toliau Susijusios temos

Programavimas
Programavimas
Programų kūrimas

Apie autorių Idisou Omisola(Paskelbti 94 straipsniai)

Idowu aistringai domisi visomis išmaniosiomis technologijomis ir produktyvumu. Laisvalaikiu jis žaidžia koduodamasis ir nuobodžiai persijungia į šachmatų lentą, tačiau taip pat mėgsta retkarčiais atitrūkti nuo rutinos. Jo aistra parodyti žmonėms kelią aplink šiuolaikines technologijas skatina jį daugiau rašyti.

Daugiau iš Idowu Omisola

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia