Mis on ühelehelised rakendused ja progressiivsed veebirakendused?

Mis on ühelehelised rakendused ja progressiivsed veebirakendused?

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





Süveneme igaühe põhijoontesse ja arhitektuuri, et neid paremini mõista.



Mis on ühelehelised rakendused?

SPA -d, nagu nad kõlavad, on veebisaidid, mis laadivad sisu dünaamiliselt ühele lehele. Põhimõtteliselt ulatub ühelt lehelt igasugune sisu ja element, millega peate suhtlema. See tähendab, et sellisel veebisaidil navigeerimisel ei pea te laadima eraldi dokumendiobjektimudeleid (DOM -e).





Sellegipoolest on eesmärk hoida kasutajad samal lehel, laadides kõik, mida neil on korraga vaja kasutada ja näha. See tähendab paremat kasutajakogemust.

Seevastu kasutajaliides sõltub sellest, kuidas oma SPA kujundate ja korraldate. See tuleneb sellest, miks võiksite venitatud lehe navigeerimiseks jagada. Ja see ei takista seda olemast üks leht, kuna sisu laaditakse ikkagi ainult üks kord.



Seega sirvides SPA -s navigeerides eelsalvestatud sisu ühes DOM -is ja mitte külastades erinevaid DOM -e, nagu võisite valesti arvata.

SPA eraldamine eraldi sisuosadeks hõlmab tavaliselt igaühele URL -i andmist JavaScripti vaadete abil. The andmelink pistik ühendab need sektsioonid peamise DOM -iga ja võimaldab neile asünkroonselt juurde pääseda.



Kuigi teised tehnoloogiad nagu Nagu ja jalakas-spa tulemas, on JavaScript endiselt SPA -de loomiseks kõige levinum programmeerimiskeel.

Seotud: JavaScripti raamistikud, mida tasub õppida



JavaScript kasutab async/ootama funktsioon, mis võimaldab laadida dünaamilist ja staatilist sisu asünkroonselt, ilma et üks sisend blokeeriks teise päringu väljundit. Seega töötavad SPA-d mitteblokeeriva sisendi-väljundi (I/O) süsteemis.

See tähendab, et JavaScripti raamistikud, nagu ReactJS, Vue.js, AngularJS, Ember.js ja Backbone.js, toetavad SPA -de kiiret arengut. Alustuseks võite tutvuda algajate ülevaatega Vue.js -st.

Kuna see annab kiiruse, on enamik ettevõtterakendusi omaks 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 tärkavaid veebibrauseri juhiseid. PWA-d, erinevalt SPA-dest, rajavad oma arhitektuuri teatud juhistele, mis muudavad need skaleeritavaks, kasutajaga kohandatavaks, ülikiireks, installitavaks ja natiivseks.

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

PWA pakub alati kõike, mida vajate. See ei läbi SPA -le tüüpilist esialgset sisu laadimist.

Järelikult suhtleb kasutaja rakendusega nii, nagu oleks see emakeel. Kuigi PWA -de põhiomadus on installitavus, pääsete neile siiski oma veebibrauseri kaudu lennult juurde ilma installimiseta. 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, mis edastavad sisu silmapilkselt. Seega on sisu ja komponendid kasutamiseks juba enne veebirakendusse jõudmist hõlpsasti saadaval. See muudab need ülikiireks ja usaldusväärsemaks.

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

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

1. Tööline

Teenindustöötajad edastavad sisu hõlpsalt PWA -des. Need tagavad, et teie rakendus saab laadida võrguühenduseta seotud vahemällu salvestatavaid andmeid. See on võimalik vahemälu API abil, mis salvestab teie võrguühenduseta päringutele vastused. Seega segab töötaja navigeerimist ja kasutajate taotlusi.

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

Kasutades a lubadus objekti, saab töötaja kasutaja võimaliku taotluse korral edastada juba allalaaditud sisu (isegi kui ta on võrguühenduseta). Teenindustöötaja annab aga PWAdele mitteblokeeriva atribuudi.

