Articles

Kantete Enkelt Side Programmer (SPA): Hva er Fordelene?

oktober 13, 2020 by admin

I dette innlegget, vi kommer til å dekke de viktigste fordelene ved å ta i bruk en SPA-Arkitektur mens bygningen vår Kantete Programmer og svare på noen veldig vanlige spørsmål om SPAs generelt.

Dette innlegget er en del av den løpende Kantete for Nybegynnere-serien, her er den komplette serien:

Kantete For Veiledning for Nybegynnere – Komme i Gang (Oppsett Miljø)
Kantete For Nybegynnere Guide: Hvorfor Kantete?, Toppen Fordeler
Kantete For Veiledning for Nybegynnere – Komponenter vs Direktiver
Hvorfor en Enkelt Side Søknaden, Hva er Fordelene? Hva er SPA?

Hvorfor SPA Arkitektur?

La oss begynne med det første spørsmålet: Hvorfor Enkelt Side Programmer (SPAs)? Denne typen av programmer som har eksistert i mange år, men de har ennå ikke blitt utbredt i det offentlige Internett.

Og hvorfor er det?

Det er en god grunn for det, og en enda bedre grunn på hvorfor det kan endre seg i nær fremtid.,

SPAs fikk vedtatt en mye over de siste årene for å bygge eget dashboard del av SaaS (Software as a Service) plattformer eller Internett-tjenester generelt, samt for å bygge enterprise data-drevet og form-intensive applikasjoner.

Men ikke Kantete deretter gjennomføre bygning våre programmer som SPAs?

svaret er nei, det gjør det ikke, men det er en interessant mulighet som den bringer, gitt de mange fordelene ved å bygge en applikasjon som på en måte. Hvilket bringer oss til et viktig spørsmål:

Hvorfor Ville Du Ønsker å Bygge et Program som SPA?,

Dette er noe som ofte tas for gitt. Alle er å bygge applikasjoner på denne måten, men hva er den store fordelen med det? Det må være minst et par killer-funksjoner, ikke sant?

La oss starte med en funksjon som ikke blir nevnt veldig ofte: Produksjon Distribusjon.

Forstå fordelene med SPA bruk i produksjon vil faktisk også svare på det viktigste spørsmålet:

Hva er en Enkelt Side Søknaden?

noen Ganger navn i programvareutvikling ikke er godt valgt, og som kan føre til mye forvirring., Det er absolutt ikke tilfelle med begrepet SPA: en enkelt side søknad bokstavelig talt har bare en side !! 😊

Hvis du ønsker å se en Eneste Side-Programmet i aksjon, jeg inviterer dere til å gå over til AngularUniv https://angular-university.io og start å klikke på hjemmesiden på listen over siste kurs, og på toppen av menyen.

Hvis du begynner å navigere rundt, vil du se at siden ikke fullt last inn på nytt – bare nye data blir sendt over wiren som brukeren navigerer gjennom programmet – det er et eksempel på en enkelt side-programmet.,

La meg gi deg en forklaring for hva er fordelen med å bygge et program som det og hvordan gjør at selv arbeidet.

