Mis on ühe lehe rakendused ja progressiivsed veebirakendused?

Ühelehelised rakendused (SPA-d) ja progressiivsed veebirakendused (PWA-d) muudavad veebi murranguliseks. Mõlemad on uudsed tehnoloogiad, mis näevad välja sarnased, kuid mitte. Inimesed kasutavad neid paljuski vahetatult.

Uurime igaühe põhijooni ja arhitektuuri, et neist paremini aru saada.

Mis on ühe lehe rakendused?

SPA-d, nagu nad kõlavad, on veebisaidid, mis laadivad sisu dünaamiliselt ühe lehe sisse. Sisuliselt laieneb ühel lehel iga sisu ja elemendi vorm, millega peate suhtlema. See tähendab, et sellisel veebisaidil navigeerimisel ei pea te eraldi dokumendi objektimudeleid (DOM) laadima.

See tähendab, et eesmärk on hoida kasutajaid samal lehel, laadides kõik, mida nad vajavad ja mida nad korraga näevad. See tähendab paremat kasutuskogemust.

Kasutajaliides seevastu sõltub sellest, kuidas te oma SPA kujundate ja korraldate. See taandub sellele, miks võiksite venitatud lehe navigeerimiseks jagada. Ja see ei takista seda olemast üks leht, kuna sisu laaditakse ikka ainult üks kord.

Seega, kui navigeerite SPA-s, sirvite eelnevalt laaditud sisu ühes DOM-is ja te ei külasta erinevaid DOM-e, nagu võite olla valesti uskunud.

SPA jagamine eraldi sisulõikudeks hõlmab tavaliselt igaühe URL-i andmist JavaScripti vaadete abil. The andmelink pistikühendab need jaotised peamise DOM-iga ja võimaldab teil asünkroonselt juurde pääseda.

Kuigi muud tehnoloogiad nagu Rahapaja ja jalakas-spa on tulemas, on JavaScript endiselt kõige levinum SPA-de loomise programmeerimiskeel.

Seotud: JavaScripti raamistikud, mida tasub õppida

JavaScript kasutab asünkroon / ootama funktsioon, mis võimaldab laadida nii dünaamilist kui ka staatilist sisu asünkroonselt, ilma et üks sisend blokeeriks teise päringu väljundit. Niisiis, SPA-d töötavad blokeerimata sisend-väljund (I / O) süsteemil.

See tähendab, et JavaScripti raamistikud, nagu ReactJS, Vue.js, AngularJS, Ember.js ja Backbone.js, toetavad kõik SPA-de kiiret arengut. Alustamiseks võite selle läbi teha algaja ülevaade Vue.js-ist.

Kuna see annab kiiruse, on enamik ettevõtte rakendusi võtnud idee muuta oma veebisaidid üheks leheks. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter ja Pinterest on kõik SPA-de näited.

Mis on progressiivsed veebirakendused?

PWA on veebirakendus või tarkvara, mis kasutab oma funktsionaalsuses standardseid ja uusi veebibrauseri juhiseid. Erinevalt SPA-dest rajavad PWA-d oma arhitektuuri mõnele juhistele, mis muudavad need skaleeritavaks, kasutajale kohanemisvõimeliseks, ülikiireks, installitavaks ja omasuguseks.

Google'i 2015. aastal kasutusele võetud PWA eesmärk on ehitada rakendusi, mis räägivad otse ja järk-järgult oma kasutajatega. Selle eesmärk on hoida kasutajaid rakendusega liikvel ka siis, kui võrguühendus on halb või puudub.

Eranditult pakub PWA kõik vajaliku ühe korraga. See ei läbi SPA-le iseloomulikku esialgset sisu laadimise omadust.

Järelikult suhtleb kasutaja seejärel rakendusega nii, nagu oleks see omakeelne. Ehkki PWA-de põhiomadus on installitavus, saate neile siiski veebibrauseri kaudu ilma installimata juurde pääseda. See tähendab, et nagu igal teisel veebisaidil, peab ka PWA-l olema URL.

Seotud: Mis on progressiivsed veebirakendused ja kuidas neid installida?

Progressiivsed veebirakendused on ainulaadsed selle poolest, et neil on taustaabilised, kes edastavad sisu ühe silmapilk. Nii et isegi enne veebirakendusse jõudmist on sisu ja komponendid teile kasutamiseks hõlpsasti kättesaadavad. See muudab need ülikiireks ja usaldusväärsemaks.

Muu hulgas on sellised rakendused nagu Spotify, Slack ja Uber PWA-de näited.

PWA-del on üldiselt ühine arhitektuurireegel. Selleks, et PWA toimiks nii, nagu peaks, peavad sellel olema järgmised atribuudid:

