Articles

toepassingen met één pagina hoek (Spa): Wat zijn de voordelen?

oktober 13, 2020 by admin

in dit artikel gaan we ingaan op de belangrijkste voordelen van het gebruik van een SPA-architectuur tijdens het bouwen van onze hoekige toepassingen, en beantwoorden we een aantal veel voorkomende vragen met betrekking tot spa ‘ s in het algemeen.

Dit bericht maakt deel uit van de lopende serie Angular for Beginners, hier is de complete serie:

Angular For Beginners Guide-Getting Started (Setup Environment)
Angular For Beginners Guide: waarom hoekig?, De belangrijkste voordelen
Angular For Beginners Guide-Components vs Directives
waarom een toepassing op één pagina, Wat zijn de voordelen? Wat is een SPA?

waarom de SPA-architectuur?

laten we beginnen met de eerste vraag: waarom Single Page Applications (SPAs)? Dit soort toepassingen bestaat al jaren, maar ze zijn nog niet wijdverspreid in het openbare Internet.

en waarom is dat?

daar is zowel een goede reden voor als een nog betere reden waarom dat in de nabije toekomst zou kunnen veranderen.,

spa ‘ s werden de laatste jaren veel gebruikt voor het bouwen van het private dashboard-deel van SaaS-platforms (Software as a Service) of internetdiensten in het algemeen, evenals voor het bouwen van enterprise data-driven en vorm-intensieve applicaties.

maar dwingt Angular dan het bouwen van onze applicaties als spa ‘ s af?

het antwoord is nee, dat doet het niet, maar dat is een interessante mogelijkheid die het biedt, gezien de vele voordelen van het bouwen van een toepassing op die manier. Dat brengt ons bij een belangrijke vraag:

waarom zou u een toepassing als SPA willen bouwen?,

Dit is iets dat vaak als vanzelfsprekend wordt beschouwd. Iedereen bouwt applicaties op deze manier, maar wat is het grote voordeel daarvan? Er moeten op zijn minst een paar killer features zijn, toch?

laten we beginnen met een functie die niet vaak genoemd wordt: productie implementatie.

inzicht in de voordelen van SPA-gebruik in de productie zal ook de belangrijkste vraag beantwoorden:

Wat is een toepassing met één pagina?

soms zijn namen in softwareontwikkeling niet goed gekozen, en dat kan tot veel verwarring leiden., Dat is zeker niet het geval met de term SPA: een enkele pagina applicatie heeft letterlijk maar één pagina !! 😊

Als u een enkele pagina applicatie in actie wilt zien, nodig ik u uit om naar de AngularUniv https://angular-university.io te gaan en te beginnen met klikken op de homepage van de lijst met laatste cursussen, en in het bovenste menu.

als u begint te navigeren, zult u zien dat de pagina niet volledig herladen – alleen nieuwe gegevens worden verzonden over de draad als de gebruiker door de toepassing navigeert – dat is een voorbeeld van een enkele pagina toepassing.,

laat me je uitleggen wat het voordeel is van het bouwen van zo ‘ n applicatie en hoe dat werkt.

met behulp van de Chrome Dev gereedschappen, laten we de index inspecteren.html van de AngularUniv website die wordt gedownload op de home page (of een andere pagina, als u navigeren en druk op Vernieuwen).

de pagina die wordt gedownload is het allereerste verzoek dat u zult zien in het tabblad Chrome Network – dat is letterlijk de enkele pagina van onze applicatie.

Let ‘ s notice one thing-deze pagina is bijna leeg! Behalve de tag, is er hier niet veel aan de hand.,

Opmerking: op de eigenlijke website de pagina gedownload heeft ook HTML-dat was pre-rendered op de server met Hoekige Universele

Merk op dat de namen van de CSS-en Javascript-bundels: Alle CSS en zelfs alle de Javascript van de toepassing (inclusief Hoek) is het niet zelfs afkomstig van dezelfde server als de index.html – deze komt uit een volledig verschillende statische server:

In dit geval, de twee bundels zijn eigenlijk afkomstig uit een Amazon S3-emmer!,

merk ook op dat de naam van de bundels versioned is: het bevat de tijdstempel waarop de implementatie build werd uitgevoerd die deze specifieke versie van de toepassing implementeerde.

de productie implementatie voordelen van Single Page Applications

het scenario dat we hierboven hebben gezien is eigenlijk een vrij cool voordeel van single page applications:

Single Page Applications zijn super eenvoudig te implementeren in de productie, en zelfs naar versie na verloop van tijd!,

een enkele pagina toepassing is super eenvoudig te implementeren in vergelijking met meer traditionele server-side gerenderde toepassingen: het is eigenlijk slechts één index.html bestand, met een CSS-bundel en een Javascript-bundel.

Deze 3 statische bestanden kunnen worden geüpload naar elke statische content server zoals Apache, Nginx, Amazon S3 of Firebase Hosting.

natuurlijk moet de toepassing de backend aanroepen om de data te krijgen, maar dat is een aparte server die kan worden gebouwd indien nodig met een compleet andere technologie: zoals Node, Java of PHP.,

eigenlijk, als we onze REST API of een ander type backend in Node zouden bouwen, zouden we het zelfs in Typescript kunnen bouwen, en zo in staat zijn om dezelfde taal te gebruiken op zowel de server als de client, en zelfs enige code tussen hen te delen.

versiebeheer op één pagina in productie

een ander voordeel van het implementeren van onze frontend als een toepassing op één pagina is versiebeheer en terugdraaien. Het enige wat we hoeven te doen is om de versie van onze build output (dat produceert de CSS en JS bundels gemarkeerd in geel hierboven).,

we kunnen de server die onze SPA bedient configureren met een parameter die aangeeft welke versie van de frontend applicatie gebouwd moet worden: zo simpel is het!

Dit type implementatie schaalt zeer goed: statische content servers zoals Nginx kunnen schalen voor een zeer groot aantal gebruikers.

natuurlijk is dit type implementatie en versiebeheer alleen geldig voor het frontend deel van onze toepassing, Dit is niet van toepassing op de backend server. Maar toch, het is een belangrijk voordeel om te hebben.

maar is productie-implementatie het enige voordeel van toepassingen met één pagina?, Zeker niet, hier is een ander belangrijk voordeel:

toepassingen met één pagina en gebruikerservaring

Als u ooit een webtoepassing hebt gebruikt die constant alles van de server herlaadt op bijna elke gebruikersinteractie, dan weet u dat dit type toepassing een slechte gebruikerservaring geeft door:

de constante volledige pagina herlaadt
ook door het heen en weer reizen van het netwerk naar de server om al die HTML op te halen.,

in een enkele paginatoepassing hebben we dit probleem opgelost door een fundamenteel andere architectonische benadering te gebruiken:

in een SPA wordt na het laden van de eerste pagina geen HTML meer verzonden over het netwerk. In plaats daarvan worden alleen gegevens opgevraagd van de server (of naar de server gestuurd).

dus terwijl een SPA draait, worden alleen gegevens over de draad verzonden, wat veel minder tijd en bandbreedte kost dan het constant versturen van HTML. Laten we eens kijken naar het soort lading dat over de draad gaat meestal in een SPA.,

bijvoorbeeld, in de AngularUniv SPA, als u op een cursus klikt, zal er geen HTML over de draad worden verzonden. In plaats daarvan krijgen we een Ajax-verzoek dat een JSON payload ontvangt met alle cursusgegevens:

zoals we kunnen zien, zou de HTML-versie van een cursus veel groter zijn in vergelijking met een gewoon JSON-object als gevolg van alle openings-en sluitingstags, maar er is ook veel dubbele HTML als we voortdurend soortgelijke pagina ‘ s opnieuw en opnieuw laden.

bijvoorbeeld, dingen zoals de kop-en voetteksten van een pagina worden voortdurend naar de browser gestuurd, maar ze zijn niet echt veranderd.,

dus hiermee hebben we hier een tweede groot voordeel van een enkele pagina applicatie: een veel verbeterde gebruikerservaring door minder volledige pagina herladen en een betere algemene prestaties omdat minder bandbreedte nodig is.

dus waarom gebruiken we dan niet overal spa ‘ s?

Als spa ‘ s zoveel voordelen hebben, waarom zijn ze dan niet op grotere schaal toegepast op het openbare internet? Daar is een goede reden voor.

tot voor kort hadden zoekmachines zoals Google het moeilijk om een toepassing op één pagina correct te indexeren. Maar vandaag dan?,

In het verleden waren er enkele aanbevelingen om een speciaal Ajax Crawling schema te gebruiken dat ondertussen verouderd is. Dus is Google nu in staat om Ajax volledig te renderen?

in een officiële aankondiging hebben we de informatie dat Google search nu over het algemeen in staat is om Ajax te crawlen, maar er zijn enkele meldingen dat het nog niet helemaal in staat is om dit te doen.

en de aanbeveling is om in plaats daarvan progressieve verbetering te gebruiken. Dus wat betekent dat, is het in dit stadium mogelijk om kuuroorden te gebruiken op het openbare internet of nog niet?

zoekmachinevriendelijke spa ‘ s?,

het is mogelijk om de prestaties en gebruikerservaring van een SPA samen met goede SEO-eigenschappen te hebben: het gebruik van de Angular Universal pre-rendering engine stelt ons in staat om:

Een toepassing op de backend te pre-renderen
de HTML samen met Angular
naar de browser te sturen en een Angular bootstrap op de client te hebben en de pagina over te nemen een SPA

zal spa ‘ s frequenter worden In de toekomst?,

stel je een SEO-vriendelijke versie van Amazon voor die zichzelf niet zou vernieuwen bij elke herlaadpagina en met een sterk verbeterde prestaties en gebruikerservaring: dat zou waarschijnlijk een enorme positieve impact hebben op de tijd die klanten op de site doorbrengen!

