Articles

kulmikkaat yhden sivun Sovellukset (SPA): mitkä ovat hyödyt?

lokakuu 13, 2020 by admin

tässä viestissä aiomme kattaa KYLPYLÄARKKITEHTUURIN käyttöönoton tärkeimmät hyödyt rakentaessamme kulmikkaita sovelluksiamme ja vastata joihinkin hyvin yleisiin kylpylöitä koskeviin kysymyksiin yleensä.

Tämä viesti on osa jatkuvaa Kulmikas Aloittelijoille sarja, tässä on täydellinen sarja:

Kulmikas Aloittelijoille Opas – aloittaminen (Setup Ympäristö)
Kulmikas Aloittelijoille Opas: Miksi Kulmikas?, Top Edut
Kulmikas Aloittelijoille Opas – Osia vs Direktiivien
Miksi Single Page Application, Mitä Hyötyä? Mikä on kylpylä?

miksi KYLPYLÄARKKITEHTUURI?

aloitetaan ensimmäisestä kysymyksestä: miksi yhden sivun Sovellukset (SPAs)? Tämäntyyppisiä sovelluksia on ollut olemassa jo vuosia, mutta ne eivät ole vielä yleistyneet julkisen Internet.

ja miksi?

siihen on sekä hyvä syy että vielä parempi syy siihen, miksi se voisi lähitulevaisuudessa muuttua.,

Kylpylät ei saada hyväksytty paljon muutaman viime vuoden aikana rakentaa oma kojelautaan osa SaaS (Software as a Service) alustat tai Internet-palveluja yleensä, sekä rakennus enterprise data-driven ja muoto-intensiivinen sovelluksia.

mutta pakottaako Angular sitten rakentamaan sovelluksemme Kylpylöinä?

vastaus on ei, se ei, mutta se on mielenkiintoinen mahdollisuus, että se tuo, koska monia etuja rakennuksen sovellus, joka tavalla. Mistä pääsemmekin avainkysymykseen:

miksi haluaisit rakentaa sovelluksen KYLPYLÄKSI?,

tätä pidetään usein itsestäänselvyytenä. Kaikki rakentavat sovelluksia näin, mutta mikä siinä on iso etu? Täytyy olla ainakin pari tappajan piirrettä.

aloitetaan ominaisuus, jota ei mainita kovin usein: Tuotannon Käyttöönottoa.

Ymmärtäminen edut SPA käyttää tuotannossa on oikeastaan myös vastata tärkein kysymys:

Mikä on Yhden Sivun Sovellus?

joskus nimet ohjelmistokehityksessä eivät ole hyvin valittuja, ja se voi aiheuttaa paljon sekaannusta., Se ei todellakaan ole termi SPA: yhden sivun sovellus kirjaimellisesti on vain yksi sivu !! 😊

Jos haluat nähdä Yhden Sivun Sovelluksen toimintaa, kehotan teitä pään yli AngularUniv https://angular-university.io ja käynnistä klikkaamalla kotisivun luettelo uusin kursseja, ja ylävalikosta.

Jos aloitat navigoinnin ympärille, huomaat, että sivu ei ole täysin reload – vain uudet tiedot lähetetään yli lanka kuin käyttäjä navigoi sovelluksen kautta – se on esimerkki yhden sivun sovellus.,

annan sinulle selityksen siitä, mitä on se etu, että rakennus sovellus ja miten se toimii.

Chrome Dev-työkaluilla tarkistetaan indeksi.html on AngularUniv sivusto, joka saa ladata etusivulle (tai muu sivu, Jos navigoit ja osut refresh).

– sivulla, että saa ladata, on ensimmäinen pyyntö, että näet Chrome-Verkosto-välilehti paneeli – se on kirjaimellisesti Yhden Sivun Sovellus.

Let ’ s notice one thing-this page is almost empty! Tägiä lukuun ottamatta täällä ei ole paljon meneillään.,

Huomautus: todellinen verkkosivuilla sivun ladata myös HTML-se oli pre-sulatettu palvelimelle käyttäen Kulmikas Universal

– Huomaa nimet CSS-ja Javascript-nippujen: Kaikki CSS ja jopa kaikki Javascript-sovelluksen (joka sisältää Kulmikas) ei ole edes tulossa samalta palvelimelta kuin index.html – tämä on lähtöisin täysin eri staattinen palvelin:

tässä tapauksessa, kaksi nippua ovat todella peräisin Amazon S3 ämpäri!,

Myös, huomaa, että nimi niput on versioitu: se sisältää aikaleiman, jonka käyttöönotto rakentaa teloitettiin, että käyttöön tämä erityisesti versio sovelluksesta.

Tuotannon Käyttöönoton Edut Yhden Sivun Sovelluksia

skenaario olemme nähneet edellä on itse asiassa aika mukava etu, yhden sivun sovellukset:

Yhden Sivun Sovellukset ovat super helppo ottaa käyttöön Tuotannossa, ja jopa versio ajan!,

yhden sivun sovellus on super-helppo ottaa käyttöön, jos verrataan perinteistä palvelinpuolen sulatettu sovellukset: se on oikeastaan vain yksi index.html tiedosto, jossa on nippu CSS ja Javascript-nippu.

Nämä 3 staattisia tiedostoja voidaan ladata minkä tahansa staattisen sisällön palvelimen, kuten Apache, Nginx, Amazon S3 tai Firebase Hosting.

tietenkin sovellus täytyy soittaa backend saada sen tiedot, mutta se on erillinen palvelin, joka voidaan rakentaa, jos tarvitaan kokonaan eri tekniikkaa: kuten Solmu, Java tai PHP.,

Itse asiassa, jos haluamme rakentaa REST API tai toisen tyyppinen backend Solmussa, voimme jopa rakentaa se Kirjoituskoneella, ja niin voi käyttää samaa kieltä sekä palvelimen ja asiakkaan, ja jopa jakaa joitakin koodin välillä.

Yhden Sivun Sovellus Versiointi Tuotannossa

Toinen etu jalkauttaa käyttöliittymää kuin yhden sivun sovellus on versiointi ja palautus. Kaikki mitä meidän tarvitsee tehdä on versio meidän rakentaa tuotos (joka tuottaa CSS ja JS niput korostettu keltainen edellä).,

voimme määrittää SPA: ta palvelevan palvelimen parametrilla, joka määrittää, minkä version frontend-sovelluksesta rakennetaan: se on niin yksinkertaista!

Tämän tyyppinen asennus asteikot hyvin: staattinen sisältö palvelimet, kuten Nginx voi mittakaavassa erittäin suuri määrä käyttäjiä.

tietenkin, tämän tyyppinen asennus ja versiointi on voimassa vain frontend osa meidän sovelluksen, tämä ei koske backend-palvelin. Mutta silti se on tärkeä etu.

mutta onko tuotannon käyttöönotto ainoa yksittäisen sivun sovellusten etu?, Ei varmasti, täällä on toinen tärkeä etu:

Yhden Sivun Sovellukset Ja Käyttäjän Kokemus

Jos sinulla on koskaan käytetyt web-sovellus, joka on jatkuvasti uudelleenlastaus kaikki palvelimelta lähes jokaisen käyttäjän vuorovaikutusta, sinun tulee tiedämme, että tämän tyyppinen sovellus antaa huonon käyttökokemuksen takia:

jatkuva koko sivu lataa
myös koska verkko edestakaisin matkoja palvelin noutaa kaikki, että HTML.,

yhden sivun sovellus, olemme ratkaisseet tämän ongelman käyttämällä täysin eri arkkitehtoninen lähestymistapa:

SPA, alkuvaiheen jälkeen sivu kuormitus, ei enää HTML lähetetään verkon yli. Sen sijaan vain tietoja pyydetään palvelimelta (tai lähetetään palvelimelle).

joten kun SPA on käynnissä, vain tiedot lähetetään langan yli, mikä vie paljon vähemmän aikaa ja kaistanleveyttä kuin jatkuvasti HTML: n lähettäminen. Katsotaanpa, millainen hyötykuorma menee johdon yli tyypillisesti kylpylässä.,

