Vi er så vant til at være online, og med en mobiltelefon med vores hænder, at vi ofte ikke engang stoppe med at tænke over, hvad slags teknologi, der hjælper os til at køre denne eller den pågældende app. Normalt er det ikke et problem – vi tænker ikke på elektriciteten, når vi tænder lysene., Men når du står over for beslutningen om at oprette en app til din virksomhed, så er det befordrende at forstå, hvad betyder SPA (single page application), og hvordan er det anderledes end Multi-Side applikationer (MPA).

I denne artikel, vil vi tale om, hvad der er Enkelt Side Ansøgning (SPA), hvilke fordele har SPA bringe til brugere og virksomheder, og hvordan fungerer det med SEO, hvad er dens fordele og ulemper, og endelig, hvordan SPA arbejder med sådanne teknologier, som Blazor, Kantede, Reagere.J. S. og Vue.js.,

======================

I dette nummer:

• Single Side Anvendelsen Definition
• Single Side Anvendelse Fordele
• Single Side Anvendelsen Ulemper
• Single Side Ansøgning Migration Spørgsmål
• Fordele i SPA for Brugere
• Fordele i SPA for Virksomheder
• Single Side Application Architecture
• SPA-og Kantede, Reagere.js, Vue.js, og .,NET

======================

Hvad Gør Enkelt Side-Program Betyder, og Hvorfor har Vi Brug for en Enkelt Side Ansøgning

En enkelt side-program er et program, som ikke behøver at genindlæse siden ved dens anvendelse, og arbejder i en browser. Tænk på de apps, du bruger dagligt: Facebook, Google Maps, Gmail, t .itter, Google Drive eller endda GitHub. Alle disse er eksempler på et SPA.en af de bedste fordele ved en korrekt konfigureret SPA er brugeroplevelsen (U.), hvor brugeren nyder et naturligt miljø i appen uden at skulle vente på, at siden genindlæses og andre ting., Du forbliver på samme side, som er drevet af JavaScript programmeringssprog.

Før vi går videre, er der tre forkortelser, som du kan se i denne artikel:

• SPA – single-side program (som vi har nævnt ovenfor)
• MPA – multi-page-applikation (en traditionel app, der indlæses nye sider, når du klikker på et link)
• PWA – progressive web-applikation (en hjemmeside, der er bygget ved hjælp af JavaScript, eller dens rammer og kan fungere som en app, dvs, tilføje den til din mobiltelefonhjemmeside som en app)

fordele ved Enkeltsideansøgning: Hvorfor bruge Enkeltsideprogram?

den største fordel ved enkeltsidede applikationer er dens hastighed. De fleste ressourcer SPA-behov (HTML + CSS + Scripts) indlæses ved lanceringen af appen og behøver ikke genindlæses under brugen. Det eneste, der ændrer sig, er de data, der overføres til og fra serveren. Som et resultat, ansøgningen er meget lydhør over for brugerens forespørgsler og behøver ikke at vente på klient-server kommunikation hele tiden.,

Talrige undersøgelser af Google og de vigtigste resultater af selskaber som Amazon og Wal*Mart vis, at hvis en side tager mere end 200 millisekunder at hente, det har potentiale til at ødelægge din forretning, eller i det mindste koste dig mange penge. For eksempel siger AMA .on, at 1 sekund af yderligere forsinkelse i sidebelastning koster dem 1% af salget (som i betragtning af Ama .ons salgsbeløb er 1, 6 milliarder dollars om året.)

fra en udviklers synspunkt strømlines og optimeres oprettelsen af en sådan app., Du behøver ikke at skrive kode for at gengive siderne på serveren. Du behøver ikke engang virkelig en server til at begynde udviklingsprocessen. Du kan starte fra en fil for at komme i gang. Desuden kan udvikleren helt genbruge den samme backend server-side kode og effektiv API til webebapplikationen og en indbygget mobilapp. enkeltsidede applikationer er fremragende, når du har et team af udviklere, der arbejder sammen., Det giver backend udviklere til at fokusere på API, mens frontend udviklere kan være mere opmærksomme på at skabe den bedste brugeroplevelse baseret på backend API og gennemføre en smuk brugergrænseflade.

