Articles

Angular Single Page Applications( SPA): Hvad er fordelene?

oktober 13, 2020 by admin

i dette indlæg vil vi dække de vigtigste fordele ved at vedtage en SPA-arkitektur, mens vi bygger vores Vinkelapplikationer, og besvare nogle meget almindelige spørgsmål vedrørende kurbade generelt.

Dette indlæg er en del af den igangværende Kantede for Begyndere serie, her er den komplette serie:

Kantede For Begyndere-Guide – Kom godt i Gang (Opsætning Miljø)
Kantede For Begyndere Guide: Hvorfor Kantede?, Top Fordele
Kantede For Begyndere-Guide – Komponenter vs Direktiver
Hvorfor en Enkelt Side Ansøgning, Hvad er Fordelene? Hvad er en SPA?

hvorfor SPA-arkitekturen?

lad os starte med det første spørgsmål: Hvorfor enkelt side applikationer (kurbade)? Denne type applikationer har eksisteret i årevis, men de er endnu ikke blevet udbredt på det offentlige Internet.

og hvorfor er det?

Der er både en god grund til det og en endnu bedre grund til, hvorfor det kan ændre sig i den nærmeste fremtid.,

Kurbade fik vedtaget en masse i løbet af de sidste par år for at bygge den private dashboard del af SaaS (Software as a Service) platforme eller Internet-tjenester i almindelighed, samt til opbygning af virksomhedens data-driven og form-intensive applikationer.

men håndhæver Angular derefter opbygningen af vores applikationer som kurbade?

svaret er nej, det gør det ikke, men det er en interessant mulighed, som det bringer, i betragtning af de mange fordele ved at opbygge en applikation på den måde. Hvilket bringer os til et centralt spørgsmål:

Hvorfor vil du gerne opbygge en applikation som SPA?,

Dette er noget, der ofte tages for givet. Alle bygger applikationer på denne måde, men hvad er den store fordel ved det? Der skal være mindst et par dræberfunktioner, ikke?

lad os starte med en funktion, der ikke bliver nævnt meget ofte: produktion implementering.forståelse af fordelene ved SPA-brug i produktionen vil faktisk også svare på det centrale spørgsmål:

Hvad er en enkelt side applikation?

Nogle gange er Navne I Soft .areudvikling ikke velvalgt, og det kan føre til meget forvirring., Det er bestemt ikke tilfældet med udtrykket SPA: en enkelt side-applikation har bogstaveligt talt kun en side !!

Hvis du vil se et enkelt sideprogram i aktion, inviterer jeg dig til at gå over til AngularUniv https://angular-university.io og begynde at klikke på hjemmesiden på listen over seneste kurser og i topmenuen.

Hvis du begynder at navigere rundt, vil du se, at siden ikke helt genindlæser – kun nye data sendes over ledningen, når brugeren navigerer gennem applikationen – det er et eksempel på et enkelt sideprogram.,

Lad mig give dig en forklaring på, hvad der er fordelen ved at opbygge en sådan applikation, og hvordan fungerer det endda.

Brug Chrome Dev-værktøjerne, lad os inspicere indekset.html på AngularUniv-websiteebstedet, der Do .nloades på startsiden (eller en anden side, hvis du navigerer og rammer Opdater).

den side, der Do .nloades, er den allerførste anmodning, som du vil se i Chrome Net .ork tab panel – det er bogstaveligt talt den eneste side i vores applikation.

lad os bemærke en ting-denne side er næsten tom! Bortset fra tag, der er ikke meget foregår her.,

Bemærk: på selve hjemmesiden siden hentede har også HTML, der var pre-renderet på serveren ved hjælp af Vinkel-Universal

Bemærk navnene på CSS og Javascript-bundter: Alle CSS og endda alle Javascript-program, der indeholder Kantede) er ikke selv kommer fra den samme server som index.html – dette kommer fra en helt anden statisk server:

I dette tilfælde, de to bundter kommer faktisk fra en Amazon S3 bucket!,

Bemærk også, at navnet på bundterne er versioneret: det indeholder tidsstemplet, hvor installationsbygningen blev udført, der implementerede denne særlige version af applikationen.

Produktion Implementering Fordele af Enkelt Side Applikationer

Det scenarie, som vi har set ovenfor, er faktisk en temmelig cool fordel, at én enkelt side applikationer:

Enkelt Side Applikationer er super nemt at implementere i Produktionen, og endda til en version over tid!,

En enkelt side ansøgningen er super-enkel at implementere, hvis forhold til mere traditionelle server-side gjort programmer: det er egentlig bare en index.html fil, med en CSS-bundle og en Javascript-bundle.

disse 3 statiske filer kan uploades til enhver statisk indholdsserver som Apache, Ngin., Ama .on S3 eller Firebase Hosting.

