Kirjailija: Zee Gimon
Olemme niin tottuneet olemaan verkossa ja matkapuhelin, jossa on kädet, että usein emme edes ajattele, millainen teknologia auttaa meitä ajaa tämän tai että app. Yleensä, se ei ole ongelma – emme ajattele sähköä, kun laitat valot., Kuitenkin, kun kohtaat päätös luoda sovellus yrityksesi, niin se on omiaan ymmärtää, mitä SPA (single page application) tarkoitetaan, ja miten se eroaa Multi-Sivun Sovelluksia (MPA).
tässä artikkelissa, me puhumme, mitä on Single Page Application (SPA), mitä etuja SPA tuoda käyttäjille ja yrityksille, miten se toimii SEO, mitkä ovat sen plussat ja miinukset, ja lopuksi, miten SPA toimii niin teknologioiden kuin Blazor, Angular, React.js ja Vue.js.,
======================
tässä kysymys:
- Yhden Sivun Sovellus, Määritelmä
- Yhden Sivun Sovellus Edut
- Yhden Sivun Sovellus Haitat
- Single Page Application Migration Kysymyksiä
- Hyödyt SPA Käyttäjille
- Hyödyt SPA-Yrityksille
- Yhden Sivun Sovelluksen Arkkitehtuuri
- SPA-ja Angular, React.js, Vue.js ja .,NET
======================
Mitä Yhden Sivun Sovellus Tarkoittaa ja Miksi Me Tarvitsemme Yhden Sivun Sovellus
single-page-sovellus on sovellus, joka ei tarvitse ladata sivu uudelleen sen käytön aikana ja toimii sisällä selaimen. Ajattele apps käytät päivittäin: Facebook, Google Maps, Gmail, Twitter, Google Drive, tai jopa GitHub. Kaikki nämä ovat esimerkkejä kylpylästä.
Yksi parhaista eduista on oikein määritetty SPA on user experience (UX), jossa käyttäjä sijaitsee luonnon app ilman tarvitse odottaa sivun uudelleenlataukset ja muita asioita., Pysyt samalla sivulla, joka toimii JavaScript-ohjelmointikielellä.
Ennen kuin menemme pidemmälle, on olemassa kolme lyhenteet näet tässä artikkelissa:
- SPA – single-page application (kuten olemme edellä mainittiin)
- MPA – multi-page application (perinteinen sovellus, joka lataa uusia sivuja, kun napsautat linkkiä)
- PWA – progressiivinen web-sovellus (web-sivuston että on rakennettu käyttäen JavaScript tai sen kehyksiin ja voi toimia kuin sovellus, eli, voit esimerkiksi lisätä sen matkapuhelimeesi kotisivu app)
Yhden Sivun Sovellus Etuja: Miksi Käyttää Yhden Sivun Sovellus?
yksisivuisten sovellusten suurin etu on sen nopeus. Useimmat resources SPA-tarpeet (HTML + CSS + skriptit) ladataan sovelluksen käynnistyessä, eikä niitä tarvitse ladata uudelleen käytön aikana. Ainoa asia, joka muuttuu On tiedot, jotka lähetetään ja palvelimelta. Tämän seurauksena sovellus reagoi hyvin käyttäjän kyselyihin eikä sen tarvitse odottaa asiakkaan ja palvelimen välistä viestintää koko ajan.,
Lukuisat tutkimukset Google ja keskeiset havainnot yritykset, kuten Amazonin ja Wal*Mart osoittavat, että jos sivun kestää yli 200 millisekuntia ladata, se on potentiaalia pilata yrityksesi tai, ainakin, maksaa paljon rahaa. Esimerkiksi, Amazon sanoo, että 1 sekunnin ylimääräinen viive sivun lataus maksaa heille 1% liikevaihdosta (joka, ottaen huomioon, Amazonin määrä myynti, on $1,6 miljardia euroa vuodessa.)
Vuodesta kehittäjän näkökulmasta, luoda tällainen sovellus on kevennetty ja optimoitu., Sinun ei tarvitse kirjoittaa koodia tehdä sivuja palvelimella. Et edes tarvitse palvelinta aloittaaksesi kehitystyön. Voit aloittaa tiedostosta. Lisäksi kehittäjä voi käyttää täysin uudelleen samaa backend-palvelinpuolen koodia ja tehokasta API: ta verkkosovellukseen ja natiivi-mobiilisovellukseen.
yhden sivun sovellukset ovat erinomaisia, kun sinulla on tiimi kehittäjiä yhdessä., Sen avulla backend kehittäjien keskittyä API, kun frontend kehittäjät voivat kiinnittää enemmän huomiota luomalla paras käyttäjäkokemus perustuu backend API ja täytäntöön kaunis käyttöliittymä.
yksisivuisen sovelluksen vianetsintä on myös helppoa Chrome-selaimella, sillä siinä on erikoistyökaluja Kulmapatarangiin ja Reactiin (kylpylöissä käytetyt teknologiat.) Konsolin avulla voit seurata verkkotoimintoja sekä tutkia erilaisia sivuelementtejä ja niihin liittyviä tietoja.,
Välimuistin prosessi on myös varsin tehokas – sovellus lähettää vain yhden pyynnön, tallentaa kaikki tiedot lähetetään, ja voi käyttää tätä tietoa. Tämä on erityisen tärkeää silloin, kun käyttäjä voi olla huonot yhteydet – s/hän voi silti käyttää app, koska se on synkronoitu palvelimen kanssa, kun yhteys paranee.
Olemme maininneet Progressiivinen Web-Sovellukset (PWA) edellä, ja Kylpylät voivat helposti muuntaa PWA. Tämä puolestaan antaa kehittäjille mahdollisuuden tarjota paikallista välimuistia ja tarjota offline-kokemusta asiakkaille ja käyttäjille.,
yhden sivun sovelluksen haitat: miksi ei yhden sivun sovellusta?
yksisivuisten sovellusten eduista huolimatta mikään ei ole koskaan täydellistä. Katsotaanpa aikoja, jolloin kylpylä ei voi olla ihanteellinen ratkaisu.
mitä tarkoitamme yhden sivun levityshaitoilla?
yksisivuiset Sovellukset kuormittivat selainta huomattavasti enemmän. Jos käyttäjillä on esimerkiksi pienitehoisia laitteita, heillä on huono sovelluskokemus nopeuden suhteen.
JavaScriptin kanssa syntyy lisäongelmia, koska on varmistettava, ettei muistivuotoja ole., Koska sovellus voi ajaa pitkään – tuntia kerrallaan (toisin kuin MPA, jossa elinikä sivu oli laskea minuuttia), sinun täytyy varmista, että SPA ei kuluta enemmän muistia kuin se tarvitsee. Muuten pikalataussivujen mielihyvä tuhoutuu käyttäjän laitteessa olevan muistin hitauden vuoksi.
Yksi haittapuoli JavaScript on, että käyttäjät yksinkertaisesti voi olla se käytössä laitteissaan, ja sitten sinun täytyy ajatella muita tapoja, miten he voivat käyttää tietoja sivuston tai sovelluksen ilman Javascriptiä.,
toinen kriittinen asia muistaa kylpylän käytöstä tai rakentamisesta on turvallisuus. Koska cross-site scripting (XSS) ja se, että uusia sivuja ei ole ladattu, hakkerit voivat päästä sivuston ja ruiskuttaa uusia skriptejä asiakkaan puolella.
siksi, jos suunnittelet yhden sivun sovelluksen rakentamista yrityksellesi, varmista, että ryhdyt tarvittaviin varotoimiin, jotta näin ei tapahdu.
toinen turvallisuuskysymys on arkaluontoisten tietojen yksityisyys. Alkuperäisen sivun kuormituksen ei pitäisi sisältää tietoja, joiden ei pitäisi olla kaikkien käyttäjien saatavilla., Koska koko SPA lataa heti käyttäjän laitteeseen, saatat vahingossa luovuttaa tietoja, joiden pitäisi olla kirjautumisen takana tai joita ei ole saatavilla lainkaan.
SEO Optimointi Yhden Sivun Sovelluksia
SEO optimointi on hankalaa, kun sinulla on yhden sivun sovellus, joka on, miksi päätimme omistaa erillinen osa sitä, SPA-Haittoja.
kylpylöiden käyttö on turvallisempaa, kun et luota hakukoneoptimointiin (SEO) yhtä paljon, esimerkiksi jos sovellukseen pääsee vain kirjautumalla.,
Jos sinulla on blogi, toisaalta, se on vaikeampaa, sillä hakukoneiden indeksoida SPA-sivuston vastakohtana perinteinen palvelin-sulatettu sivuja. Tämä johtuu siitä, että URL ei oikeastaan muutu, ja eri sivuilla ei yleensä ole URL-osoitteita.
näin Ollen, meidän neuvoja sinulle: jos et halua vaivata URL-asetukset, valitse kehys, joka tukee server-side rendering (SSR). Älä myöskään käytä iframe-ikkunoita, käytä staattisia URL-osoitteita ja optimoi sivusi skriptejä nopeuttaaksesi niitä., Lopuksi varmista, että sivuillasi on HTML5, jotta Google crawler voi käyttää niitä.
myös palvelinviesteihin kannattaa kiinnittää erityistä huomiota, erityisesti 200 ja 404 virheisiin.
Single Page Application Migration Kysymyksiä
Single-page-sovellusten ääntä kuin ne olisi lähetetty taivaasta yksinkertaistaa käyttäjien kokemuksia sivuston. Se on nopea ja kätevä; se on lähes täydellinen. Niinkö?,
Kun olet ajatellut siirtyminen yhden sivun sovelluksen MPA, sinun täytyy lopettaa ja harkita plussat ja miinukset (jotka olemme edellä mainittiin.)
milloin kylpylää saa käyttää
saatat kysyä: ”milloin pitäisi käyttää yhden sivun sovellusta?”Kun sinulla on yritys tai henkilökohtainen verkkosivuilla, joka tarvitsee dynaaminen alusta ja pieni tietomäärä, yhden sivun sovellus on hyvä idea. Se on myös hyvä vaihtoehto, jos aiot kehittää mobile app tulevaisuudessa, koska, kuten edellä mainittiin, backend API voidaan käyttää sekä web-ja mobiili apps.,
suurin haittapuoli on, SEO, mutta arkkitehtuuri sopii Software-as-a-Service (SaaS) – ympäristöissä, suljetut yhteisöt ja sosiaaliset verkostot (joka on, miksi Facebook käyttää sitä). Syy tähän on se, että nämä sivustot eivät tarvitse optimointia hakua Google.
Kun Käyttää MPA
Suurten yritysten kanssa laajan valikoiman palveluja ja tuotteita, hyötyisivät enemmän perinteisen multi-page-sovellus. Tällaisia yrityksiä ovat esimerkiksi verkkokaupat, yrityskohteet, luettelot ja markkinapaikat., Tällaisen sovelluksen hallinnointi olisi myös paljon helpompaa, koska se on mahdollista liittää useisiin käyttäjätietokantoihin.
Lopulta, nämä tyypit yritysten on hakukoneen optimointi vaihtoehtoja, koska paljon niitä haluaisi löydy Google, Bing ja muut hakukoneet (myydä tuotteita tai palveluja he tarjoavat.)
Edut SPA Käyttäjille
tärkein etu yhden sivun sovelluksia loppukäyttäjille on, tietenkin, nopeus, jolla sovellus kuormia sekä kyky työskennellä offline-tilassa.,
SPA tarjoaa lineaarisen käyttökokemuksen, mikä tarkoittaa sitä, että sivustolla on helppo navigoida ja ymmärtää, mistä tämä tai tuo asia löytyy. Esimerkiksi Saucony Spassa on selkeä alku, keskikohta ja loppu. Käyttämällä UI / UX-suunnittelua Saucony app-kehittäjät ovat käyttäneet parallax-vieritystä ja siirtymiä tehdäkseen asiakkaan matkasta miellyttävän.
yksisivuiset sovellukset ovat hyviä myös mobiililaitteissa, sillä suurimman osan ajasta käyttäjien tarvitsee vain vierittää (ajatella loputonta Facebook-seinää). Sinun ei tarvitse klikata mitään linkkejä, ja voit vain nauttia vieritys.,
Edut SPA-Yrityksille
Kun se tulee yritysten single-page-sovellusten kehittäminen vie yleensä vähemmän aikaa, koska samaa backend API voidaan käyttää sekä web-ja mobiili. Tämän seurauksena informaatiovirta on virtaviivainen, ja itsenäisen natiivin mobiilisovelluksen luominen on paljon helpompaa.
kun otetaan Huomioon etuja nopeuden optimointi SPA, yritykset voivat myös hyötyä, koska käyttäjät olisivat enemmän kiinnostuneita käyttäen sovellus, joka on nopea (ergo, ostaa jotain tai vain käyttää app useammin.,)
Single Page Application-Arkkitehtuurin ja Miten Yhden Sivun Sovellus Toimi
Miten single-page-sovellukset toimivat? Yhden sivun sovellusarkkitehtuuri on varsin suoraviivainen-se koostuu asiakaspuolen teknologioista (HUSPISSÄ luotamme Reactiin.JS, Angular ja Vue.js) ja palvelinpuolen teknologiat (joita varten Käytämme yleensä solmua.js)
kannalta, miten sivusto tekee kuin se esitetään käyttäjälle, on olemassa kolme vaihtoehtoa, joista valita.,
Client-side rendering (CSR)
- selain lähettää pyynnön HTML-tiedosto palvelimelta
- palvelin vastaa nopeasti yksinkertainen HTML-tiedosto, jossa tyylit ja skriptit liittyvät
- käyttäjä näkee tyhjän sivun tai jotkut loader kuva, kun js on suorittamista
- sovellus hakee tiedot, tuottaa näkemyksiä, ja ruiskuttaa DOM
- Sovellus on valmis käytettäväksi
Tämä voisi olla vaihtoehto, yksinkertainen sivustoja, mutta pitää muistaa, että mallinnus tietoja client-side vaatii paljon resursseja laitteesta ja saattaa ylikuormittaa selaimen., Tämän seurauksena tämä vaihtoehto saattaa olla kolmikosta hitain. Samaan aikaan, jos sinulla on korkea-sivustolla kaupataan, CSR olisi parempi, koska se esittää tiedot käyttäjälle ilman puhua server liikaa.
Myös, jos et tarvitse sosiaalisen jakamisen vaihtoehtoja, pitää mielessä, että kaikki sivut CSR yleensä on sama open graph (og:) arvoja, joten sinun täytyy käyttää joko SNT tai SSG.,ng (SSR)
- selain lähettää pyynnön HTML-tiedosto palvelimelta
- palvelin hakee kaikki tarvittavat tiedot, tekee hakemuksen, ja tuottaa sovellus on HTML-tiedosto lennossa
- käyttäjä näkee sisällön
- single-page application framework on, mitä pitää tapahtumia, luo virtuaalisen DOM, ja suorittaa muita toimintoja
- Sovellus on valmis käytettäväksi
Server-side rendering on vaihtoehto, me luottaa klo HUSPI, koska siinä yhdistyvät sekä nopeus että yhden sivun sovellus ja ei kuormita käyttäjän selaimessa, jolloin sovellus nopeasti.,
Staattinen Sivusto Generaattorit (SSG)
- selain lähettää pyynnön HTML-tiedosto palvelimelta
- palvelin vastaa nopeasti jo valmis HTML-tiedosto
- käyttäjä näkee sivulla
- sovellus hakee tiedot, tuottaa näkemyksiä, ja ruiskuttaa DOM
- Sovellus on valmis käytettäväksi
– Hyvä ja nopea vaihtoehto, mutta muista, että jos sinulla on dynaamista sisältöä sivustossasi, staattinen sivusto generaattorit ei olla parhaita ystäviä, koska ne ovat suuntautuneet enemmän staattisia sivuja (kuten voitte jo arvata mistä nimi.,)
miten tehdä yhden sivun sovellus käyttäen kulmaa, reagoida.js ja Vue.js
Kun olin kirjallisesti tämän artikkelin, olen kuullut meidän kehittäjät ymmärtää, mitä ovat maailman parhaita käytäntöjä, jotka koskevat yhden sivun sovellus luomiseen, joita käytetään täällä HUSPI.
HUSPI kehittäjät ovat yrittäneet ja testattu lukuisia viitekehyksiä ja erilaisia työn taustat, mutta heitä yhdistää sanomalla, että siellä on top-kolme puitteet frontend – Angular, React, ja Vue – ja siellä on yksi main (suosikki) backend – Solmu.js., Markkinoilla on kourallinen muita kehyksiä (kuten Ember tai Knockout), mutta emme käytä niitä yhtä paljon.
rakentaa yhden sivun sovellus, tarvitset AJAX ja HTML5 rakentaa reagoiva sivuja, kun Angular, React, ja Vue ovat vastuussa käsittelystä ”raskainta” client-puolella SPA.
Mitä valita – React, Angular, tai Vue?
Olemme kirjoittaneet useita artikkeleita aiheesta vertailu näistä kehyksiä., Kuitenkin, verrataan niitä uudelleen nähdä, onko niillä etuja kannalta yhden sivun sovellus luominen.
kulmikkaat ja Yksisivuiset Sovellukset
Kulmikas on Googlen jo vuonna 2010 esittelemä JavaScript-kehys. Niistä kolme vaihtoehtoa, vertailemme, Kulmikas on vanhin, ja se perustuu Kirjoituskoneella. Typescriptin ansiosta Angular on erinomainen vaihtoehto suurten kehittäjien ja yritysten, jotka jo käyttävät tätä teknologiaa muissa tuotteissaan.
se on kehysten kypsin, ja sillä on GitHubissa asiallinen määrä avustajia., Se voi olla vaikeampaa oppimiskäyrän kannalta, mutta samalla se kannattaa.
asiakkaiden Keskuudessa, jotka käyttävät Kulmikas niiden Yhden Sivun Sovellukset ovat Google (ja niiden tuotteita, kuten Gmail ja Google Drive) ja Wix, joten jos päätät luoda yhden sivun sovellus käyttää Kulmikas, voit olla suuri yritys.
# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB
Kulmikas yhteisö on aikeissa vapauttaa Kulmikas 9.0.0 – mitä odottaa uuden version Kulmikas?
React.js ja yhden sivun Sovellukset
reagoivat.js on JavaScript-kirjasto, jonka Facebook loi vuonna 2013., Instagram Facebook, Instagram ja WhatsApp käyttävät sitä laajasti koko tuotesarjansa ajan, mukaan lukien sellaiset tunnetut yhden sivun Sovellukset kuin Facebook itse. Facebook-palvelun lisäksi Uber käyttää myös React-palvelua.JS kirjasto tuotteilleen.
kolmesta kilpailijoita, Reagoida on kaikkein huomattava määrä tukijoita GitHub – yli tuhat joka auttaa pysymään ajan tasalla eri haasteita kehittäjät kohtaavat joka päivä.
– Meidän kehittäjät täällä HUSPI myös mieluummin Reagoida hankkeiden kehittää (ellei ole vaatimuksia toinen framework)., Se on sekä kevyt että riittävän kypsä testattavaksi ja kokeiltavaksi ja löydettäväksi kelvolliseksi.
Reagoivat on oikea valinta niille, jotka ovat juuri aloittanut kanssa JavaScript frontend puitteet sekä startup-ja kehittäjille, jotka haluavat olla joustava. React tarjoaa hyviä vaihtoehtoja erilaisten muiden teknologioiden ja puitteet, joka on erittäin hyödyllinen, kun olet työskennellyt hankkeen suuri ekosysteemin.
# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB
Vue.js ja yhden sivun Sovellukset
Vue on nuorin kolmesta, luonut vuonna 2014 ex-Googlen työntekijä Yuxi (Evan) You., Vaikka mikään suuri yhtiö ei tue sen kehitystä, Vue on onnistunut kasvattamaan suosiotaan. Tällä hetkellä esimerkiksi GitLab, Baidu ja Alibaba käyttävät Vueta.js heidän tarpeisiinsa.
Jos haluat yksinkertaisuuden ja joustavuuden etupään kehyksissäsi, niin Vue on hyvä vaihtoehto. Sitä paitsi se on kaikkein kevyin.
# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB
äskettäin kirjoitimme artikkelin Reactista.js vs. Vue.js
Yhden Sivun Sovellukset ja ASP.NET (Blazor)
Olemme päättäneet lisätä ASP.NET vaihtoehto luettelosta kehyksiä ja teknologioita, yhden sivun sovelluksissa., Korttelissa on uusi poika nimeltä Blazor. Se on .NET framework, joka käyttää C#/Razor ja HTML, joka toimii selaimen kanssa WebAssembly, mukaan GitHub arkistoon.
Microsoft ilmoitti julkaisevansa tämän kehyksen aiemmin vuonna 2019 ja tällä hetkellä se näyttää siltä, että versio 1.0 on valmis. Tämä vakava tuella on suuri yhtiö, on suuri etu Blazor, koska se tekee välittömästi tämän avoimen lähdekoodin väline, osa 60,000+ OSS rahoittajien yhteisön kanssa 3,700+ OSS yritys avustajat.,
Blazor on kätevä työkalu, koska ei ole tarvetta Kirjoituskoneella tai JavaScript, voit kirjoittaa kaikki logiikka C#. Se sanoi, Blazor tarjoaa yhteentoimivuuden JavaScript Api ja kirjastot, joten jos ekosysteemi on suuri ja koostuu JS kirjastot, et ole menettänyt siirryttäessä.
.NET Blazor tarjoaa myös kaksi eri vaihtoehtoa – client-vain Blazor ja server-side Blazor. Jälkimmäinen pitäisi lähettää. Net Core 3.0.
tarkoittaako se, että Blazor tappaa kulmikkaan, reagoivan tai Vuen? – Emme usko. Sitä on kuitenkin syytä pitää silmällä.
KYLPYLÄKÄYTÖSSÄ .,NET, Voit myös käyttää ASP.NET ydin ja ASP.NET MVC. Miten luoda yhden sivun sovellus ASP.NET MVC? Asetat sen taustalle palvelemaan HTML: ää etulinjassa.
# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+
Johtopäätös
Ottaen huomioon nousu mobiililaitteiden ja on-the-go elämäntapa, yhden sivun sovellukset ovat suuria. Onko yrityksesi menisi SPA-tai MPA – se on enemmän kysymys oman liiketoiminnan analyytikot ja vaatimukset.,
Klo HUSPI, meillä on liike analyytikot joukkue, joka voi auttaa ymmärtämään ja jossa määritellään tekniset tarpeet hankkeen (ja kehittäjille, jotka voivat rakentaa arkkitehtuurin ja projektin itse alusta asti).