fejlfinding af en enkeltsidet applikation er også let at bruge Chrome-bro .seren, da den har specielle værktøjer til vinkel Batarang og React (de teknologier, der bruges til kurbade.) Ved hjælp af en konsol kan du overvåge netværksoperationer samt undersøge forskellige sideelementer og tilhørende data.,

Caching proces er også ganske effektiv – programmet sender kun requestn anmodning, gemmer alle transmitterede data, og kan bruge disse data. Dette er især vigtigt på tidspunkter, hvor brugeren kan have dårlig forbindelse – han / hun kan stadig bruge din app, da den er synkroniseret med serveren, når forbindelsen forbedres.

Vi har nævnt Progressive aboveeb Apps (p .a) ovenfor, og kurbade kan nemt omdannes til en p .a. Dette gør det muligt for udviklerne at levere lokal caching og tilbyde offline-oplevelsen til klienter og brugere.,

ulemper ved enkelt side-applikation: hvorfor ikke en enkelt side-applikation?

På trods af alle fordelene ved enkeltsidede applikationer er intet nogensinde perfekt. Lad os tjekke de tidspunkter, hvor spaen ikke kan være en ideel løsning.

Hvad mener vi med enkelt side ansøgning ulemper?

enkeltsidede applikationer lægger en mere betydelig belastning på bro .seren. For eksempel, hvis dine brugere har enheder med lav effekt, vil de have en dårlig appoplevelse med hensyn til hastighed.

yderligere problemer med JavaScript opstår, fordi du skal sørge for, at der ikke er nogen hukommelseslækager., Da appen kan køre i lang tid – timer ad gangen (i modsætning til MPA, hvor levetiden på en side blev talt i minutter), skal du sørge for, at din SPA ikke bruger mere hukommelse, end den har brug for. Ellers vil fornøjelsen ved hurtige indlæsningssider blive ødelagt af trægheden af utilgængelig hukommelse på brugerens enhed.en yderligere ulempe ved JavaScript er, at brugerne simpelthen kan have det deaktiveret på deres enheder, og så skal du tænke på yderligere måder, hvordan de kan få adgang til oplysningerne på dit websiteebsted eller din app uden JavaScript.,

en anden kritisk ting at huske om at bruge eller opbygge en SPA er sikkerhed. På grund af cross-site scripting (.ss) og det faktum, at ingen nye sider er indlæst, hackere kan få adgang til dit websiteebsted og injicere nye scripts på klientsiden.

Hvis du overvejer at opbygge en enkeltsidet applikation til din virksomhed, skal du sørge for at tage de nødvendige forholdsregler for ikke at lade dette ske.

et andet sikkerhedsproblem er privatlivets fred for følsomme data. Den oprindelige sideindlæsning bør ikke indeholde oplysninger, der ikke burde være tilgængelige for alle brugere., Da hele spaen indlæses med det samme til brugerens enhed, kan du ved et uheld give væk data, der skal være bag et login eller slet ikke tilgængelige.

SEO-optimering til applikationer på en side

SEO-optimering er vanskelig, når du har en applikation på en enkelt side, hvorfor vi besluttede at dedikere et separat afsnit til det i SPA-ulemperne.

det er mere sikkert at bruge kurbade, når du ikke er afhængig af søgemaskineoptimering (SEO) så meget, for eksempel hvis din app kun kan fås adgang via et login.,

Hvis du har en blog, er det på den anden side sværere for søgemaskinerne at indeksere dit SPA-websiteebsted i modsætning til traditionelle servergengivne sider. Dette skyldes, at URL ‘ en ikke rigtig ændrer sig, og forskellige sider normalt ikke har deres URL-adresser.

derfor er vores råd til dig: hvis du ikke vil gider med URL-indstillingerne, skal du vælge en ramme, der understøtter server-side rendering (SSR). Derudover skal du ikke bruge iframe windowsindo .s, bruge statiske Urebadresser og optimere scripts på din side for at fremskynde dem., Endelig skal du sørge for, at dine sider har HTML5 til Google CRA .ler for at få adgang til dem.

Du skal også være særlig opmærksom på servermeddelelserne, især 200-og 404-fejlene.

en Enkelt Side Anvendelsen migrationsspørgsmål

Single-side applikationer lyd, som om de var sendt fra himlen for at forenkle brugernes oplevelse af hjemmesiden. Det er hurtigt og bekvemt; det er næsten perfekt. Er det virkelig sådan?,

Når du tænker på at migrere til enkeltsideprogrammet fra en MPA, skal du stoppe og overveje fordele og ulemper (som vi har nævnt ovenfor.)

Hvornår skal du bruge en SPA

Du kan spørge, “Hvornår skal jeg bruge en enkelt side program?”Når du har en virksomhed eller et personligt websiteebsted, der har brug for en dynamisk platform og lille datavolumen, er applikationen på singlen side en god id.. Det er også en god mulighed, hvis du planlægger at udvikle en mobilapp i fremtiden, da backend API som nævnt ovenfor kan bruges til både webeb-og mobilapps.,

den største ulempe er SEO, men arkitekturen er velegnet til soft .are-as-a-Service (SaaS) platforme, lukkede samfund og sociale netværk (hvorfor Facebook bruger det). Årsagen til dette er, at disse .ebsteder ikke har brug for optimering til søgning på Google.

hvornår man skal bruge en MPA

store virksomheder med en bred vifte af tjenester og produkter vil drage fordel af en mere traditionel flersidet applikation. Sådanne virksomheder omfatter online butikker, firma sitesebsteder, kataloger og markedspladser., Håndtering af en sådan applikation ville også være meget lettere, da det er muligt at forbinde det til flere brugerdatabaser.

endelig vil disse typer virksomheder have brug for søgemaskineoptimeringsmuligheder, da mange af dem ønsker at blive fundet i Google, Bing og andre søgemaskiner (for at sælge de produkter eller tjenester, de tilbyder.)

fordele ved SPA for brugere

den største fordel ved enkeltsidede applikationer til slutbrugere er naturligvis den hastighed, hvorpå appen indlæses, samt evnen til at arbejde offline.,

SPA tilbyder en lineær brugeroplevelse, hvilket betyder, at det er let at navigere på websiteebstedet og forstå, hvor man finder denne eller den ting. For eksempel har Saucony SPA en klar begyndelse, midten og slutningen. Ved hjælp af UI/U. – design har Saucony-appudviklerne brugt paralla SC-rulning og overgange for at gøre kunderejsen til en behagelig. enkeltsidede applikationer er også gode på mobile enheder, da det meste af tiden er alle brugerne nødt til at rulle (tænk på den uendelige Facebook-væg). Du behøver ikke at klikke på nogen links, og du bare nyde rulning.,

fordele ved SPA for virksomheder

Når det kommer til virksomheder, single-side applikationsudvikling tager normalt mindre tid, da den samme backend API kan bruges til både Internettet og mobil. Som følge heraf er informationsstrømmen strømlinet, og det bliver meget lettere at oprette en selvstændig indbygget mobilapplikation.

i betragtning af fordelene ved hastighedsoptimering af spaen kan virksomheder også drage fordel, fordi brugerne ville være mere interesserede i at bruge en app, der er hurtig (ergo, købe noget eller bare bruge appen oftere.,)

single Page Application Architecture og hvordan fungerer Single Page Application

hvordan fungerer single-page applications? Enkeltsidet applikationsarkitektur er ret ligetil – den består af klientsiden teknologier (hos HUSPI er vi afhængige af React.js, kantede, og Vue.js) og server-side teknologier (som vi normalt bruger Node.js)

Med hensyn til den måde, siteebstedet gør, som det præsenteres for brugeren, er der tre muligheder at vælge imellem.,

Client-side rendering (CSR)