2. Turvaline kontekst

Teenindustöötaja vajab edastatud sisu konfidentsiaalsuse tagamiseks turvalist ühendust (HTTPS). Kui saadate päringu, loob töötaja turvalise side PWA ja brauseri vahel. Turvaline kontekst hoiab seega ära konfidentsiaalsusrikkumised nagu meestekeskne rünnak (MITM) PWA-des.

3. Veebirakenduste manifestifail

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

Millised on sarnasused PWA -de ja SPA -de vahel?

Kuigi PWA -de ja SPA -de taustaloogika on erinev, on neil siiski vaid mõned ühised asjad. Kuigi nende kohaletoimetamise kiirus võib oluliselt erineda, jäävad tavapärased veebisaidid kiiruse ja juurdepääsetavuse poolest neile siiski alla.

Mõlema eesmärk on kasutajakogemust parandada, pakkudes reageerivat liidest.

Kuna mõlemad pakuvad rakenduse kasutuskogemust, on neid lihtne segi ajada ja nendega suhtlemisel on vaevalt võimalik öelda, kumb on. Lõpetuseks, siinkohal, mõlemad vajavad URL -i, enne kui neile juurde pääsete.

SPA -de ja PWA -de peamised erinevused

PWA -del ja SPA -del võib olla ühiseid märgatavaid omadusi, kuid need on kaks erinevat asja. Siin on peamised funktsioonide erinevused, mida peaksite tähele panema:

Üheleheküljeliste rakenduste põhijooned

  • Neile pääseb juurde ainult brauseri kaudu.
  • Kuigi see pole soovitatav, saate neid esitada ebaturvalise võrgu (HTTP) kaudu.
  • Nad ei vaja teenindustöötajaid.
  • SPA -del pole JSON -manifestifaili, mis tähendab, et neid ei saa installida.
  • Need peavad olema ühelehelised.
  • Pole juurdepääsetav, kui võrku pole.

Progressiivsete veebirakenduste põhijooned

  • Neile juurdepääs brauseri kaudu on valik, 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 lubadus objekti.
  • Need on saadaval isegi võrguühenduse puudumisel.
  • Need on kiiremad kui SPA -d.
  • Neil on alati manifestifail, seega on need allalaaditavad, installitavad ja hõlpsasti juurdepääsetavad.
  • PWA ei pruugi olla üheleheline rakendus.

SPA -d ja PWA -d mõjutavad veebisaidi kohaletoimetamist

Kuna paljud ettevõtte veebisaidid võtavad nüüd need uued tehnoloogiad kasutusele, on nüüd nende teenuste osutamisel positiivne nihe.

Veelgi olulisem on see, et PWA -de kasutuselevõtt parandab üldist kasutajakogemust, mis vähendab järelikult põrkemäära ja suurendab enamiku ettevõtte rakenduste tulusid. SPA -d seevastu on uuendanud ka sotsiaalmeediat, muutes inimeste hõlpsaks suhtlemise veebis ilma aeglase lehelaadimiseta.

parim kood vaarika pi 3 jaoks
Jaga Jaga Piiksuma E -post Sünkroonne vs asünkroonne programmeerimine: kuidas need erinevad?

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

Loe edasi Seotud teemad
  • Programmeerimine
  • Programmeerimine
  • Rakenduste arendamine
Autori kohta Idisou Omisola(Avaldatud 94 artiklit)

Idowu on kirglik kõige nutika tehnoloogia ja tootlikkuse vastu. Vabal ajal mängib ta kodeerimisega ja lülitab malelauale, kui tal on igav, kuid talle meeldib ka aeg -ajalt rutiinist lahti saada. Tema kirg näidata inimestele teed kaasaegses tehnoloogias motiveerib teda rohkem kirjutama.

Veel Idowu Omisolast

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin