auteur: Zee Gimon
denk na over wat voor soort technologie ons helpt om deze of gene app te draaien. Meestal is dat geen probleem – we denken niet aan de elektriciteit als we het licht aandoen., Echter, wanneer u geconfronteerd met de beslissing om een app te maken voor uw bedrijf, dan is het bevorderlijk om te begrijpen wat SPA (single page application) betekent en hoe is het anders dan Multi-Page Applications (MPA).
in dit artikel zullen we het hebben over wat Single Page Application (SPA) is, welke voordelen SPA biedt aan gebruikers en bedrijven, hoe het werkt met SEO, wat zijn de voors en tegens, en tot slot, hoe SPA werkt met technologieën als Blazor, Angular, React.js en Hog.js.,
======================
In dit nummer:
- Enkele Pagina Toepassing Definitie
- Enkele Pagina Toepassing Voordelen
- Enkele Pagina Toepassing Nadelen
- Enkele Pagina Toepassing Migratie-Issues
- Voordelen van een SPA voor Gebruikers
- Voordelen van een SPA voor Bedrijven
- Enkele Pagina Applicatie-Architectuur
- SPA en Hoekig, Reageren.js, Hog.js, en .,Netto
======================
wat betekent Single Page applicatie en waarom hebben we Single Page applicatie
een single-page applicatie is een applicatie die de pagina niet hoeft te herladen tijdens het gebruik ervan en werkt binnen een browser. Denk aan de apps die je dagelijks gebruikt: Facebook, Google Maps, Gmail, Twitter, Google Drive, of zelfs GitHub. Dit zijn allemaal voorbeelden van een kuuroord.
een van de beste voordelen van een correct geconfigureerde SPA is de user experience (UX), waarbij de gebruiker een natuurlijke omgeving van de app heeft zonder te hoeven wachten op het herladen van de pagina en andere dingen., U blijft op dezelfde pagina, die wordt aangedreven door JavaScript programmeertaal.
voordat we verder gaan, zijn er drie afkortingen die u zult zien in dit artikel:
- SPA – single-page application (zoals we hierboven hebben vermeld)
- MPA-multi-page application (een traditionele app die nieuwe pagina ‘ s laadt wanneer u op een link klikt)
- PWA – progressive web application (een website die is gebouwd met JavaScript of zijn frameworks en kan fungeren als een app, d.w.z., u kunt het bijvoorbeeld toevoegen aan de homepage van uw mobiele telefoon als een app)
toepassing op één pagina voordelen: waarom toepassing op één pagina gebruiken?
het belangrijkste voordeel van toepassingen met één pagina is de snelheid. De meeste resources Spa-behoeften (HTML + CSS + Scripts) worden geladen bij de lancering van de app en hoeven niet opnieuw te worden geladen tijdens het gebruik. Het enige dat verandert zijn de gegevens die van en naar de server worden verzonden. Als gevolg daarvan, de applicatie is zeer responsief op de vragen van de gebruiker en hoeft niet te wachten op client-server communicatie de hele tijd.,
talrijke studies van Google en belangrijke bevindingen van bedrijven zoals Amazon en Wal*Mart tonen aan dat als een pagina meer dan 200 milliseconden kost om te laden, het de potentie heeft om uw bedrijf te ruïneren of, op zijn minst, kost u veel geld. Bijvoorbeeld, Amazon zegt dat 1 seconde extra vertraging in pagina laden kost hen 1% van de omzet (die, gezien Amazon ‘ s bedrag van de omzet, is $ 1,6 miljard per jaar.)
vanuit het oogpunt van een ontwikkelaar is de creatie van een dergelijke app gestroomlijnd en geoptimaliseerd., U hoeft geen code te schrijven om de pagina ‘ s op de server weer te geven. Je hebt niet eens echt een server nodig om het ontwikkelingsproces te starten. U kunt starten uit een bestand om te beginnen. Bovendien, de ontwikkelaar kan volledig opnieuw dezelfde backend server-side code en efficiënte API voor de webapplicatie en een native mobiele app.
toepassingen met één pagina zijn uitstekend wanneer een team van ontwikkelaars samenwerkt., Hiermee kunnen backend-ontwikkelaars zich richten op de API, terwijl de frontend-ontwikkelaars meer aandacht kunnen besteden aan het creëren van de beste gebruikerservaring op basis van de backend-API en het implementeren van een mooie gebruikersinterface.
debuggen een single-page applicatie is ook eenvoudig met behulp van de Chrome-browser, omdat het speciale tools heeft voor Angular Batarang en React (de technologieën die worden gebruikt voor spa ‘ s.) Met behulp van een console kunt u netwerkbewerkingen controleren en verschillende pagina-elementen en bijbehorende gegevens onderzoeken.,
Caching proces is ook vrij efficiënt – de toepassing stuurt slechts één verzoek, slaat alle verzonden gegevens op, en kan deze gegevens gebruiken. Dit is vooral belangrijk op momenten dat de gebruiker slechte connectiviteit kan hebben-s / hij kan nog steeds gebruik maken van uw app, omdat het is gesynchroniseerd met de server wanneer de verbinding verbetert.
We hebben hierboven progressieve Web Apps (PWA) genoemd, en kuuroorden kunnen gemakkelijk worden omgezet in een PWA. Op zijn beurt, dit stelt de ontwikkelaars in staat om lokale caching te bieden en bieden de offline ervaring aan de klanten en gebruikers.,
toepassing met één pagina nadelen: waarom geen toepassing met één pagina?
ondanks alle voordelen van toepassingen met één pagina, is niets ooit perfect. Laten we eens kijken naar de tijden dat de SPA niet een ideale oplossing kan zijn.
Wat bedoelen we met één pagina applicatie nadelen?
toepassingen met één pagina leggen een grotere belasting op de browser. Als uw gebruikers bijvoorbeeld apparaten met een laag vermogen hebben, hebben ze een slechte app-ervaring in termen van snelheid.
extra problemen met JavaScript ontstaan omdat u ervoor moet zorgen dat er geen geheugenlekken zijn., Aangezien de app kan draaien voor een lange tijd – uren tegelijk (in tegenstelling tot de MPA, waar de levensduur van een pagina werd geteld in minuten), moet u ervoor zorgen dat uw SPA niet meer geheugen verbruikt dan het nodig heeft. Anders zal het plezier van snelladende pagina ‘ s worden vernietigd door de traagheid van het niet-beschikbare geheugen op het apparaat van de gebruiker.
een ander nadeel van JavaScript is dat gebruikers het gewoon kunnen uitschakelen op hun apparaten, en dan moet je nadenken over extra manieren om toegang te krijgen tot de informatie op uw website of uw app zonder JavaScript.,
een ander belangrijk ding om te onthouden over het gebruik of bouwen van een SPA is beveiliging. Door cross-site scripting (XSS) en het feit dat er geen nieuwe pagina ‘ s worden geladen, kunnen hackers toegang krijgen tot uw website en injecteren nieuwe scripts op de client-side.
daarom, als u denkt aan het bouwen van een enkele pagina applicatie voor uw bedrijf, zorg ervoor dat u de nodige voorzorgsmaatregelen te nemen om dit niet te laten gebeuren.
een ander beveiligingsprobleem is de privacy van gevoelige gegevens. De eerste pagina laden mag geen informatie bevatten die niet beschikbaar zou moeten zijn voor alle gebruikers., Omdat de hele SPA laadt meteen naar het apparaat van de gebruiker, kunt u per ongeluk weg te geven gegevens die achter een login of helemaal niet beschikbaar zijn.
SEO-optimalisatie voor toepassingen met één pagina
SEO-optimalisatie is lastig als u een toepassing met één pagina hebt, daarom hebben we besloten om er een aparte sectie aan te wijden in de SPA-nadelen.
Het is veiliger om spa ‘ s te gebruiken als u niet zo afhankelijk bent van search engine optimization (SEO), bijvoorbeeld als uw app alleen toegankelijk is via een login.,
als u een blog hebt, aan de andere kant, is het moeilijker voor de zoekmachines om uw SPA-website te indexeren in tegenstelling tot traditionele server-gerenderde pagina ‘ s. Dit komt omdat de URL niet echt verandert, en verschillende pagina ‘ s hebben meestal niet hun URL-adressen.
daarom is ons advies aan u: als u zich geen zorgen wilt maken over de URL-instellingen, kies dan een framework dat server-side rendering (SSR) ondersteunt. Gebruik bovendien geen iFrame-windows, gebruik statische URL ‘ s en optimaliseer de scripts op uw pagina om ze te versnellen., Tot slot, zorg ervoor dat uw pagina ‘ s hebben HTML5 voor Google crawler in staat zijn om ze te openen.
u moet ook speciale aandacht besteden aan de server berichten, vooral de 200 en 404 fouten.
problemen met migratie van toepassingen met één pagina
toepassingen met één pagina klinken alsof ze vanuit de hemel zijn verzonden om de gebruikerservaring met de website te vereenvoudigen. Het is snel en handig; het is bijna perfect. Is het echt zo?,
wanneer u denkt over het migreren naar de single-page applicatie van een MPA, moet u stoppen en rekening houden met de voors en tegens (die we hierboven hebben genoemd.)
Wanneer moet ik een SPA
gebruiken U kunt zich afvragen: “wanneer moet ik een toepassing met één pagina gebruiken?”Als je een bedrijf of een persoonlijke website die een dynamisch platform en een klein datavolume nodig heeft, de single-page applicatie is een goed idee. Het is ook een geweldige optie als u van plan bent om een mobiele app te ontwikkelen in de toekomst, omdat, zoals we hierboven vermeld, de backend API kan worden gebruikt voor zowel het web en mobiele apps.,
het grootste nadeel is de SEO, maar de architectuur is geschikt voor Software-as-a-Service (SaaS) platforms, gesloten gemeenschappen en sociale netwerken (daarom gebruikt Facebook het). De reden hiervoor is dat deze sites geen optimalisatie nodig hebben voor zoeken op Google.
Wanneer moet een MPA
worden gebruikt grote ondernemingen met een breed scala aan diensten en producten zouden baat hebben bij een meer traditionele toepassing met meerdere pagina ‘ s. Dergelijke bedrijven omvatten online winkels, bedrijf sites, catalogi, en marktplaatsen., Het beheren van een dergelijke applicatie zou ook veel gemakkelijker zijn, omdat het mogelijk is om het te verbinden met meerdere gebruikersdatabases.
ten slotte zouden deze soorten bedrijven zoekmachine optimalisatie opties nodig hebben omdat veel van hen zouden willen worden gevonden in Google, Bing en andere zoekmachines (om de producten of diensten die zij aanbieden te verkopen.)
voordelen van SPA voor gebruikers
het belangrijkste voordeel van applicaties met één pagina voor eindgebruikers is natuurlijk de snelheid waarmee de app wordt geladen en de mogelijkheid om offline te werken.,
SPA biedt een lineaire gebruikerservaring, wat betekent dat het gemakkelijk is om door de website te navigeren en te begrijpen waar je dit of dat ding kunt vinden. De Saucony SPA heeft bijvoorbeeld een duidelijk begin, Midden en einde. Met behulp van UI / UX design, de Saucony app ontwikkelaars hebben parallax scrollen en overgangen gebruikt om de customer journey een aangename.
applicaties met één pagina zijn ook geweldig op mobiele apparaten, omdat de meeste gebruikers alleen maar hoeven te scrollen (denk aan de eindeloze Facebook-muur). Je hoeft niet te klikken op een links, en je gewoon genieten van het scrollen.,
voordelen van SPA voor bedrijven
bij bedrijven duurt de ontwikkeling van applicaties met één pagina meestal minder lang, omdat dezelfde backend-API voor zowel het web als mobiel kan worden gebruikt. Als gevolg hiervan wordt de informatiestroom gestroomlijnd en wordt het veel gemakkelijker om een standalone native mobiele applicatie te maken.
gezien de voordelen van snelheidsoptimalisatie van de SPA, kunnen bedrijven ook profiteren omdat de gebruikers meer geïnteresseerd zijn in het gebruik van een app die snel is (ergo, iets kopen of gewoon vaker gebruik maken van de app.,)
Toepassingsarchitectuur met één pagina en hoe werkt toepassing met één pagina
Hoe werken toepassingen met één pagina? Applicatiearchitectuur met één pagina is vrij eenvoudig – het bestaat uit de technologieën aan de klantzijde (bij HUSPI vertrouwen we op React.js, hoekig en Hog.js) en de server-side technologieën (waarvoor we meestal Node gebruiken.js)
in termen van de manier waarop de site wordt weergegeven zoals deze aan de gebruiker wordt gepresenteerd, zijn er drie opties om uit te kiezen.,
Client-side rendering (CSR)
- de browser stuurt een verzoek voor HTML-bestand van de server
- de server reageert snel met een eenvoudig HTML-bestand met gekoppelde stijlen en scripts
- de gebruiker ziet een lege pagina of een loader-afbeelding terwijl de js
- uitvoert de toepassing haalt gegevens op, genereert weergaven en injecteert in DOM
- toepassing is klaar voor gebruik
dit kan een optie zijn voor eenvoudige websites, maar houd er rekening mee dat het renderen van de informatie aan de clientzijde veel bronnen van het apparaat vereist en de browser kan overbelasten., Als gevolg daarvan, deze optie kan de traagste van de drie zijn. Op hetzelfde moment, als je een high-trafficed website, MVO zou beter zijn, omdat het de informatie aan de gebruiker zou presenteren zonder te veel met de server te praten.
Als u opties voor sociaal delen nodig hebt, houd er dan rekening mee dat alle pagina ‘ s in CSR meestal dezelfde open graph (og:) waarden hebben, daarom moet u SSR of SSG gebruiken.,ng (SSR)
- De browser stuurt een verzoek voor het HTML-bestand van de server
- De server haalt alle benodigde gegevens, maakt de toepassing, en genereert de app een HTML-bestand op de vliegen
- De gebruiker ziet de beschikbare content
- De interne pagina ‘ application framework is wat hecht evenementen, genereert een virtuele DOM, en voert andere acties
- Applicatie is klaar voor gebruik
Server-side rendering is de optie die we vertrouwen op HUSPI, omdat het een combinatie is van zowel de snelheid van de één-pagina-toepassing en niet overbelast de browser van de gebruiker, waardoor de app snel.,
Static Site Generators (ESG)
- De browser stuurt een verzoek voor het HTML-bestand van de server
- De server reageert snel met een reeds bereid HTML-bestand
- de gebruiker ziet De pagina
- De applicatie haalt de gegevens, genereert uitzicht, en injecteert in DOM
- Applicatie is klaar voor gebruik
Goede en snelle optie, maar vergeet niet dat als u dynamische inhoud op uw website, static site generators zou het niet worden je beste vrienden, omdat ze zijn meer georiënteerd op statische pagina ‘ s (zoals je al hebt geraden van de naam.,)
hoe toepassing op één pagina te doen met behulp van Angular, React.js en Hog.js
terwijl ik dit artikel aan het schrijven was, heb ik met onze ontwikkelaars overlegd om te begrijpen wat ‘ s werelds beste praktijken zijn in termen van applicaties met één pagina die hier bij HUSPI worden gebruikt.
HUSPI-ontwikkelaars hebben talloze frameworks geprobeerd en getest en hebben verschillende werkachtergronden, maar ze verenigen zich in de stelling dat er top-drie frameworks zijn voor de frontend – Angular, React, en Vue – en er is één hoofd (hun favoriet) voor de backend – Node.js., Er zijn een handvol andere frameworks beschikbaar op de markt (zoals Ember of Knockout), maar we gebruiken ze niet zo veel.
om een toepassing met één pagina te bouwen, hebt u AJAX en HTML5 nodig om responsieve pagina ‘ s te bouwen, terwijl Angular, React en Vue verantwoordelijk zijn voor het verwerken van het “zware werk” aan de clientzijde van een SPA.
wat te kiezen-React, Angular, or Vue?
we hebben verschillende artikelen geschreven over het onderwerp van vergelijking tussen deze frameworks., Laten we ze echter opnieuw vergelijken om te zien of ze voordelen hebben in termen van het maken van applicaties met één pagina.
Angular and Single-Page Applications
Angular is een JavaScript framework dat werd geïntroduceerd door Google in 2010. Van de drie opties die we vergelijken, hoek is de oudste, en het is gebaseerd op TypeScript. Door TypeScript is Angular een geweldige optie om te gebruiken door grote teams van ontwikkelaars en bedrijven die deze technologie al gebruiken in hun andere producten.
het is de meest volwassen onder de frameworks en heeft een behoorlijk aantal bijdragers op GitHub., Het is misschien moeilijker in termen van de leercurve, maar op hetzelfde moment, het is de moeite waard.
onder de clients die Angular gebruiken voor hun applicaties met één pagina zijn Google (en hun producten zoals Gmail en Google Drive) en Wix, dus als u besluit om een applicatie met één pagina te maken met Angular, bent u in geweldig gezelschap.
# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB
Angular community staat op het punt om de Angular 9.0.0-wat te verwachten in de nieuwe versie van Angular?
reageren.js en toepassingen met één pagina
reageren.js is een JavaScript-bibliotheek die in 2013 werd gemaakt door Facebook., Facebook Instagram en WhatsApp gebruiken het uitgebreid in hun productlijn, waaronder bekende single-page applicaties zoals Facebook zelf, Instagram en WhatsApp. Naast Facebook maakt Uber ook gebruik van React.js bibliotheek voor hun producten.
van de drie concurrenten heeft React het grootste aantal bijdragers op GitHub – meer dan duizend-wat helpt om op de hoogte te blijven van de verschillende uitdagingen waarmee ontwikkelaars dagelijks worden geconfronteerd.
onze ontwikkelaars hier bij HUSPI geven ook de voorkeur aan React voor de projecten die we ontwikkelen (tenzij er vereisten zijn voor een ander framework)., Het is zowel lichtgewicht en volwassen genoeg om te worden getest en geprobeerd en waardig worden gevonden.
React is de juiste keuze voor degenen die net begonnen zijn met Javascript frontend frameworks, maar ook voor startups en ontwikkelaars die graag flexibel zijn. React biedt goede integratiemogelijkheden met diverse andere technologieën en frameworks, wat erg handig is als je werkt aan een project met een groot ecosysteem.
# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB
Vue.JS en Single-Page Applications
Vue is de jongste van de drie, gemaakt in 2014 door een ex-Google medewerker Yuxi (Evan) You., Hoewel geen groot bedrijf de ontwikkeling steunt, is het Hog gelukt om in populariteit te stijgen. Momenteel gebruiken bedrijven als GitLab, Baidu en Alibaba Hog.js voor hun behoeften.
Als u de voorkeur geeft aan eenvoud en flexibiliteit in uw front-end frameworks, dan is Vue een goede optie. Trouwens, het is de meest lichtgewicht van allemaal.
# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB
onlangs hebben we een artikel geschreven over React.js tegen Hog.js
toepassingen met één pagina en ASP.NET (Blazor)
we besloten om de ASP.NET optie om de lijst van frameworks en technologieën voor de single-page applicaties., Er is een nieuw kind in de buurt genaamd Blazor. Het is een. NET framework dat gebruik maakt van C#/Razor en HTML die draait in de browser met WebAssembly, volgens de GitHub repository.
Microsoft kondigde de release van dit framework eerder in 2019 en op dit moment, het lijkt erop dat Versie 1.0 is klaar. Deze serieuze steun van een groot bedrijf is een groot voordeel van Blazor omdat het dit open-source instrument onmiddellijk een deel van de 60.000 + Oss-bijdragers ‘ gemeenschap met 3.700 + Oss-medewerkers maakt.,
Blazor is een handig hulpmiddel omdat er geen TypeScript of JavaScript nodig is, U kunt alle logica in C#schrijven. Blazor biedt interoperabiliteit met JavaScript API ‘ s en bibliotheken, dus als je ecosysteem groot is en bestaat uit JS-bibliotheken, ben je niet verloren in de overgang.
. net Blazor biedt ook twee verschillende opties – client-only Blazor en server-side Blazor. De laatste moet worden geleverd met de. net Core 3.0.
betekent dit dat Blazor Angular, React, of Hog zal doden? Dat denken we niet. Het is echter iets om in de gaten te houden.
Voor SPA gebruiken .,NET, kunt u ook gebruiken ASP.NET kern en ASP.NET MVC. Hoe een enkele pagina applicatie te maken in ASP.NET MVC? Je stelt het op de backend in om de HTML op de frontend te tonen.
# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+
conclusie
gezien de opkomst van mobiele apparaten en een on-the-go levensstijl, zijn applicaties met één pagina geweldig. Of uw bedrijf zou gaan voor een SPA of een MPA – dat is meer een vraag voor uw business analisten en eisen.,
bij HUSPI hebben we business analisten in het team die kunnen helpen met het begrijpen en definiëren van de technische behoeften van het project (en ontwikkelaars die de architectuur en het project zelf vanaf de grond kunnen bouwen).