författare: Zee Gimon
Vi är så vana vid att vara online och med en mobiltelefon med våra händer att vi ofta inte ens slutar tänka på vilken typ av teknik som hjälper oss att köra den här eller den där appen. Vanligtvis är det inte ett problem – vi tänker inte på elen när vi slår på lamporna., Men när du möter beslutet att skapa en app för ditt företag, då är det bidrar till att förstå vad betyder SPA (enda sida ansökan) och hur skiljer det sig från flersidiga program (Mpa).
i den här artikeln kommer vi att prata om vad som är Single Page Application (SPA), vilka fördelar ger SPA till användare och företag, hur fungerar det med SEO, vilka är dess fördelar och nackdelar, och slutligen hur SPA fungerar med sådan teknik som Blazor, Angular, React.js och Vue.js.,
======================
i det här problemet:
- enkelsidig Applikationsdefinition
- enkelsidig applikationsfördelar
- enkelsidig applikations nackdelar
- enkelsidig Migreringsproblem
- fördelar med SPA för användare
- fördelar med SPA för företag
- enkelsidig applikationsarkitektur
- SPA och vinkel, reagera.js, Vue.js, och .,Netto
======================
Vad betyder enkelsidig applikation och varför behöver vi ensidig applikation
en enkelsidig applikation är en app som inte behöver ladda om sidan under användningen och fungerar i en webbläsare. Tänk på de appar du använder dagligen: Facebook, Google Maps, Gmail, Twitter, Google Drive, eller till och med GitHub. Alla dessa är exempel på ett SPA.
en av de bästa fördelarna med ett korrekt konfigurerat SPA är användarupplevelsen (UX), där användaren har en naturlig miljö i appen utan att behöva vänta på att sidan laddas om och andra saker., Du förblir på samma sida, som drivs av JavaScript programmeringsspråk.
innan vi går vidare finns det tre förkortningar som du ser i den här artikeln:
- SPA – enkelsidig applikation (som vi har nämnt ovan)
- mpa-flersidig applikation (en traditionell app som laddar nya sidor när du klickar på en länk)
- PWA – progressiv webbapplikation (en webbplats som är byggd med JavaScript eller dess ramar och kan fungera som en app, dvs.,, du kan till exempel lägga till den på din mobiltelefon hemsida som en app)
enkelsidig ansökan fördelar: varför använda ensidig ansökan?
den största fördelen med ensidiga applikationer är dess hastighet. De flesta resurser SPA behov (HTML + CSS + skript) laddas vid lanseringen av appen och behöver inte laddas om under användningen. Det enda som ändras är de data som överförs till och från servern. Som ett resultat, programmet är mycket lyhörd för användarens frågor och behöver inte vänta på klient-server kommunikation hela tiden.,
många studier från Google och viktiga resultat från företag som Amazon och Wal*Mart visar att om en sida tar mer än 200 millisekunder att ladda, har den potential att förstöra ditt företag eller åtminstone kosta dig mycket pengar. Till exempel säger Amazon att 1 sekund av ytterligare fördröjning i sidbelastningen kostar dem 1% av försäljningen (vilket, med tanke på Amazons försäljningsbelopp, är $1.6 miljarder per år.)
från en utvecklares synvinkel är skapandet av en sådan app strömlinjeformad och optimerad., Du behöver inte skriva kod för att rendera sidorna på servern. Du behöver inte ens verkligen en server för att påbörja utvecklingsprocessen. Du kan sparka av från en fil för att komma igång. Dessutom kan utvecklaren helt återanvända samma backend serversidan kod och effektiv API för webbapplikationen och en infödd mobilapp.
enkelsidiga program är utmärkta när du har ett team av utvecklare som arbetar tillsammans., Det gör att backend utvecklare att fokusera på API, medan frontend utvecklare kan ägna mer uppmärksamhet åt att skapa den bästa användarupplevelsen baserad på backend API och genomföra en vacker användargränssnitt.
Felsökning en enkelsidig applikation är också lätt att använda Chrome-webbläsaren eftersom den har specialverktyg för vinkel Batarang och React (den teknik som används för Spa.) Med hjälp av en konsol kan du övervaka nätverksoperationer samt undersöka olika sidelement och tillhörande data.,
Caching processen är också ganska effektiv – programmet skickar endast en begäran, lagrar alla data som överförs, och kan använda dessa data. Detta är särskilt viktigt ibland när användaren kan ha dålig anslutning-s / han kan fortfarande använda din app eftersom den är synkroniserad med servern när anslutningen förbättras.
Vi har nämnt Progressive Web Apps (PWA) ovan, och Spa kan enkelt omvandlas till en PWA. Detta gör det möjligt för utvecklarna att tillhandahålla lokal caching och erbjuda offlineupplevelsen till kunderna och användarna.,
enkelsidig ansökan nackdelar: varför inte en enda sida ansökan?
trots alla fördelar med enkelsidiga applikationer är ingenting någonsin perfekt. Låt oss kolla in de tider då spaet inte kan vara en idealisk lösning.
vad menar vi med en sida applikations nackdelar?
enkelsidiga applikationer lägger en mer signifikant belastning på webbläsaren. Om dina användare till exempel har enheter med låg effekt kommer de att ha en dålig appupplevelse när det gäller hastighet.
ytterligare problem med JavaScript uppstår eftersom du måste se till att det inte finns några minnesläckor., Eftersom appen kan köras under en lång tid-timmar åt gången (i motsats till MPA, där livslängden på en sida räknades i minuter), måste du se till att ditt SPA inte förbrukar mer minne än det behöver. Annars kommer nöjet att snabbt ladda sidor att förstöras av trögheten hos otillgängligt minne på användarens enhet.
ytterligare en nackdel med JavaScript är att användarna helt enkelt kan få den inaktiverad på sina enheter, och då måste du tänka på ytterligare sätt att hur de kan komma åt informationen på din webbplats eller din app utan JavaScript.,
en annan kritisk sak att komma ihåg om att använda eller bygga ett SPA är säkerhet. På grund av cross-site scripting (XSS) och det faktum att inga nya sidor laddas kan hackare få tillgång till din webbplats och injicera nya skript på klientsidan.
därför, om du funderar på att bygga en enda sida ansökan för ditt företag, se till att du vidta nödvändiga försiktighetsåtgärder för att inte låta detta hända.
ett annat säkerhetsproblem är integriteten för känsliga data. Den ursprungliga sidbelastningen ska inte innehålla någon information som inte ska vara tillgänglig för alla användare., Eftersom hela SPA laddar direkt till användarens enhet kan du oavsiktligt ge bort data som borde ligga bakom en inloggning eller inte alls tillgänglig.
SEO-optimering för enkelsidiga applikationer
SEO-optimering är knepigt när du har en enkelsidig applikation, varför vi bestämde oss för att ägna en separat sektion till den i SPA-nackdelarna.
det är säkrare att använda spa när du inte litar på sökmotoroptimering (SEO) så mycket, till exempel om din app endast kan nås via en inloggning.,
om du har en blogg är det däremot svårare för sökmotorerna att indexera din SPA-webbplats i motsats till traditionella serverrenderade sidor. Detta beror på att webbadressen egentligen inte ändras, och olika sidor brukar inte ha sina webbadresser.
därför vårt råd till dig: om du inte vill bry sig om URL-inställningarna, välj en ram som stöder serversidan rendering (SSR). Använd inte Iframe-fönster, använd statiska webbadresser och optimera scripten på din sida för att snabba upp dem., Kontrollera slutligen att dina sidor har HTML5 för att Google-sökroboten ska kunna komma åt dem.
Du bör också ägna särskild uppmärksamhet åt servermeddelandena, särskilt 200 och 404-felen.
problem med Applikationsmigrering på en sida
applikationer på en sida låter som om de skickades från himlen för att förenkla användarnas upplevelse med webbplatsen. Det är snabbt och bekvämt; det är nästan perfekt. Är det verkligen så?,
När du funderar på att migrera till en enda sida ansökan från en MPA, måste du sluta och överväga för-och nackdelar (som vi har nämnt ovan.)
när du ska använda ett SPA
Du kanske frågar, ” När ska jag använda en enda sida program?”När du har ett företag eller en personlig webbplats som behöver en dynamisk plattform och liten datavolym, den enda sida ansökan är en bra idé. Det är också ett bra alternativ om du planerar att utveckla en mobilapp i framtiden, eftersom, som vi nämnde ovan, backend API kan användas för både webben och mobilappar.,
den största nackdelen är SEO, men arkitekturen är lämplig för Software-as-a-Service (SaaS) plattformar, stängda samhällen och sociala nätverk (varför Facebook använder det). Anledningen till detta är att dessa webbplatser inte behöver optimering för sökning på Google.
när man ska använda en MPA
stora företag med ett brett utbud av tjänster och produkter skulle dra nytta av en mer traditionell flersidig applikation. Sådana företag inkluderar nätbutiker, företagssajter, kataloger och marknadsplatser., Hantera en sådan ansökan skulle också vara mycket lättare eftersom det är möjligt att ansluta den till flera användardatabaser.
slutligen skulle dessa typer av företag behöva sökmotoroptimeringsalternativ eftersom många av dem skulle vilja hittas i Google, Bing och andra sökmotorer (för att sälja de produkter eller tjänster de erbjuder.)
fördelar med SPA för användare
den största fördelen med ensidiga applikationer för slutanvändare är naturligtvis den hastighet med vilken appen laddas samt förmågan att arbeta offline.,
SPA erbjuder en linjär användarupplevelse, vilket innebär att det är lätt att navigera på webbplatsen och förstå var du hittar den här eller den där saken. Till exempel har Saucony SPA en tydlig början, mitten och slutet. Använda UI/UX design, Saucony app utvecklare har använt parallax rullning och övergångar för att göra kunden resan en angenäm.
enkelsidiga applikationer är bra på mobila enheter också, eftersom det mesta, alla användare behöver är att bläddra (tänk på den ändlösa Facebook väggen). Du behöver inte klicka på några länkar, och du bara njuta av rullning.,
fördelar med SPA för företag
När det gäller företag tar applikationsutveckling på en sida vanligtvis mindre tid eftersom samma backend API kan användas för både webben och mobilen. Som ett resultat är informationsflödet strömlinjeformat, och det blir mycket lättare att skapa en fristående inbyggd mobil applikation.
Med tanke på fördelarna med hastighetsoptimering av SPA, kan företag också dra nytta av att användarna skulle vara mer intresserade av att använda en app som är snabb(ergo, köpa något eller bara använda appen oftare.,)
enkelsidig applikationsarkitektur och hur fungerar enkelsidig applikation
hur fungerar enkelsidiga applikationer? Enkelsidig applikationsarkitektur är ganska okomplicerad-den består av klientsidans teknik (på HUSPI förlitar vi oss på React.js, Angular och Vue.js) och serversidan teknik (som vi brukar använda nod.js)
När det gäller hur webbplatsen gör som den presenteras för användaren finns det tre alternativ att välja mellan.,
client-side rendering (CSR)
- webbläsaren skickar en begäran om HTML-fil från servern
- servern svarar snabbt med en enkel HTML-fil med stilar och skript länkade
- användaren ser en tom sida eller någon loader bild medan js körs
- programmet hämtar data, genererar vyer och sprutar in i DOM
- ansökan är klar för användning
detta kan vara ett alternativ för enkla webbplatser, men kom ihåg att rendering av informationen på klientsidan kräver mycket resurser från enheten och kan överbelasta webbläsaren., Som ett resultat kan det här alternativet vara det långsammaste av de tre. Samtidigt, om du har en hög trafficked webbplats, CSR skulle vara bättre eftersom det skulle presentera informationen för användaren utan att behöva prata med servern för mycket.
om du också behöver sociala delningsalternativ, kom ihåg att alla sidor i CSR vanligtvis har samma öppna grafvärden (og:), därför måste du använda antingen SSR eller SSG.,ng (SSR)
- webbläsaren skickar en begäran om HTML-fil från servern
- servern hämtar all nödvändig data, gör programmet och genererar appens HTML-fil i farten
- användaren ser det tillgängliga innehållet
- applikationsramen på en sida är vad som fäster händelser, genererar en virtuell DOM och utför andra åtgärder
- ansökan är klar för användning
serversidan rendering är alternativet vi förlitar oss på på huspi, eftersom det kombinerar både hastigheten på en sida ansökan och inte överbelasta användarens webbläsare, vilket gör appen snabbt.,
statiska Webbplatsgeneratorer (SSG)
- webbläsaren skickar en begäran om HTML-fil från servern
- servern svarar snabbt med en redan förberedd HTML-fil
- användaren ser sidan
- programmet hämtar data, genererar vyer och sprutar in i DOM
- ansökan är klar för användning
bra och snabbt alternativ, men kom ihåg att om du har dynamiskt innehåll på din webbplats, statiska webbplatsgeneratorer skulle inte vara dina bästa vänner eftersom de är orienterade mer på statiska sidor (som du redan kunde ha gissat från namnet.,)
hur man gör enkelsidig applikation med vinkel, reagera.js och Vue.js
När jag skrev den här artikeln har jag konsulterat våra utvecklare för att förstå vad som är världens bästa praxis när det gäller skapandet av en sida som används här på HUSPI.
huspi-utvecklare har försökt och testat många ramar och har olika arbetsbakgrund, men de förenar sig med att säga att det finns tre ramverk för frontend-vinkel, reagera och Vue – och det finns en Huvud (deras favorit) för backend – noden.js., Det finns en handfull andra ramar tillgängliga på marknaden (som Ember eller Knockout), men vi använder dem inte lika mycket.
för att bygga en enkelsidig applikation behöver du Ajax och HTML5 för att bygga responsiva sidor medan vinkel, reagera och Vue är ansvariga för att hantera ”tunga lyft” på klientsidan av ett SPA.
vad ska man välja – reagera, vinkla eller Vue?
Vi har skrivit flera artiklar om ämnet jämförelse mellan dessa ramar., Låt oss dock jämföra dem igen för att se om de har fördelar när det gäller skapande av en sida.
Angular och ensidiga applikationer
Angular är ett JavaScript-ramverk som introducerades av Google tillbaka 2010. Bland de tre alternativen vi jämför är Angular den äldsta, och den är baserad på TypeScript. På grund av TypeScript är Angular ett bra alternativ att använda av stora team av utvecklare och företag som redan använder denna teknik i sina andra produkter.
det är den mest mogna bland ramarna och har ett anständigt antal bidragsgivare på GitHub., Det kan vara svårare när det gäller inlärningskurvan, men samtidigt är det värt det.
bland de kunder som använder Angular för sina ensidiga program är Google (och deras produkter som Gmail och Google Drive) och Wix, så om du väljer att skapa en enda sida program med Angular, du kommer att vara i stort företag.
# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB
Angular community håller på att släppa vinkel 9.0.0 – vad kan man förvänta sig i den nya versionen av Angular?
reagerar.js och enkelsidiga program
React.js är ett JavaScript-bibliotek som skapades 2013 av Facebook., Instagram Facebook använder det i stor utsträckning under hela sin produktlinje, inklusive sådana välkända singelsidapplikationer som Facebook själv, Instagram och WhatsApp. Förutom Facebook använder Uber också React.js bibliotek för sina produkter.
av de tre konkurrenterna har React den mest betydande mängden bidragsgivare på GitHub-över tusen-vilket hjälper till att hålla dig uppdaterad med de olika utmaningarna som utvecklarna möter varje dag.
våra utvecklare här på HUSPI föredrar också React för de projekt vi utvecklar (om det inte finns krav på en annan ram)., Det är både lätt och mogen nog att testas och försökas och hittas värdig.
React är det rätta valet för dem som just börjat med JavaScript frontend ramar samt startups och utvecklare som gillar att vara flexibel. React erbjuder bra integrationsalternativ med olika andra tekniker och ramar, vilket är till stor hjälp när du arbetar med ett projekt med ett stort ekosystem.
# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB
Vue.js och enkelsidiga program
Vue är den yngsta av de tre, skapad 2014 av en ex-Google anställd Yuxi (Evan) du., Även om inget stort företag stöder sin utveckling har Vue lyckats öka i popularitet. För närvarande använder sådana företag som GitLab, Baidu och Alibaba Vue.js för deras behov.
om du föredrar enkelhet och flexibilitet i din front-end ramar, då Vue är ett bra alternativ. Dessutom är det den mest lätta av alla.
# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB
nyligen skrev vi en artikel om React.js mot Vue.JS
enkelsidiga applikationer och ASP.NET (Blazor)
vi bestämde oss för att lägga till ASP.NET alternativ till listan över ramar och tekniker för ensidiga applikationer., Det finns en ny grabb i kvarteret Blazor. Det är en .NET framework som använder C#/Razor-och HTML-kod som körs i webbläsaren med WebAssembly, enligt GitHub repository.
Microsoft tillkännagav lanseringen av denna ram tidigare i 2019 och för närvarande ser det ut som version 1.0 är klar. Detta seriösa stöd från ett stort företag är en stor fördel med Blazor eftersom det omedelbart gör detta Open-source-instrument till en del av 60,000 + OSS-bidragsgivarnas gemenskap med 3,700 + OSS-bidragsgivare.,
Blazor är ett bekvämt verktyg eftersom det inte finns något behov av TypeScript eller JavaScript, kan du skriva all logik i C#. Som sagt, Blazor erbjuder interoperabilitet med JavaScript API: er och bibliotek, så om ditt ekosystem är stort och består av JS bibliotek, du är inte förlorat i övergången.
. Net Blazor erbjuder också två olika alternativ – klient-endast Blazor och serversidan Blazor. Den senare ska skickas med. Net Core 3.0.
betyder det att Blazor kommer att döda vinkel, reagera eller Vue? Vi tror inte det. Det är dock något att hålla ett öga på.
För SPA användning .,NET, Du kan också använda ASP.NET kärna och ASP.NET MVC. Hur man skapar en enda sida ansökan i ASP.NET MVC? Du ställer in den på backend för att tjäna HTML på frontend.
# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+
slutsats
Med tanke på ökningen av mobila enheter och en on-the-go livsstil, enkelsidiga applikationer är bra. Oavsett om ditt företag skulle gå för ett SPA eller en mpa – det är mer av en fråga för dina affärsanalytiker och krav.,
på HUSPI har vi affärsanalytiker i teamet som kan hjälpa till med att förstå och definiera projektets tekniska behov (och utvecklare som kan bygga arkitekturen och själva projektet från grunden).