esimerkiksi AngularUniv Spassa, jos klikkaat kurssia, ei HTML: ää lähetetä langan päälle. Sen sijaan, saamme Ajax-pyynnön, joka vastaanottaa JSON-kaikki kurssin tiedot:

Kuten näemme, HTML-versio olisi tietenkin paljon suurempi kooltaan verrattuna tavallinen JSON-objekti, koska kaikki avaaminen ja sulkeminen luokka, mutta myös siellä on paljon kaksoiskappaleita HTML, jos me jatkuvasti lastaus-samankaltaisia sivuja uudestaan ja uudestaan.

esimerkiksi sivun otsikoita ja alatunnisteita lähetetään jatkuvasti selaimeen, mutta ne eivät ole oikeastaan muuttuneet.,

Joten tässä, meillä on täällä toinen suuri etu yhden sivun hakemuksen: – paljon-parempi käyttäjän kokemus, koska vähemmän koko sivu lataa ja paremmin yleistä suorituskykyä, koska vähemmän kaistanleveyttä tarvitaan.

so Why Don ’ t We Use SPAs Everywhere Then?

Jos kylpylöissä on niin paljon etuja, miksi niitä ei ole otettu laajemmin käyttöön julkisessa internetissä? Siihen on hyvä syy.

vielä suhteellisen hiljattain Googlen kaltaisten hakukoneiden oli vaikea indeksoida oikein yhden sivun sovellusta. Entä nykyään?,

aiemmin oli joitakin suosituksia käyttää erityistä Ajax-Indeksointijärjestelmää, joka on samaan aikaan ollut epätarkka. Joten onko Google nyt täysin renderöidä Ajax?

virallisessa ilmoituksessa meillä on tieto siitä, että Google-haku pystyy nyt yleisesti ryömimään Ajaxia, mutta joidenkin raporttien mukaan se ei ole vielä täysin kykenevä siihen.

ja suosituksena on sen sijaan käyttää progressiivista tehostamista. Mitä se siis tarkoittaa, onko tässä vaiheessa mahdollista käyttää kylpylöitä julkisessa internetissä vai ei vielä?

hakukoneystävälliset kylpylät?,

on mahdollista saada suorituskykyä ja käyttäjäkokemusta SPA-yhdessä hyvä SEO-ominaisuudet: käyttö Kulmikas Universal pre-renderöinti moottori antaa meille mahdollisuuden:

pre-render sovellus, backend
laiva HTML-selain yhdessä Kulmikas
ja on Kulmikas, bootstrap asiakkaan puolella ja ottaa sivu SPA

Ei Kylpylät yleistyvät Tulevaisuudessa?,

Kuvittele, SEO friendly version Amazon, joka ei päivitä itse kunkin sivun reload ja paljon-parempi suorituskyky ja käyttökokemus: että olisi todennäköisesti valtava positiivinen vaikutus kun asiakkaat viettävät sivustolla!

Niin teknisiä etuja SEO-friendly Kylpylät ovat merkittäviä ja vielä enemmän mobiili, ja odotamme, että nämä tyyppi SEO friendly SPA-sovelluksia olisi yleistyvät tulevaisuudessa myös julkisten internet.

mutta tämä jättää tämän jakson viimeisen kysymyksen vielä vastaamatta., Sinun täytyy ajatella tässä vaiheessa luettuasi viimeiset kohdat:

Jos palvelimelta ladataan vain minimaalinen HTML käynnistysvaiheessa, niin miten sivu muuttuu jatkuvasti ajan myötä?

mikä johtaa tämän osion viimeiseen kysymykseen ja ehkä kaikkein tärkeimpään:

miten yksisivuinen sovellus edes toimii?

todellakin, miten ne voivat toimia, koska latasimme palvelimelta vain hyvin vähän HTML: ää? Kun sovellus on käynnistetty, vain tiedot menevät johdon yli. Joten miten Uusi HTML tulee?,

Koska siellä on pakko olla uusi HTML syntyy jonnekin, koska se on ainoa tapa, että selain on muuttaa sitä, mitä se näyttää, eikö?