de technische voordelen van SEO-vriendelijke spa ‘ s zijn dus aanzienlijk en nog meer op mobiele apparaten, en we verwachten dat dit soort SEO-vriendelijke SPA-toepassingen in de toekomst ook op het openbare internet vaker zullen voorkomen.

maar dit laat de laatste vraag van deze sectie nog onbeantwoord., U moet denken in dit stadium na het lezen van de laatste paar secties:

als slechts minimale HTML wordt geladen vanaf de server tijdens het opstarten, Hoe verandert de pagina dan in de loop van de tijd?

wat leidt tot de laatste vraag van deze sectie, en misschien wel de belangrijkste:

Hoe werkt een enkele pagina applicatie?

inderdaad, hoe kunnen ze werken omdat we maar heel weinig HTML van de server hebben geladen? Zodra de applicatie is gestart, gaan alleen gegevens over de draad. Dus hoe komt de nieuwe HTML vandaan?,

omdat er ergens nieuwe HTML moet worden gegenereerd, omdat het de enige manier is waarop de browser zal veranderen wat het weergeeft, toch?

het antwoord is eenvoudig, en het heeft te maken met de manier waarop applicaties met één pagina daadwerkelijk werken in vergelijking met traditionele servergebaseerde applicaties.

op een traditionele toepassing (die het overgrote deel van het huidige openbare Internet omvat), wordt de data naar HTML transformatie (of rendering) gedaan op de server kant.,

aan de andere kant doen toepassingen met een enkele pagina het op een heel andere manier:

in een SPA na het opstarten van de toepassing is het proces van gegevens naar HTML – transformatie van de server naar de client verplaatst-SPAs hebben het equivalent van een template engine die in uw browser draait!

en dus met deze informatie in de hand, Laten we deze sectie afsluiten door een samenvatting van de belangrijkste punten over enkele pagina toepassingen.,– Voordelen van de spa ‘ s en de Sleutel Concept Over Hoe Ze Werken

het Bouwen van onze applicatie, zoals een SPA geeft ons een groot aantal voordelen:

We zullen in staat zijn om een veel betere ervaring voor de gebruiker
De toepassing zal voelen sneller omdat er minder bandbreedte wordt gebruikt, en geen volledige pagina vernieuwt zich voordoen als de gebruiker navigeert door de toepassing
De toepassing zal veel gemakkelijker te implementeren in de productie van, althans zeker het deel van de client: alles wat we nodig hebben is een statische server te dienen minimaal 3 bestanden: onze single-page-index.,html, een CSS-bundel en een Javascript-bundel.
We kunnen de bundels ook in meerdere delen splitsen indien nodig met behulp van code splitsen.
het frontend gedeelte van de applicatie is zeer eenvoudig te gebruiken voor versie in productie, waardoor vereenvoudigde implementatie en rollbacks mogelijk zijn naar de vorige versie van de frontend indien nodig

en dit is slechts één mogelijk implementatiescenario van Spa ‘ s in productie.,

andere productiescenario ‘s

andere scenario’ s omvatten het vooraf renderen van grote delen van de applicatie en het uploaden van alles naar een statische hostingserver, in-memory caching op de server van slechts bepaalde pagina ‘ s, versiebeheer met DNS, enz.

Het is vandaag eenvoudiger dan ooit om seo-vriendelijke spa ’s te maken, dus ze zullen waarschijnlijk in de toekomst meer gebruik hebben gemaakt, in scenario’ s waar spa ‘ s niet vaak zijn gebruikt.,

de manier waarop spa ‘ s werken

de manier waarop applicaties met één pagina deze voordelen bieden, is gekoppeld aan de manier waarop ze intern werken:

na het opstarten worden alleen gegevens verzonden over de wire als een JSON payload of een ander formaat. Maar geen HTML of CSS wordt verzonden meer over de draad nadat de toepassing wordt uitgevoerd.,

het belangrijkste punt om te begrijpen hoe applicaties met één pagina Werken is het volgende:

in plaats van gegevens naar HTML op de server te converteren en deze vervolgens via de draad te verzenden, hebben we in een SPA nu dat conversieproces van de server naar de client verplaatst.

de conversie gebeurt op de laatste seconde aan de clientzijde, waardoor we een veel verbeterde gebruikerservaring aan de gebruiker kunnen geven.

Ik hoop dat dit u overtuigt van de voordelen van Kuuroorden., Zo niet, laat het me dan weten en waarom dat niet het geval is, zodat ik een aantal punten beter kan uitwerken.

ook wil ik u in dit stadium meteen wat code laten zien. Laten we een kleine Hello World SPA bouwen in hoekig, en vanaf daar verder gaan. We gaan kijken hoe de concepten die we hebben geïntroduceerd in kaart brengen met de kleine applicatie die we gaan bouwen.

Ik hoop dat dit bericht hielp om de belangrijkste voordelen van Spa ‘ s te begrijpen, en dat je ervan genoten hebt!,