1. browseren sender en forespørgsel til HTML filen fra serveren
2. serveren reagerer hurtigt med en simpel HTML-fil med stilarter og scripts, der er knyttet
3. brugeren ser en tom side eller en loader billedet, mens js er fuldbyrdende
4. programmet henter data, genererer udsigt, og sprøjter ind DOM
5. Programmet er klar til brug

Dette kunne være en løsning for simpel hjemmesider, men husk på, at gøre oplysninger om client-side kræver en masse ressourcer fra enheden, og det kan overbelaste browser., Som et resultat kan denne mulighed være den langsomste af de tre. På samme tid, hvis du har et websiteebsted med høj trafik, ville CSR være bedre, da det ville præsentere informationen for brugeren uden at skulle tale med serveren for meget.

Hvis du har brug for sociale delingsindstillinger, skal du også huske, at alle sider i CSR normalt har de samme open graph (og:) – værdier, derfor skal du bruge enten SSR eller SSG.,ng (SSR)

1. browseren sender en forespørgsel til HTML filen fra serveren
2. serveren henter alle nødvendige data, gør anvendelsen, og genererer app ‘ s HTML-filen
3. brugeren ser det tilgængelige indhold
4. single-side application framework er, hvad lægger begivenheder, skaber et virtuelt DOM, og udfører andre handlinger
5. Programmet er klar til brug

Server-side rendering er den mulighed, vi stole på HUSPI, fordi det kombinerer både den hastighed af en enkelt side, anvendelse og ikke overbelaste brugerens browser, som gør app ‘ en hurtigt.,

Statisk Site Generatorer (SSG)

1. browseren sender en forespørgsel til HTML filen fra serveren
2. serveren reagerer hurtigt med en allerede udarbejdet en HTML-fil
3. brugeren ser den side
4. programmet henter data, genererer udsigt, og sprøjter ind DOM
5. Programmet er klar til brug

en God og hurtig løsning, men husk, at hvis du har dynamisk indhold på din hjemmeside, statisk site generatorer ville ikke være dit bedste venner, fordi de er orienteret mere på statiske sider (som du kan har allerede gættet fra navnet.,)

Sådan Gør enkelt side ansøgning ved hjælp af vinkel, reagere.J. S. og Vue.js

da jeg skrev denne artikel, har jeg konsulteret vores udviklere for at forstå, hvad der er verdens bedste praksis med hensyn til oprettelse af enkeltsider, der bruges her på HUSPI.

HUSPI udviklerne har forsøgt og testet mange rammer og har forskellige baggrunde, men de forener sig i at sige, at der er top-tre rammer for frontend – Kantede, Reagere, og Vue – og der er en main (deres favorit) til backend – Node.js., Der er en håndfuld andre rammer tilgængelige på markedet (som Ember eller Knockout), men vi bruger dem ikke så meget.

for at opbygge et enkeltsidet program skal du bruge AJA.og HTML5 til at opbygge responsive sider, mens Angular, React og Vue er ansvarlige for at håndtere “heavy lifting” på klientsiden af en SPA.

Hvad skal man vælge – React, Angular eller Vue?

Vi har skrevet flere artikler om emnet sammenligning mellem disse rammer., Lad os dog sammenligne dem igen for at se, om de har fordele med hensyn til oprettelse af enkeltsider.

vinkel-og Enkeltsideprogrammer

vinkel er en JavaScript-ramme, der blev introduceret af Google tilbage i 2010. Blandt de tre muligheder, vi sammenligner, er Angular den ældste, og den er baseret på TypeScript. På grund af TypeScript er Angular en fantastisk mulighed at bruge af store teams af udviklere og virksomheder, der allerede bruger denne teknologi i deres andre produkter.

det er den mest modne blandt rammerne og har et anstændigt antal bidragydere på GitHub., Det kan være sværere med hensyn til læringskurven, men samtidig er det det værd.

blandt de klienter, der bruger Angular til deres enkeltsidede applikationer, er Google (og deres produkter som Gmail og Google Drive) og .i., så hvis du beslutter dig for at oprette et enkeltsideprogram ved hjælp af Angular, vil du være i godt selskab.

# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB

Angular community er ved at frigive Angular 9.0.0 – hvad kan man forvente i den nye version af Angular?

reagere.js og enkeltsidede applikationer

React.js er et JavaScript-bibliotek, der blev oprettet i 2013 af Facebook., Facebook Instagram, Instagram og Whathatsapp bruger det i vid udstrækning i hele deres produktlinje, herunder sådanne velkendte single-page applikationer som Facebook selv, Instagram og .hatsapp. Udover Facebook bruger Uber også React.js bibliotek for deres produkter.

ud af de tre konkurrenter har React den mest betydelige mængde bidragydere på GitHub – over tusind – hvilket hjælper med at holde sig ajour med de forskellige udfordringer, som udviklere står over for hver dag.

vores udviklere her på HUSPI foretrækker også React for de projekter, vi udvikler (medmindre der er krav til en anden ramme)., Det er både let og modent nok til at blive testet og prøvet og blive fundet værdig.React er det rigtige valg for dem, der lige er kommet i gang med JavaScript frontend frame .orks samt startups og udviklere, der kan lide at være fleksible. React tilbyder gode integrationsmuligheder med forskellige andre teknologier og rammer, hvilket er meget nyttigt, når du arbejder på et projekt med et stort økosystem.

# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB

Vue.js og Single-Side applikationer

Vue er den yngste af de tre, skabt i 2014 af en e.-Google medarbejder Yu .i (Evan) du., Selvom intet stort selskab støtter sin udvikling, har Vue formået at stige i popularitet. I øjeblikket bruger sådanne virksomheder som GitLab, Baidu og Alibaba Vue.js til deres behov.

Hvis du foretrækker enkelhed og fleksibilitet i dine front-end-rammer, er Vue en god mulighed. Desuden er det den mest lette af alle.

# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB

for nylig skrev vi en artikel om React.js vs. Vue.js

enkeltsidede applikationer og ASP.NET (bla decidedor)

Vi besluttede at tilføje ASP.NET mulighed for at listen over rammer og teknologier til enkeltsidede applikationer., Der er en ny dreng på blokken kaldet bla .or. Det er en .NET framework, der bruger C#/Skraber og HTML-kode, der kører i browseren med WebAssembly, i henhold til GitHub repository.

Microsoft annoncerede udgivelsen af denne ramme tidligere i 2019, og i øjeblikket ser det ud til, at version 1.0 er klar. Denne seriøse opbakning fra et stort selskab er en stor fordel ved bla .or, fordi det straks gør dette open source-instrument til en del af 60,000+ oss-bidragydernes samfund med 3,700+ oss-bidragydere.,

bla .or er et praktisk værktøj, fordi der ikke er behov for TypeScript eller JavaScript, du kan skrive al logik i C#. Det sagt, Blazor tilbyder interoperabilitet med JavaScript Api ‘ er og biblioteker, så hvis din økosystem er stort og består af JS biblioteker, du ikke tabt i overgangen.

. net bla .or tilbyder også to forskellige muligheder – klient-kun bla .or og server-side bla .or. Sidstnævnte skal sendes med. net Core 3.0.

betyder det, at bla ?or vil dræbe vinkel, reagere eller Vue? Det tror vi ikke. Det er dog noget at holde øje med.

til SPA brug .,NET, kan du også bruge ASP.NET kerne og ASP.NET MVC. Sådan oprettes enkelt side ansøgning i ASP.NET MVC? Du sætter den op på backend til at tjene HTML på frontend.

# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+

konklusion

i betragtning af stigningen i mobile enheder og en on-the-go livsstil er enkeltsidede applikationer gode. Uanset om din virksomhed ville gå til en SPA eller en MPA – det er mere et spørgsmål til dine forretningsanalytikere og krav.,hos HUSPI har vi forretningsanalytikere på teamet, der kan hjælpe med at forstå og definere projektets tekniske behov (og udviklere, der kan bygge arkitekturen og selve projektet fra bunden).