selvfølgelig skal applikationen foretage opkald til backend for at få sine data, men det er en separat server, der kan bygges om nødvendigt med en helt anden teknologi: som Node, Java eller PHP.,

Faktisk, hvis vi ville bygge vores REST API eller en anden type motor i Knude, kan vi selv bygge det på Maskine så godt, og så være i stand til at bruge samme sprog på både server og klient, og endda dele nogle koden mellem dem.

enkelt side ansøgning versionering i produktion

en anden fordel ved at implementere vores frontend som en enkelt side ansøgning er en versionering og rollback. Alt vi skal gøre er at version vores build output (der producerer CSS og JS bundter fremhævet med gul ovenfor).,

Vi kan konfigurere den server, der betjener vores SPA med en parameter, der specificerer, hvilken version af frontend-applikationen der skal bygges: det er så simpelt som det!

denne type implementering skaleres meget godt: statiske indholdsservere som Ngin.kan skalere for et meget stort antal brugere.

selvfølgelig er denne type implementering og versionering kun gyldig for frontend-delen af vores applikation, dette gælder ikke for backend-serveren. Men det er stadig en vigtig fordel at have.

men er produktion implementering den eneste fordel ved enkelt side applikationer?, I hvert fald ikke, her er en anden vigtig fordel:

Enkelt Side Applikationer Og Brugernes Oplevelse

Hvis du nogensinde har brugt en web-applikation, der er i konstant ladning alt fra serveren på næsten hver bruger interaktion, vil du vide, at denne type af ansøgning giver brugeren en dårlig oplevelse på grund af:

den konstante fuldstændig genindlæsning af sider
også på grund af netværket frem og tilbage ture til serveren for at hente alle som HTML.,

i en enkelt sideapplikation har vi løst dette problem ved at bruge en grundlæggende anden arkitektonisk tilgang:

på en SPA, efter den første sideindlæsning, sendes der ikke mere HTML over netværket. I stedet bliver kun data anmodet fra serveren (eller sendt til serveren).

så mens en SPA kører, sendes kun data over ledningen, hvilket tager meget mindre tid og båndbredde end konstant at sende HTML. Lad os se på den type nyttelast, der går over ledningen typisk i en SPA.,i AngularUniv SPA, hvis du klikker på et kursus, vil der ikke blive sendt nogen HTML over ledningen. I stedet får vi en Ajax anmodning som modtager en JSON nyttelast med alle de naturligvis data:

Som vi kan se HTML-versionen af et kursus, ville være langt større i størrelse i forhold til en almindelig JSON objekt på grund af alle de åbne og lukke tags, men der er også en masse af kopieret HTML-kode, hvis vi konstant ilægning lignende sider igen og igen.for eksempel sendes ting som overskrifterne og sidefødderne på en side konstant til bro .seren, men de har ikke rigtig ændret sig.,

så med dette har vi her en anden stor fordel ved en enkelt sideapplikation: en meget forbedret brugeroplevelse på grund af mindre genindlæsning af fuld side og en bedre samlet ydelse, fordi der er behov for mindre båndbredde.

så hvorfor bruger vi ikke kurbade overalt da?

Hvis kurbade har så mange fordele, hvorfor er de ikke blevet vedtaget i større skala på det offentlige internet? Det er der en god grund til.

indtil relativt for nylig havde søgemaskiner som Google svært ved at indeksere korrekt en enkelt side applikation. Men hvad med i dag?,

tidligere var der nogle anbefalinger til at bruge en speciel Aja. – Gennemsøgningsordning, der i mellemtiden er blevet udskrevet. Så er Google Nu i stand til fuldt ud at gøre Aja??i en officiel meddelelse har vi oplysningerne om, at Google-søgning nu generelt er i stand til at gennemgå Aja., men der er nogle rapporter om, at det endnu ikke er helt i stand til det.

og anbefalingen er at bruge progressiv forbedring i stedet. Så hvad betyder det, på dette tidspunkt er det muligt at bruge kurbade på det offentlige internet eller endnu ikke?

søgemaskine venlige kurbade?,

Det er muligt, at du har den ydeevne og brugerens oplevelse af et SPA-sammen med en god SEO egenskaber: brug af Kantede Universal pre-rendering engine giver os mulighed for at:

pre-render en ansøgning på backend
skib HTML til browseren sammen med Kantede
og har Kantede bootstrap på klient-side og tage over for den side, en SPA

Vil Kurbade Bliver mere og Mere Hyppige I Fremtiden?,

Forestil dig en SEO-venlig version af Ama !on, der ikke ville opdatere sig selv ved hver sideindlæsning og med en meget forbedret ydelse og brugeroplevelse: det ville sandsynligvis have en enorm positiv indflydelse på den tid, kunderne bruger på theebstedet!

