Articles

Angular single Page Applications (SPA): vilka är fördelarna?

oktober 13, 2020 by admin

i det här inlägget kommer vi att täcka de viktigaste fördelarna med att anta en Spa-arkitektur medan vi bygger våra Vinkelapplikationer och svara på några mycket vanliga frågor om Spa i allmänhet.

det här inlägget är en del av den pågående vinkel för nybörjare serien, här är hela serien:

vinkel för nybörjare Guide – komma igång (Setup Environment)
vinkel för nybörjare Guide: varför vinkel?, De bästa fördelarna
vinkel för nybörjare Guide – komponenter vs direktiv
varför en enda sida ansökan, vilka är fördelarna? Vad är SPA?

varför Spa-arkitekturen?

låt oss börja med den första frågan: Varför single Page Applications (SPAs)? Denna typ av applikationer har funnits i flera år, men de har ännu inte blivit utbredd på det offentliga Internet.

och varför är det så?

det finns både en bra anledning till det och en ännu bättre anledning till varför det kan förändras inom en snar framtid.,

Spa antogs mycket under de senaste åren för att bygga den privata instrumentpaneldelen av SaaS (Software as a Service) plattformar eller Internet-tjänster i allmänhet, samt för att bygga företagsdatadrivna och formintensiva applikationer.

men gör Angular sedan genomdriva bygga våra program som ett spa?

svaret är nej, det gör det inte, men det är en intressant möjlighet att det ger, med tanke på de många fördelarna med att bygga ett program på det sättet. Vilket leder oss till en nyckelfråga:

varför skulle du vilja bygga ett program som ett SPA?,

detta är något som ofta tas för givet. Alla bygger applikationer på detta sätt, men vad är den stora fördelen med det? Det måste finnas åtminstone ett par mördarfunktioner, eller hur?

låt oss börja med en funktion som inte nämns mycket ofta: Produktionsdistribution.

förstå fördelarna med SPA – användning i produktionen kommer faktiskt också att svara på nyckelfrågan:

Vad är en enda sida ansökan?

Ibland är namn i mjukvaruutveckling inte väl valda, och det kan leda till mycket förvirring., Det är verkligen inte fallet med termen SPA: en enda sida ansökan bokstavligen har bara en sida !! om du vill se en enda sida ansökan i aktion, jag inbjuder dig att gå över till AngularUniv https://angular-university.iooch börja Klicka på hemsidan på listan över senaste kurser, och på toppmenyn.

om du börjar navigera runt ser du att sidan inte laddar om helt – bara nya data skickas över tråden när användaren navigerar genom programmet – det är ett exempel på en enda sida ansökan.,

Låt mig ge dig en förklaring till vad som är fördelen med att bygga en sådan applikation och hur fungerar det ens.

med hjälp av Chrome Dev-verktygen inspekterar vi indexet.html på Angularunivs webbplats som laddas ner på Hemsidan (eller någon annan sida, om du navigerar och trycker på refresh).

sidan som hämtas är den allra första förfrågan som du kommer att se i flikpanelen i Chrome Network – det är den bokstavligen enda sidan i vår ansökan.

låt oss märka en sak – den här sidan är nästan tom! Förutom taggen är det inte mycket som händer här.,

notera: på den faktiska webbplatsen har sidan hämtat också HTML som förrenderades på servern med hjälp av Angular Universal

Lägg märke till namnen på CSS-och Javascript – buntarna: All CSS och till och med all Javascript i programmet (som innehåller vinkel) kommer inte ens från samma server somindex.html – detta kommer från en helt annan statisk server:

i det här fallet kommer de två buntarna faktiskt från en Amazon S3-hink!,

Observera också att namnet på buntarna är versionshanterat: det innehåller tidsstämpeln där distributionsbyggnaden utfördes som distribuerade den här versionen av programmet.

Produktionsfördelarna med enkelsidiga applikationer

scenariot vi har sett ovan är faktiskt en ganska cool fördel med enkelsidiga applikationer:

enkelsidiga applikationer är super lätta att distribuera i produktion, och till och med till version över tiden!,

en enda sida ansökan är super enkelt att distribuera jämfört med mer traditionella serversidan renderade program: Det är verkligen bara enindex.html fil, med en CSS bunt och en Javascript bunt.

dessa 3 statiska filer kan laddas upp till någon statisk Innehållsserver som Apache, Nginx, Amazon S3 eller Firebase Hosting.

