Forfatter: Zee Gimon
Vi er så vant til å være online med en mobiltelefon med våre hender det ofte vi ikke stoppe å tenke på hva slags teknologi hjelper oss til å drive dette, eller at appen. Vanligvis, det er ikke et problem – vi trenger ikke tenke på elektrisitet når vi slår på lyset., Imidlertid, når du står overfor beslutningen om å lage en app for din bedrift, så er det som bidrar til å forstå hva som gjør SPA (single side-programmet) betyr og hvordan er det forskjellig fra Multi-Side-Programmer (MPA).
I denne artikkelen vil vi snakke om hva som er Enkelt Side-Programmet (SPA), hvilke fordeler har SPA bringe til brukere og bedrifter, og hvordan fungerer det med SEO, hva er dens fordeler og ulemper, og til slutt, hvordan SPA arbeider med slike teknologier som Blazor, Kantete, til å Reagere.js, og Vue.js.,
======================
I denne saken:
- Enkelt Side Søknaden Definisjon
- Enkelt Side Søknaden Fordeler
- Enkelt Side Søknaden Ulemper
- Enkelt Side Søknaden migrasjonsspørsmål
- Fordeler med SPA for Brukere
- Fordeler med SPA for Bedrifter
- Enkelt Side Søknaden Arkitektur
- SPA og Kantete, til å Reagere.js, Vue.js, og .,NET
======================
Hva Betyr Enkelt Side-Programmet Mener og Hvorfor Trenger Vi Enkelt Side Søknaden
En enkeltside-programmet er en app som ikke trenger å laste inn siden på nytt under bruk og fungerer i en nettleser. Tenk på de appene som du bruker daglig: Facebook, Google Maps, Gmail, Twitter, Google Disk, eller til og med GitHub. Alle disse er eksempler på et SPA.
En av de beste fordelene med et riktig konfigurert SPA er det brukeropplevelse (UX), der brukeren har et naturlig miljø av appen uten å måtte vente på at siden lastes inn på nytt og andre ting., Du forblir på samme side, som er drevet av JavaScript programmeringsspråk.
Før vi går videre, det er tre forkortelser som du vil se i denne artikkelen:
- SPA – single-side-programmet (som vi har nevnt ovenfor)
- MPA – multi-side-programmet (en tradisjonell app som lastes inn nye sider når du klikker på en lenke)
- PWA – progressive web-applikasjon (en nettside som er bygget ved hjelp av JavaScript eller dets rammer og kan fungere som en app, dvs., du kan for eksempel legge det til din mobiltelefon hjemmeside som en app)
Enkelt Side Program Fordeler: Hvorfor Bruke Én Side Søknaden?
Den største fordelen med single-side-programmer er dens hastighet. De fleste ressurser SPA behov (HTML + CSS + Skript) er lagt ved lanseringen av app, og du trenger ikke å lastes inn på nytt under bruk. Det eneste som endrer seg er de data som overføres til og fra serveren. Som et resultat, programmet er svært lydhør overfor brukerens spørsmål, og ikke må vente for klient-server-kommunikasjon hele tiden.,
Tallrike studier av Google og viktige funn av selskaper som Amazon og Wal*Mart viser at hvis en side som tar mer enn 200 millisekunder å laste, den har potensial til å ødelegge din virksomhet, eller i det minste koste deg mye penger. For eksempel Amazon sier at 1 sekund av ekstra forsinkelse på siden legg koster dem 1% av omsetningen (som, med tanke på Amazon ‘ s mengden av salg, er $1,6 milliarder kroner per år.)
Fra en utviklers synspunkt, etablering av en slik app er strømlinjeformet og optimalisert., Du trenger ikke å skrive koden til å vise sider på serveren. Du trenger ikke engang trenger virkelig en server for å starte en utviklingsprosess. Du kan sparke fra en fil for å komme i gang. I tillegg, utvikleren kan helt gjenbruk samme backend server-side kode og effektiv API for web-programmet og en innfødt mobile app.
Single-side-programmer er utmerket når du har et team av utviklere som jobber sammen., Det kan backend-utviklere å fokusere på API, mens frontend-utviklere kan betale mer oppmerksomhet til å skape den beste brukeropplevelsen basert på backend API og implementere en vakker brukergrensesnitt.
Debugging en enkeltside-programmet er også enkelt å bruke Chrome-nettleseren, siden den har spesielle verktøy for Kantete Batarang og Reagere (teknologier som brukes for SPAs.) Ved hjelp av en konsoll, kan du overvåke nettverk samt undersøke ulike side elementer og tilhørende data.,
Caching prosessen er også ganske effektivt – programmet sender bare en forespørsel, lagrer alle data som overføres, og kan bruke disse dataene. Dette er spesielt viktig i perioder der brukeren kan ha dårlig tilkobling – s/han kan fortsatt bruke appen siden den er synkronisert med serveren når tilkoblingen blir bedre.
Vi har nevnt Progressive Web Apps (PWA) ovenfor, og SPAs kan lett bli forvandlet til en PWA. I sin tur, dette gjør det mulig for utviklere å gi lokal caching og tilbyr frakoblet erfaring til kunder og brukere.,
Enkelt Side Søknaden Ulemper: Hvorfor Ikke en Eneste Side-Programmet?
til Tross for alle fordelene på én side programmer, ingenting er perfekt. La oss sjekke ut de gangene SPA-kan ikke være en ideell løsning.
Hva mener vi med én side søknaden ulemper?
Single-side-programmer sette en mer betydelig belastning på nettleseren. For eksempel, hvis brukerne har lav effekt enheter, vil de ha en dårlig app erfaring i form av fart.
Flere problemer med JavaScript oppstår fordi du har til å sørge for at det er ingen minnelekkasjer., Siden appen kan kjøre i lang tid – timer av gangen (i motsetning til MPA, hvor levetiden på en side ble talt i minutter), må du sørge for at ditt SPA ikke bruker mer minne enn det er behov for. Ellers, til glede for rask lasting av sider, vil bli ødelagt av treghet i utilgjengelig minne på brukerens enhet.
En mer ulempe JavaScript er at brukerne enkelt kan få den deaktivert på sine enheter, og så du trenger å tenke på andre måter for hvordan de kan få tilgang til informasjonen på nettstedet ditt eller appen din uten JavaScript.,
andre viktige ting å huske om å bruke eller bygge et SPA, er sikkerhet. På grunn av cross-site scripting (XSS) og det faktum at ingen nye sider er lagt inn, kan hackere få tilgang til ditt nettsted og injisere nye script på klientsiden.
Derfor, hvis du tenker på å bygge en single-side applikasjon for din bedrift, må du ta de nødvendige forholdsregler for ikke å la dette skje.
et Annet sikkerhetsproblem, er personvern av sensitive data. Den første siden lasten skal ikke inneholde informasjon som ikke bør være tilgjengelig for alle brukere., Siden hele SPA laster rett bort til brukerens enhet, du kan ved et uhell gi bort data som skal være bak en pålogging eller ikke er tilgjengelig til alle.
SEO Optimalisering for Enkelt-Side-Programmer
SEO optimalisering er vanskelig når du har en single-side applikasjon, som er grunnen til at vi bestemte oss for å vie et eget kapittel til det i SPA Ulemper.
Det er tryggere å bruke SPAs når du ikke stole på search engine optimization (SEO) så mye, for eksempel, hvis din app kan bare nås via en logg.,
Hvis du har en blogg, på den annen side, er det vanskeligere for søkemotorer til å indeksere ditt SPA nettstedet i motsetning til tradisjonell server-gjengitt på sidene. Dette er fordi den URL egentlig ikke endre, og ulike sider ikke vanligvis har sine URL-adresser.
Derfor er vårt råd til deg: hvis du ikke ønsker å bry seg med URL-innstillinger, velger du et rammeverk som støtter server-side rendering (SSR). I tillegg må du ikke bruke iframe windows, kan du bruke statiske Nettadresser, og optimalisere skript på siden til å fremskynde dem., Til slutt, sørg for at sidene dine har HTML5 for Google robotsøkeprogrammet å være i stand til å få tilgang til dem.
Du bør også betale spesiell oppmerksomhet til serveren, meldinger, spesielt 200 og 404-feil.
Enkelt Side Søknaden migrasjonsspørsmål
Single-side-programmer høres ut som de var sendt fra himmelen for å forenkle brukernes erfaring med nettstedet. Det er raskt og praktisk; det er nesten perfekt. Er det virkelig slik?,
Når du tenker om å migrere til single-side-programmet fra en MPA, du trenger å stoppe opp og vurdere fordeler og ulemper (som vi har nevnt ovenfor.)
Når skal du Bruke et SPA
Du kanskje spørre, «Når skal jeg bruke en enkelt side søknaden?»Når du har en bedrift eller personlig nettsted som trenger en dynamisk plattform og små data volum, single-side-programmet er en god idé. Det er også et flott alternativ hvis du planlegger å utvikle en mobil applikasjon i fremtiden, siden, som vi har nevnt ovenfor, backend-API kan brukes for både web og mobile apps.,
Den viktigste ulempen er SEO, men arkitekturen er egnet for Software-as-a-Service (SaaS) – plattformer, lukket samfunn, og sosiale nettverk (som er grunnen til at Facebook bruker det). Grunnen til dette er at disse områdene ikke trenger optimalisering for søk på Google.
Når du skal Bruke en MPA
Store selskaper med et bredt spekter av tjenester og produkter vil dra nytte av en mer tradisjonell multi-side-programmet. Slike virksomheter inkluderer nettbutikker, firma nettsteder, kataloger, og markedsplasser., Administrere et slikt program vil også være mye lettere siden det er mulig å koble til flere databaser bruker.
til Slutt, disse typer selskaper må search engine optimization valg siden mange av dem ønsker å bli funnet i Google, Bing og andre søkemotorer (for å selge produktene eller tjenestene de tilbyr.)
Fordeler med SPA for Brukere
Den største fordelen med single-side-programmer for sluttbrukere er, selvfølgelig, den hastigheten som app laster, så vel som evne til å arbeide i frakoblet modus.,
SPA tilbyr en lineær brukeropplevelse, noe som betyr at det er enkelt å navigere på nettstedet og forstå hvor finner du dette, eller at ting. For eksempel, Saucony SPA har en klar begynnelse, midt og slutt. Ved å bruke UI/UX-design, Saucony app utviklere har brukt parallax scrolling og overganger for å gjøre kunden reise en hyggelig en.
Single-side programmer er gode på mobile enheter også, siden mesteparten av tiden, er alle brukere behøver å gjøre er å bla (tenk på de endeløse Facebook-veggen). Du trenger ikke å klikke på lenker, og du bare nyte å rulle.,
Fordeler med SPA for Bedrifter
Når det kommer til bedrifter, single-side applikasjon utvikling tar vanligvis mindre tid siden samme backend API kan brukes for både web og mobil. Som et resultat, informasjonsflyt er strømlinjeformet, og det blir mye enklere å lage en frittstående innfødte mobil applikasjon.
Vurderer fordelene i hastighet optimalisering av SPA, bedrifter kan også ha nytte fordi brukerne ville være mer interessert i å bruke en app som er rask (ergo, kjøpe noe eller bare bruke appen oftere.,)
Enkelt Side Søknaden Arkitektur og Hvordan Gjør du Enkelt Side Søknaden Arbeid
Hvordan gjøre single-side-programmer fungerer? Single-side søknaden arkitektur er ganske grei – den består av klient-side technologies (på HUSPI, er vi avhengig av å Reagere.js, Kantete, og Vue.js) og server-side teknologier (som vi vanligvis bruker Node.js)
I form av veien nettstedet gjengir så det er presentert til brukeren, det er tre alternativer å velge mellom.,
Klient-side rendering (CSR)
- nettleseren sender en forespørsel til HTML-fil fra serveren
- serveren reagerer raskt med et enkelt HTML-fil med maler og skript knyttet
- brukeren ser på en tom side eller noen loader bildet mens js utfører
- programmet henter data, genererer utsikt, og injiserer i DOM
- Programmet er klar for bruk
Dette kan være et alternativ for enkle hjemmesider, men husk at gjengivelse av informasjonen på klient-siden krever mye ressurser fra enheten og kan overbelaste nettleser., Som et resultat, er dette alternativet kan være den tregeste av de tre. Samtidig, hvis du har en høyt trafikkert nettsted, CSR ville være bedre siden det ville presentere informasjon til brukeren uten å måtte snakke til serveren for mye.
Også, hvis du har behov for sosial deling valg, husk at alle sider i CSR har vanligvis samme åpne graf (og:) verdier, derfor må du bruke enten SSR eller SSGS.,ng (SSR)
- nettleseren sender en forespørsel til HTML-fil fra serveren
- serveren henter inn alle nødvendige data, gjør programmet, og genererer app HTML-fil på fly
- brukeren ser innhold som er tilgjengelig
- single-side application framework er hva legger hendelser, genererer en virtuell DOM, og utfører andre handlinger
- Programmet er klar for bruk
Server-side gjengivelsen er alternativet vi stole på HUSPI, fordi den kombinerer både hastigheten på én side-programmet og ikke legg for mye papir i brukerens nettleser, noe som gjør appen fort.,
Statisk side Generatorer (SSGS)
- nettleseren sender en forespørsel til HTML-fil fra serveren
- serveren reagerer raskt med et allerede forberedt HTML-fil
- brukeren ser siden som
- programmet henter data, genererer utsikt, og injiserer i DOM
- Programmet er klar for bruk
God og rask alternativ, men husk at hvis du har en dynamisk innhold på nettstedet ditt, statisk side generatorer ville ikke være dine beste venner fordi de er orientert mer på statiske sider (som du allerede har gjettet fra navnet.,)
Hvordan å Gjøre det Enkelt Side-Program ved Hjelp av Kantete, til å Reagere.js, og Vue.js
Som jeg skrev denne artikkelen, jeg har konsultert med våre utviklere til å forstå hva som er verdens beste praksis i form av enkelt-side søknaden skapelsen som er brukt her på HUSPI.
HUSPI utviklere har prøvd og testet en rekke rammer og har ulike arbeid bakgrunn, men de forener seg med å si at det er topp-tre rammer for frontend – Kantete, Reagere, og Vue – og det er en viktigste (deres favoritt) for backend – Node.js., Det er en håndfull andre rammer som er tilgjengelige på markedet (som Ember eller Knockout), men vi trenger ikke bruke dem så mye.
for Å bygge en enkeltside-programmet, trenger du AJAX og HTML5 for å bygge responsive sider, mens Kantete, Reagere, og Vue er ansvarlig for håndtering av den «tunge løft» på klient-siden av et SPA.
Hva du skal velge – Reagere, Kantete, eller Vue?
Vi har skrevet flere artikler om emnet av sammenligningen mellom disse rammene., Men, la oss sammenligne dem igjen for å se om de har fordeler i form av enkelt-side søknaden skapelsen.
Kantete og Single-Side-Programmer
Kantete er et JavaScript-rammeverk, som ble introdusert av Google tilbake i 2010. Blant de tre alternativene vi sammenligner, Kantete er den eldste, og det er basert på maskinskrevet kopi. På grunn av maskinskrevet kopi, Kantete er et flott alternativ til bruk av et stort team av utviklere og selskaper som allerede er i bruk denne teknologien i sine andre produkter.
Det er en av de mest modne blant de rammer og har en anstendig antall bidragsytere på GitHub., Det kan være vanskeligere i form av læringskurven, men på samme tid, det er verdt det.
Blant de klienter som bruker Kantete for sine Single-Side Applikasjoner er Google (og deres produkter, som for eksempel Gmail og Google Drive) og Wi, så hvis du bestemmer deg for å lage en enkelt side-program ved hjelp av Kantete, vil du være i store selskap.
# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB
Kantete samfunnet er i ferd med å løsne den Kantete 9.0.0 – hva du kan forvente i den nye versjonen av Kantete?
Reagere.js og Single-Side-Programmer
Reagere.js er et JavaScript-bibliotek som ble opprettet i 2013 av Facebook., De bruker den flittig gjennom hele sin produktlinje, inkludert slike kjente enkelt-side-programmer som Facebook selv, Instagram, og WhatsApp. I tillegg til Facebook, Uber bruker også Reagere.js-bibliotek for sine produkter.
Ut av de tre konkurrentene, Reagere har mest betydelig mengde bidragsytere på GitHub – over tusen – som bidrar til å holde deg oppdatert med de ulike utfordringene utviklere ansiktet hver dag.
Våre utviklere her på HUSPI foretrekker også Reagere for de prosjekter vi utvikler (med mindre det er behov for en annen ramme)., Det er både lett og moden nok til å bli testet og prøvd og bli funnet verdige.
Reagere er det riktige valget for de som er bare å komme i gang med JavaScript frontend-rammer samt nyetableringer og utviklere som liker å være fleksibel. Reagerer tilbyr god integrasjon alternativer med ulike andre teknologier og rammeverk, noe som er svært nyttig når du arbeider på et prosjekt med et stort økosystem.
# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB
Vue.js og Single-Side-Programmer
Vue er den yngste av de tre, opprettet i 2014 med en ex-Google-ansatt Yuxi (Evan) Du., Selv om det ikke er store corporation støtter dets utvikling, Vue har klart å stige i popularitet. Foreløpig er slike selskaper som GitLab, Baidu, og Hydrogen bruk Vue.js for deres behov.
Hvis du foretrekker enkelhet og fleksibilitet i front-end rammer, så Vue er et godt alternativ. I tillegg, er det mest lett for alle.
# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB
Nylig skrev vi en artikkel om Reagere.js vs. Vue.js
Single-Side-Programmer og ASP.NET (Blazor)
Vi besluttet å legge ASP.NET alternativet til listen av rammer og teknologier for enkelt-side-programmer., Det er en ny gutt på blokken kalles Blazor. Det er en .NET framework som bruker C#/Barberblad og HTML-kode som kjører i nettleseren med WebAssembly, i henhold til GitHub depotet.
Microsoft annonserte utgivelsen av denne rammen tidligere i 2019 og i dag, ser det ut som, versjon 1.0 er klar. Dette alvorlig støtte fra et stort konsern er en stor fordel av Blazor fordi det gjør straks denne «open-source instrumentet en del av 60,000+ OSS bidragsytere» fellesskapet med 3.700+ OSS selskapet bidragsytere.,
Blazor er et praktisk verktøy fordi det er ingen behov for maskinskrevet kopi eller JavaScript, kan du skrive alle logikk i C#. Når det er sagt, Blazor tilbyr funksjonalitet med JavaScript-Api-er og-biblioteker, slik at hvis din økosystem er stor og består av JS bibliotek, du er ikke tapt i overgangen.
.NETTO Blazor tilbyr også to forskjellige valg – klient-bare Blazor og server-side Blazor. Sistnevnte bør være fulgte med .NETTO Core 3.0.
betyr det at Blazor vil drepe Kantete, Reagere, eller Vue? Vi tror ikke det. Men, det er noe å holde et øye på.
For SPA med .,NET, kan du også bruke ASP.NET Core og ASP.NET MVC. Slik oppretter du enkelt side i programmet ASP.NET MVC? Kan du sette det opp på backend for å tjene HTML-på frontend.
# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+
Konklusjon
Vurderer fremveksten av mobile enheter og en on-the-go livsstil, single-side programmer er gode. Om din virksomhet ville gå for en SPA eller en MPA – det er mer et spørsmål for din bedrift analytikere og krav.,
På HUSPI, vi har fått nye utfordringer på det team som kan hjelpe med å forstå og definere de tekniske behovene til prosjektet (og utviklere som kan bygge arkitektur og prosjektet seg fra bakken og opp).