så de tekniske fordele ved SEO-venlige kurbade er betydelige og endnu mere på mobil, og vi ville forvente, at denne type SEO-venlige SPA-applikationer ville blive hyppigere i fremtiden også på det offentlige internet.

men dette efterlader det sidste spørgsmål i dette afsnit stadig ubesvaret., Du skal tænke på dette tidspunkt efter at have læst de sidste par sektioner:

Hvis kun minimal HTML indlæses fra serveren ved opstartstidspunktet, hvordan ændrer Siden sig med tiden?

hvilket fører os til det sidste spørgsmål i dette afsnit, og måske det vigtigste:

Hvordan fungerer Enkeltsideapplikation endda?

faktisk, hvordan kan de fungere, fordi vi kun indlæste meget lidt HTML fra serveren? Når applikationen er startet, går kun data over ledningen. Så hvordan kommer den nye HTML fra?,

fordi der skal genereres ny HTML et eller andet sted, da det er den eneste måde, at bro ?seren vil ændre, hvad den viser, ikke?

svaret er enkelt, og det har at gøre med den måde, hvorpå enkeltsideprogrammer faktisk fungerer sammenlignet med traditionelle serverbaserede applikationer.

på en traditionel applikation (som inkluderer langt de fleste af dagens offentlige Internet) udføres dataene til HTML-transformation (eller gengivelse) på serversiden.,

På den anden side, Enkelt side applikationer gør det på en meget anderledes måde:

I en SPA efter programstart, data til HTML transformation processen er blevet flyttet fra server til klient – Kurbade har den tilsvarende af en skabelon-motor, der kører i din browser!

og så med disse oplysninger i hånden, lad os pakke dette afsnit op ved at opsummere nøglepunkterne om enkeltsideapplikationer.,– Fordele af Sbo ‘ er, og det Centrale Koncept Om, Hvordan De Arbejder

Opbygning af vores ansøgning som en SPA vil give os en betydelig række fordele:

Vi vil være i stand til at bringe en langt bedre oplevelse for brugeren
ansøgningen vil føles hurtigere, fordi mindre båndbredde, der bliver brugt, og ikke en fuld side opdateres forekommer som brugeren navigerer gennem anvendelse
ansøgningen vil blive langt lettere at implementere i produktionen, i det mindste helt sikkert klienten del: alt, hvad vi behøver, er en statisk server til at levere et minimum af 3 filer: vores indre side indeks.,html, et CSS-bundt og et Javascript-bundt.
Vi kan også opdele bundterne i flere dele, hvis det er nødvendigt ved hjælp af kodeopdeling.
frontend del af programmet er meget simpelt at version i produktion, der giver mulighed for forenklet implementering og rollbacks til tidligere version af frontend, hvis det er nødvendigt

Og dette er bare én mulig scenariet ibrugtagning af Sbo ‘ er i produktionen.,

andre Produktionsscenarier

andre scenarier inkluderer forgengivelse af store dele af applikationen og upload alt til en statisk hosting-server, caching i hukommelsen på serveren på kun bestemte sider, versionering ved hjælp af DNS osv.

det er i dag enklere end nogensinde at lave SEO-venlige kurbade, så de vil sandsynligvis have øget adoption i fremtiden, i scenarier, hvor kurbade ikke er blevet brugt ofte.,

den måde, hvorpå kurbade fungerer

den måde, hvorpå enkeltsideprogrammer giver disse fordele, er knyttet til den måde, de fungerer internt:

efter opstart sendes kun data over ledningen som en JSON-nyttelast eller et andet format. Men ingen HTML eller CSS bliver sendt længere over ledningen, efter at programmet kører.,

Det centrale punkt for at forstå, hvordan en enkelt side-applikationer arbejde er følgende:

i stedet for at konvertere data til HTML på serveren og derefter sende det via wire, i en SPA, har vi nu bevæget, at konverteringen fra serveren til klienten.

konverteringen sker sidste sekund på klientsiden, hvilket giver os mulighed for at give en meget forbedret brugeroplevelse til brugeren.

Jeg håber, at dette overbeviser dig om fordelene ved kurbade., Hvis ikke, så lad mig det vide, og hvorfor det ikke er tilfældet, så jeg bedre kan udvikle nogle af punkterne.

også på dette tidspunkt vil jeg vise dig noget kode med det samme. Lad os bygge en lille Hello Worldorld SPA i Angular, og tag den derfra. Vi vil se, hvordan de koncepter, vi har introduceret kort til den lille applikation, som vi er ved at bygge.

Jeg håber, at dette indlæg hjalp med at forstå de vigtigste fordele ved kurbade, og at du nød det!,