självklart måste programmet ringa till backend för att få sina data, men det är en separat server som kan byggas om det behövs med en helt annan teknik: som nod, Java eller PHP.,

faktiskt, om vi skulle bygga vår REST API eller en annan typ av backend i Nod, vi kan även bygga den i Typescript samt, och så kunna använda samma språk på både servern och klienten, och även dela någon kod mellan dem.

enkelsidig programversion i produktion

en annan fördel med att distribuera vår frontend som en enda sida ansökan är en versionshantering och rollback. Allt vi behöver göra är att version vår bygga utgång (som producerar CSS och JS buntar markerade i gult ovan).,

Vi kan konfigurera servern som betjänar vårt SPA med en parameter som anger vilken version av frontend-programmet som ska byggas: det är så enkelt som det!

den här typen av distributionsskalor mycket bra: statiska innehållsservrar som Nginx kan skala för ett mycket stort antal användare.

naturligtvis är denna typ av distribution och versionshantering endast giltig för frontend delen av vår ansökan, Detta gäller inte för backend-servern. Men ändå är det en viktig fördel att ha.

men är produktionsdistribution den enda fördelen med ensidiga program?, Absolut inte, här är en annan viktig fördel:

enkelsidiga applikationer och användarupplevelse

om du någonsin har använt en webbapplikation som ständigt laddar om allt från servern på nästan alla användarinteraktioner, kommer du att veta att den typen av program ger en dålig användarupplevelse på grund av:

den konstanta hela sidan laddar om
också på grund av nätverket fram och tillbaka resor till servern för att hämta all den HTML.,

i en enda sidapplikation har vi löst detta problem genom att använda ett fundamentalt annorlunda arkitektoniskt tillvägagångssätt:

på ett SPA, efter den första sidbelastningen skickas inte mer HTML över nätverket. Istället begärs endast data från servern (eller skickas till servern).

så medan ett SPA körs, skickas endast data över tråden, vilket tar mycket mindre tid och bandbredd än att ständigt skicka HTML. Låt oss ta en titt på vilken typ av nyttolast som går över tråden vanligtvis i ett SPA.,

till exempel i AngularUniv SPA, om du klickar på en kurs, kommer ingen HTML att skickas över tråden. Istället får vi en Ajax-förfrågan som tar emot en JSON-nyttolast med alla kursdata:

som vi kan se skulle HTML-versionen av en kurs vara mycket större i storlek jämfört med ett vanligt JSON-objekt på grund av alla öppnings-och stängningstaggar, men det finns också mycket duplicerad HTML om vi ständigt laddar Liknande sidor om och om igen.

till exempel skickas saker som sidhuvud och sidfot på en sida ständigt till webbläsaren men de har inte riktigt förändrats.,

så med detta, vi har här en andra stor fördel med en enda sida ansökan: en mycket förbättrad användarupplevelse på grund av mindre helsida omladdningar och en bättre prestanda eftersom mindre bandbredd behövs.

så varför använder vi inte Spa överallt då?

Om Spa har så många fördelar, varför har de inte antagits i större skala på det offentliga internet? Det finns en bra anledning till det.

tills relativt nyligen, sökmotorer som Google hade svårt att indexera korrekt en enda sida program. Men idag då?,

tidigare fanns det några rekommendationer att använda ett speciellt Ajax-Krypningssystem som under tiden har blivit föråldrat. Så kan Google nu fullt ut göra Ajax?

i ett officiellt meddelande har vi den information som Google search nu i allmänhet kan genomsöka Ajax, men det finns några rapporter om att det ännu inte helt kan göra det.

och rekommendationen är att använda progressiv förbättring istället. Så vad betyder det, i detta skede är det möjligt att använda spa på det offentliga internet eller ännu inte?

sökmotor vänliga Spa?,

det är möjligt att ha prestanda och användarupplevelse av ett SPA tillsammans med bra SEO-egenskaper: användningen av Vinkeluniversal förrenderingsmotor gör det möjligt för oss att:

Pre-rendera ett program på backend
skicka HTML till webbläsaren tillsammans med vinkel
och ha vinkel bootstrap på klientsidan och ta över sidan ett SPA

kommer Spa att bli vanligare i framtiden?,

Föreställ dig en SEO-vänlig version av Amazon som inte skulle uppdatera sig på varje sida omladdning och med en mycket förbättrad prestanda och användarupplevelse: det skulle sannolikt ha en stor positiv inverkan på den tid kunderna spenderar på webbplatsen!