vastaus on yksinkertainen, ja se liittyy siten, että yhden sivun sovellukset todella toimivat verrattuna perinteiseen palvelin-pohjaisia sovelluksia.

perinteinen sovellus (joka sisältää valtaosa nykypäivän julkinen Internet), tiedot HTML muutosta (tai tekee) tehdään palvelimen puolella.,

toisaalta, Yhden sivun sovellukset tehdä se paljon eri tavalla:

KYLPYLÄSSÄ, kun sovelluksen käynnistyksen, tiedot HTML muutosprosessi on siirretty palvelimelta client – Kylpylät ovat vastaavan mallin moottori käynnissä selaimessasi!

Ja niin tämän tiedon kädessä, katsotaanpa pukeutua tämä osio yhteenveto avainkohdat noin yhden sivun sovelluksissa.,– Edut Kylpylät ja Keskeinen Käsite Siitä, Miten Ne Toimivat

Rakennus meidän sovellus KYLPYLÄ antaa meille huomattavan määrän etuja:

– Emme voi tuoda paljon-parempi kokemus käyttäjälle
sovellus tuntuu nopeammin, koska vähemmän kaistanleveyttä käytetään, ja ei koko sivu päivittyy tapahtuu, kun käyttäjä navigoi sovelluksen kautta
sovellus on paljon helpompi ottaa käyttöön tuotannossa, ainakin varmasti asiakas. osa: kaikki me tarvitsemme on staattinen palvelimen palvella vähintään 3 tiedostoja: meidän yhden sivun indeksi.,html, CSS-nippu ja Javascript-nippu.
voimme tarvittaessa myös jakaa niput useisiin osiin koodijakoa käyttäen.
frontend osa sovellus on hyvin yksinkertainen versio tuotannossa, mikä mahdollistaa yksinkertaistettu asennus ja rollbacks edellisen version käyttöliittymää, jos tarvitaan.

Ja tämä on vain yksi mahdollinen käyttöönotto skenaario Kylpylät tuotannossa.,

Muut Tuotannon Skenaariot

Muita skenaarioita ovat pre-renderöinti suuri osa sovelluksen ja ladata kaikki staattinen hosting-palvelin, in-muisti välimuisti palvelimella vain tiettyjä sivuja, tehdä versiointi käyttää DNS, jne.

sen tänään yksinkertaisempaa kuin koskaan tehdä SEO-ystävällisiä kylpylöitä, joten ne ovat todennäköisesti lisänneet adoptiota tulevaisuudessa tilanteissa, joissa kylpylöitä ei ole usein käytetty.,

Tapa, Kylpylät Työ

siten, että yhden sivun sovelluksia tuoda nämä edut on yhdistetty siten, että ne toimivat sisäisesti:

Kun käynnistyksen, vain tiedot lähetetään yli lanka, kuten JSON tai jokin muu muoto. Mutta mitään HTML-tai CSS-koodia ei enää lähetetä johdon päälle sovelluksen ajamisen jälkeen.,

– tärkein asia ymmärtää, miten yhden sivun sovelluksia, toimi seuraavasti:

sen sijaan, muuntaa tiedot HTML-palvelimeen ja sitten lähettää sen yli lanka, SPA-olemme nyt siirtyneet, että muuntaminen prosessi palvelimelta asiakkaalle.

muuntaminen tapahtuu viime hetkellä asiakkaan puolelta, joka antaa meille mahdollisuuden antaa paljon paremman käyttökokemuksen käyttäjälle.

Toivottavasti tämä vakuuttaa kylpylöiden eduista., Jos ette, kertokaa minulle ja miksi näin ei ole, jotta voin paremmin kehittää joitakin kohtia.

myös, tässä vaiheessa haluan näyttää sinulle jotain koodia heti. Rakennetaan pieni Hello World-Kylpylä kulmikkaaksi ja otetaan se sieltä. Aiomme nähdä, miten käsitteitä, jotka olemme ottaneet käyttöön kartta pieni sovellus, että olemme aikeissa rakentaa.

toivon, että tämä viesti auttoi ymmärtämään kylpylöiden keskeiset hyödyt ja että pidit siitä!,