ved Hjelp av Chrome-Dev Verktøy, la oss undersøke indeksen.html av AngularUniv nettsted som blir lastet ned på hjemmesiden (eller noen annen side, hvis du navigerer, og trykk refresh (oppdater).

Den siden som blir lastet ned er den aller første forespørsel som du vil se i Chrome-Nettverk-fanen panel – det er bokstavelig talt Én Side av vår Søknad.

La oss legge merke til én ting – denne siden er nesten tom! Med unntak for koden, det er ikke mye som skjer her.,

Merk: den faktiske nettstedet, siden har også lastet ned HTML-koden som ble pre-rendret på serveren ved hjelp av Kantete Universal

legg Merke til at navnene på CSS og Javascript bunter: Alle CSS og med alle Javascript-av programmet (som inkluderer Kantete) er ikke selv kommer fra samme server som index.html – dette kommer fra en helt annen statisk server:

I dette tilfellet, de to buntene er faktisk kommer fra en Amazon S3 bøtte!,

Også merke til at navnet på buntene er definert som: den inneholder et tidsstempel som distribusjon bygger ble henrettet som har distribuert denne spesielle versjonen av programmet.

Produksjon-Distribusjon Fordelene på Én Side Programmer

Det scenario som vi har sett ovenfor er faktisk en ganske kul nytte av én side programmer:

Enkelt Side Programmer er super enkelt å ta i bruk i Produksjonen, og til og med versjon over tid!,

En enkelt side søknaden er super-enkel å distribuere hvis sammenliknet med mer tradisjonell server-side gjengis programmer: det er egentlig bare en index.html fil, med en CSS-pakke og en Javascript-pakke.

Disse 3 statiske filer kan lastes opp til en statisk innhold server som Apache, Nginx, Amazon S3 eller Firebase Hosting.

selvfølgelig, vil programmet trenger for å ringe til backend for å få sine data, men det er en egen server som kan bygges hvis det er nødvendig med en helt annen teknologi: som Node, Java eller PHP.,

Faktisk, hvis vi skulle bygge vårt REST API eller en annen type av backend i Node, kan vi selv bygge det i maskinskrevet kopi, og slik være i stand til å bruke det samme språket på både server og klient, og til og med dele noen kode mellom dem.

Enkelt Side Søknaden Versjonskontroll i Produksjon

en Annen fordel med å distribuere vår frontend som en enkelt side-programmet er et versjonskontroll og rollback. Alt vi trenger å gjøre er å versjonen våre bygge-utgang (som produserer CSS og JS bunter uthevet i gult ovenfor).,

Vi kan konfigurere serveren som er å tjene vår SPA med en parameter som angir hvilken versjon av frontend-programmet for å bygge: det er så enkelt som det!

Denne typen distribusjon skalerer veldig godt: statisk innhold servere som Nginx kan skalere for et meget stort antall brukere.

selvfølgelig, denne typen distribusjon og versjonering er bare gyldig for frontend del av programmet vårt, dette gjelder ikke for backend-server. Men likevel, det er en viktig fordel å ha.

Men er produksjon, distribusjon den eneste fordelen av én side programmer?, Absolutt ikke, her er en annen viktig fordel:

Enkelt Side Programmer Og brukeropplevelse

Hvis du har brukt en web-applikasjon som er i stadig oppgradere alt fra serveren på nesten alle bruker-interaksjon, vil du vite at denne typen programmet gir en dårlig brukeropplevelse på grunn av:

konstant hele siden lastes inn på nytt
også på grunn av nettverket og tilbake turer til serveren for å hente alle som HTML.,

I en enkelt side-programmet, vi har løst dette problemet, ved hjelp av et fundamentalt forskjellige arkitektoniske fremgangsmåte:

På et SPA, etter den første siden lastes inn, ingen flere HTML blir sendt over nettverket. I stedet, bare data blir bedt om fra serveren (eller sendes til serveren).

Så, mens et SPA kjører, bare data som blir sendt over ledningen, som tar mye mindre tid og båndbredde enn stadig å sende HTML. La oss ta en titt på den typen av nyttelast som går over ledningen vanligvis i et SPA.,

For eksempel, i AngularUniv SPA, hvis du klikker på et kurs, ingen HTML vil bli sendt over ledningen. I stedet får vi en Ajax forespørsel som mottar en JSON nyttelast med alle de kurs data:

Som vi kan se, HTML-versjon av et kurs vil bli mye større i størrelse sammenlignet med en vanlig JSON-objekt på grunn av alle de åpne-og lukke-koder, men også det er mange duplikat HTML-hvis vi hele tiden legger lignende sider, over og over.

For eksempel, ting som topp-og bunntekst på en side er hele tiden blir sendt til nettleseren, men de har egentlig ikke endret seg.,

Så med dette, har vi her en annen stor fordel av en enkelt side søknaden: en mye forbedret brukeropplevelse på grunn av mindre hele siden lastes inn på nytt og en bedre total ytelse på grunn mindre båndbredde er nødvendig.

Så Hvorfor kan ikke Vi Bruke SPAs Overalt Da?

Hvis SPAs har så mange fordeler, hvorfor har de ikke blitt tatt i bruk i større skala på internett? Det er en god grunn for det.

Inntil relativt nylig, søkemotorer som Google hadde en hard tid indeksering riktig en enkelt side-programmet. Men hva med i dag?,

I det siste, var det noen anbefalinger for å bruke en spesiell Ajax Gjennomgang Ordningen som har vært i mellomtiden avverget. Så er Google nå i stand til å gjengi Ajax?

I en offisiell kunngjøring, vi har informasjon som Google-søk er nå generelt i stand til å gjennomgå Ajax, men det er noen rapporter som det er ennå ikke helt i stand til å gjøre det.

Og anbefaling er å bruke Progressive enhancement i stedet. Så hva betyr det, på dette stadiet er det mulig å benytte seg av Spa i allmennheten på internett eller ikke ennå?

Search Engine Friendly SPAs?,

Det er mulig å få den ytelse og brukeropplevelse av en SPA-sammen med god SEO egenskaper: bruk av Kantete Universal pre-rendering-motoren gjør det mulig for oss å:

pre-gjengi et program på backend
skipet HTML til nettleseren sammen med Kantete
og har Kantete bootstrap på klientsiden og ta over siden et SPA

Vil SPAs Bli Mer Hyppige I Fremtiden?,

Tenk deg en SEO-vennlig versjon av Amazonas som ikke ville oppdatere seg på hver side reload og med en mye bedre ytelse og brukeropplevelse: som ville har sannsynligvis en stor positiv innvirkning på den tid kundene bruker på nettstedet!

Så tekniske fordeler av SEO-vennlig SPAs er betydelig, og enda mer på mobil, og vi forventer at denne typen SEO vennlig SPA-programmer vil bli mer hyppige i fremtiden, også på internett.

Men dette gir det siste spørsmålet i dette avsnittet fortsatt ubesvart., Du må tenke på dette stadiet etter å ha lest de siste par seksjoner:

Hvis bare en minimal HTML er lastet ned fra serveren ved oppstart tid, så hvordan fungerer side holde endre seg over tid?

Som fører oss til det siste spørsmålet i dette avsnittet, og kanskje det viktigste:

Hvordan Gjør du Enkelt Side Søknaden Selv Fungerer?

Ja, hvordan kan de jobber fordi vi bare lagt svært lite HTML fra serveren? Når programmet er startet, bare data går over ledningen. Så hvordan gjør den nye HTML-kommer fra?,

Fordi det har fått til å være ny HTML-blir generert på et sted, som det er den eneste måten for at nettleseren vil endre hva det er å vise, ikke sant?

svaret er enkelt, og det har å gjøre med måten det enkelt side programmer faktisk fungerer når sammenlignet med tradisjonelle server-baserte applikasjoner.

På et tradisjonelt program (som omfatter det store flertall av dagens offentlige Internett), data til HTML-transformasjon (eller gjengivelse) blir gjort på serversiden.,

På den annen side, Enkelt side programmer gjør det på en mye annen måte:

I en SPA-etter søknad oppstart data til HTML-transformasjon prosessen har blitt flyttet fra server til klient – Spa har tilsvarende en mal motor som kjører i nettleseren din!

Og så med denne beskjed i hånden, la oss bryte opp denne delen ved å oppsummere de viktigste punktene om én side programmer.,– Fordelene av SPAs og Nøkkelen Konsept Om Hvordan De Fungerer

å Bygge vårt program, et SPA vil gi oss et betydelig antall fordeler:

Vi vil være i stand til å få en mye bedre opplevelse for brukeren
programmet vil føle seg raskere fordi mindre båndbredde som brukes, og ingen full side oppdateres skjer når brukeren navigerer gjennom program
programmet vil være mye enklere å implementere i produksjon, i hvert fall sikkert klienten del: alt vi trenger er en statisk server for å tjene et minimum av 3 filer: vår enkelt side indeks.,html -, CSS-pakken, og en Javascript-pakke.
Vi kan også dele bunter i flere deler om nødvendig ved hjelp av koden splitting.
frontend del av programmet er veldig enkel versjon i produksjonen, noe som åpner for forenklet utrullering og tilbakerulling til forrige versjon av frontend-hvis det er nødvendig

Og dette bare en distribusjon som mulig scenario av SPAs i produksjon.,

Andre Produksjon Scenarier

Andre scenarier som inkluderer pre-gjengi store deler av programmet og laste opp alt på en statisk hosting server, in-memory caching på serveren på bare visse sider, gjør versjonskontroll ved hjelp av DNS, etc.

Sine i dag enklere enn noensinne å gjøre SEO-vennlig SPAs, så vil de sannsynligvis ha økt bruk i fremtiden, i scenarioer der SPAs har ikke vært hyppig brukt.,

slik SPAs Arbeid

Den måten at én side programmer og få disse fordelene er knyttet til den måten at de jobber internt:

Etter oppstart, bare data som blir sendt over wiren som en JSON nyttelast eller noen andre format. Men ingen HTML eller CSS blir sendt lenger over ledningen etter at programmet kjører.,

nøkkelen til å forstå hvordan enkelt side programmer som fungerer på er følgende:

i stedet for å konvertere data til HTML på serveren og deretter sende det over ledningen, i en SPA-vi har nå flyttet konvertering, prosessen fra server til klient.

konverteringen skjer i siste sekund på klientsiden, som tillater oss å gi en mye bedre brukeropplevelse for brukeren.

jeg håper at dette overbeviser deg av fordelene med Spa-anlegg., Hvis ikke kan du gi meg beskjed og hvorfor det er ikke tilfelle, slik at jeg bedre kan utvikle noen av punktene.

Også på dette stadiet jeg vil vise deg noen kode med en gang. La oss bygge en liten Hello World SPA i Vinkel, og ta det derfra. Vi kommer til å se hvordan begrepene som vi har innført kart til lite program som vi er i ferd med å bygge.

jeg håper at dette innlegget hjalp til å forstå de viktigste fordelene ved Spa-anlegg, og at du likte det!,