så de tekniska fördelarna med SEO-vänliga Spa är betydande och ännu mer på mobil, och vi förväntar oss att denna typ av SEO vänliga SPA-applikationer skulle bli vanligare i framtiden även på det offentliga internet.

men detta lämnar den sista frågan i det här avsnittet fortfarande obesvarad., Du måste tänka i detta skede efter att ha läst de senaste sektionerna:

om endast minimal HTML laddas från servern vid starttiden, hur förändras sidan över tiden?

vilket leder oss till den sista frågan i det här avsnittet,och kanske det viktigaste:

Hur fungerar ensidig applikation även?

hur kan de fungera eftersom vi bara laddade väldigt lite HTML från servern? När programmet startas går endast data över ledningen. Så hur kommer den nya HTML från?,

eftersom det måste finnas ny HTML som genereras någonstans, eftersom det är det enda sättet att webbläsaren kommer att ändra vad den visar, eller hur?

svaret är enkelt, och det har att göra med hur enstaka sidapplikationer faktiskt fungerar jämfört med traditionella serverbaserade applikationer.

på en traditionell applikation (som inkluderar den stora majoriteten av dagens offentliga Internet) görs data till HTML-omvandling (eller rendering) på serversidan.,

å andra sidan gör enkelsidiga applikationer det på ett mycket annorlunda sätt:

i ett SPA efter programstart har data till HTML – omvandlingsprocessen flyttats från servern till klienten-SPAs har motsvarigheten till en mallmotor som körs i din webbläsare!

och så med denna information i handen, låt oss avsluta det här avsnittet genom att sammanfatta de viktigaste punkterna om enstaka sidapplikationer.,– Fördelarna med spabad och Viktiga Begrepp Om Hur De Fungerar

att Bygga våra program som ett SPA kommer att ge oss ett betydande antal fördelar:

Vi kommer att kunna få en mycket bättre upplevelse för användaren
ansökan kommer att känna sig snabbare eftersom mindre bandbredd används, och inga fullständiga sidan uppdateras inträffar när användaren navigerar genom ansökan
ansökan kommer att bli mycket lättare att använda i produktionen, åtminstone säkert att kundens del: allt vi behöver är en statisk server för att leverera ett minimum av 3 filer: vår enda sidan index.,html, CSS bunt, och en Javascript-bunt.
Vi kan också dela upp buntarna i flera delar om det behövs med hjälp av koddelning.
frontend delen av programmet är mycket enkel att version i produktionen, vilket möjliggör förenklad distribution och återgång till tidigare version av frontend om det behövs

och detta bara en möjlig driftsättning scenario Spa i produktionen.,

andra Produktionsscenarier

andra scenarier inkluderar pre-rendering stora delar av programmet och ladda upp allt till en statisk hosting server, in-memory caching på servern av endast vissa sidor, gör versionshantering med DNS, etc.

det är idag enklare än någonsin att göra SEO-vänliga Spa, så de kommer sannolikt att ha ökat adoption i framtiden, i scenarier där Spa inte har använts ofta.,

hur SPAs fungerar

det sätt på vilket enstaka sidapplikationer ger dessa fördelar är kopplat till hur de arbetar internt:

efter starten skickas endast data över ledningen som en JSON-nyttolast eller något annat format. Men ingen HTML eller CSS får skickas längre över tråden efter programmet körs.,

den viktigaste punkten för att förstå hur enkelsidiga applikationer fungerar är följande:

istället för att konvertera data till HTML på servern och sedan skicka den över tråden, i ett SPA har vi nu flyttat konverteringsprocessen från servern till klienten.

konverteringen sker sista sekunden på klientsidan, vilket gör att vi kan ge användaren en mycket förbättrad användarupplevelse.

Jag hoppas att detta övertygar dig om fördelarna med spa., Om inte snälla låt mig veta och varför så inte är fallet så kan jag bättre utveckla några av punkterna.

även i detta skede vill jag visa dig lite kod direkt. Låt oss bygga en liten Hello World SPA i vinkel, och ta det därifrån. Vi kommer att se hur de begrepp som vi har infört karta till den lilla ansökan som vi är på väg att bygga.

Jag hoppas att det här inlägget hjälpte till att förstå de viktigaste fördelarna med spa, och att du tyckte om det!,