1. Töötaja

Teenindustöötajad edastavad sisu PWA-de abil hõlpsasti. Nad tagavad, et teie rakendus saab võrguühenduse puudumisel laadida võrreldavaid vahemällu salvestatud andmeid. See on võimalik vahemälu API abil, mis salvestab vastused teie võrguühenduseta päringutele. Seega sekkub töötaja navigeerimisse ja kasutaja päringutesse.

Seotud: Kuidas protsessori vahemälu töötab?

Kasutades a lubadus objekt, saab töötaja juba allalaaditud sisu edastada juhul, kui kasutaja seda taotleb (isegi kui ta pole võrgus). Teenindustöötaja annab PWA-dele aga mitteblokeeriva vara.

2. Turvaline kontekst

Teenindustöötaja vajab tarnitud sisu konfidentsiaalsuse tagamiseks turvalist ühendust (HTTPS). Päringu saatmisel loob töötaja turvalise ühenduse PWA ja brauseri vahel. Turvaline kontekst takistab seega konfidentsiaalsusrikkumisi, nagu PWA-de rünnak keskmises rünnakus (MITM).

3. Veebirakenduse manifestifail

Veebimanifest on JSON-fail, mis määratleb PWA omadused. See kirjeldab PWA sisule juurdepääsu, selle avastamise ja selle kasutamise eeltingimusi. Tavaliselt sisaldab see teie rakenduse nime, selle URL-i ja komponente. Lõppkokkuvõttes sisaldab manifestifail vajalikku teavet, et muuta teie veebirakendus installitavaks rakenduseks.

Millised on PWA-de ja SPA-de sarnasused?

Ehkki PWA-de ja SPA-de taustaloogika on erinev, jagavad need siiski vaid mõnda ühist asja. Kuigi nende kohaletoimetamise kiirus võib märkimisväärselt erineda, jäävad tavapärased veebisaidid kiiruse ja juurdepääsetavuse poolest siiski neile alla.

Nende mõlema eesmärk on parandada kasutajakogemust, pakkudes tundlikku liidest.

Kuna mõlemad pakuvad rakenduse kasutuskogemust, on neid lihtne kokku segada ja vaevalt saate nendega suhtlemisel öelda, kumb on. Lõpuks on selle märkuse puhul mõlemal vaja URL-i, enne kui neile juurde pääsete.

Peamised erinevused erikaitsealade ja erivajadustega piirkondade vahel

PWA-del ja SPA-del võivad olla ühised märgatavad omadused, kuid need on kaks erinevat asja. Siin on peamised funktsioonide erinevused, mida peaksite tähele panema:

Üheleheliste rakenduste põhijooned

• Neile pääseb juurde ainult brauseri kaudu.
• Ehkki seda ei soovitata, saate neid teenida ebaturvalises võrgus (HTTP).
• Nad ei vaja teenindustöötajaid.
• SPA-del pole JSON-i manifestifaili, mis tähendab, et neid saab desinstallida.
• Need peavad olema ühe lehega.
• Pole juurdepääsetav, kui võrku pole.

Progressiivsete veebirakenduste põhijooned

• Neile juurdepääs brauseri kaudu on võimalus, kuna need on installitavad.
• Kõik PWA-d vajavad hooldustöötajaid ja nad peavad taotlusi esitama turvalise võrgu (HTTPS) kaudu.
• Vastused salvestatakse vahemällu ja edastatakse a kaudu lubadus objekt.
• Neile pääseb ligi ka võrguühenduse puudumisel.
• Need on kiiremad kui erikaitsealad.
• Neil on alati manifestifail, nii et need on allalaaditavad, installitavad ja hõlpsasti juurdepääsetavad.
• PWA ei pruugi olla üheleheline rakendus.

SPA-d ja PWA-d mõjutavad veebisaitide edastamist

Kuna paljud ettevõtte veebisaidid kasutavad nüüd neid uusi tehnoloogiaid, on nüüd positiivne nihe nende teenuste osutamise suunas.

Veelgi olulisem on see, et PWA-de kasutuselevõtt parandab üldist kasutajakogemust, mis vähendab seetõttu enamiku ettevõtte rakenduste tagasipõrke määra ja suurendab tulu. SPA-d on seevastu ka sotsiaalmeediat noorendanud, muutes inimestel hõlpsalt veebi kaudu suhelda ilma loid lehekülgi laadimata.

Sünkroonne vs. Asünkroonne programmeerimine: kuidas need erinevad?

Kas peaksite järgmise projekti jaoks kasutama sünkroonset või asünkroonset programmeerimist? Siit saate teada.

Loe edasi

Autori kohta