I denne artikkelen vil jeg gå gjennom noen sentrale begreper for å bygge single-side-programmer (SPA) og noen single-side eksempler på bruksområder som er opprettet ved hjelp Syncfusion Viktig JS 2 komponenter.
Hva er single-side-programmet (SPA)?,
En enkeltside-programmet (SPA) er en web-applikasjon der en enkelt rot se side vil bli lastet ned fra serveren og deretter, basert på brukermedvirkning, vil programmet dynamisk oppdatere innholdet på klient-side uten side reload.
SPAs er mer flytende og responsivt enn konvensjonelle flere programmer og de som er best egnet for å skape en SaaS (Software as a Service), enterprise oversikter, og annen form-drevet web-applikasjoner.,
Lifecycle av SPA
Det er flere rammeverk for å bygge et SPA, men konseptet med SPA i hver ramme er fortsatt den samme. Hent hele klient-side UI eller utsikt fra server i løpet av den første legg. Deretter, basert på brukerens vekselsvirkningene, eller navigere gjennom programmet, UI vil oppdateres dynamisk på klient-siden.
SPA bruker minimum båndbredde til å kontakte serveren for å oppdatere data fra brukeren vekselsvirkningene, og for å hente oppdatert informasjon mens du oppdatere nettsiden.,
Bilde kilde : https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
Fordeler med SPA
Single-side-programmer er mer flytende og responsivt enn flere programmer. På grunn av dette, disse programmene er også godt egnet for mobile enheter, uten at du trenger å bygge en egen native mobil applikasjon.
SPA støtter rik interaksjoner med flere komponenter, slik som redaktører og pop-ups, på vis-side. Disse komponentene kan ha mellomliggende tilstander som kan være vanskeligere å gjennomføre med server-side rendering.,
Bortsett fra den første siden lastes inn, SPA bruker mindre båndbredde for oppdatering av BRUKERGRENSESNITTET. Det er ingen side oppdateres mens en bruker går programmet, noe som gjør programmet mer behagelig å bruke i mobile enheter.
Som den vise lag og data layer vedlikeholdes separat i SPAET, vil dette være mye enklere å implementere den i produksjon.
Viktige begreper SPA
Ruting
I SPA, alt innhold er opprettholdt med separate Nettadresser og man kan navigere til ulike innhold raskt ved hjelp av disse Nettadressene.,
Single-side-programmer opprettholde tilstand ved hjelp av Nettadresser eller spor stater internt, mens en bruker går gjennom programmet.
De store bruk-saken med side ruting i SPA, er når en person aksjer URL-en. Denne personen kan være sikker på at alle som er åpne for at koblingen vil se nøyaktig samme innhold ved å navigere til den nøyaktige NETTADRESSEN i programmet.
Data bindende og synkronisering
SPA bruker minimalt med båndbredde for å kontakte serveren for henting av data eller for å oppdatere data modell etter brukermedvirkning i programmet.,
når en bruker går gjennom programmet, data modell i serveren vil bli oppdatert samtidig ved å bruke en asynkron HTTP-forespørsel (AJAX).
Basert på brukerens vekselsvirkningene, dataene er oppdatert til data modell i serveren. Og disse dataene endringer oppdateres tilbake til UI samtidig, og dermed gjøre brukeren alltid i stand til å vise en oppdatert webside uten forfriskende det.
Fast og flytende responstid
SPA er kjent for sine raske og sømløse svar til brukeren., Deres rike grensesnitt håndtere brukeraktivitet og oppdatere UI dynamisk uten noen forsinkelse eller forespørsel fra serveren. De kan dermed unngå avbrudd i opplevelsen og gjøre web app oppfører seg mer som en desktop applikasjon.
Separasjon av visning og data layer
SPA er bygget ved hjelp av Modell-View-Controller (MVC) og Model-View-ViewModel (MVVM) mønstre, men du kan fortsatt bygge programmet på din egen MV* mønster.,
vis-fil (sammen med CSS-pakke) som har UI rendering til program og data lag av programmet er godt vedlikeholdt, separat i SPA-arkitektur.
separasjon av De vise og data laget er beregnet for brukeren å bruke sideoversikt for ulike datasett, eller endre det du vil vise siden uten å påvirke data som modellen i produksjon.
vis og data layer separasjon i SPA letter for versjonskontroll og rollback løfter i produksjonen.,
Enkelt side-programmet eksempler og demonstrasjoner
Dette er noen av de virkelige verden single-side-program eksempler bygget ved hjelp av Avgjørende JS 2 kontroller.
Expense Tracker
Expense Tracker enkelt-side søknaden eksempel, viser flere Essensielle JS 2 kontroller sammen for å spore og visualisere daglige utgifter med en flott UI.,
Expense tracker – SPA –
– >
De ulike nettsider i programmet, Dashboard, Transaksjoner, og Om bruk DataGrid, Sjøkart, og andre Viktige JS 2 kontroller for å visualisere data modell. Dette programmet bruker en side ruting mekanisme for side overganger for å navigere blant utsikt.
Brukere kan navigere blant disse synspunktene ved å bruke url-adresser, som vil bli opprettet for hver nettside på grunn av ruting., Siden dette programmet er bygget med SPA arkitektur, alle nettsidene vil bli lastet ned i den første lasting av web-applikasjon. Så siden overganger vil skje helt på klient-side uten å be om noen nettsider av serveren. Mens du navigerer til ulike visninger, URL-adressen til programmet vil bli oppdatert i henhold til dette.
Data binding har en viktig rolle i SPA. Siden alle websidene er lastet ned på klient-siden, UI komponenter skal være oppdatert med den oppdaterte data der og da., Mens du utfører noen redigering handling i Transaksjonen nettside, endringer vil bli oppdatert til data modell samtidig. Disse endringene vil bli reflektert i UI komponenter tilgjengelig i andre sider også.
Siden SPA er godt egnet for gjengivelse både i desktop nettlesere og mobile miljøer, dette programmet er bygget med en flytende og responsivt design for gjengivelse i mobile enheter.
live demo av dette programmet er tilgjengelig på vår hjemmeside, og du kan finne kilden på GitHub her.,
Expense Tracker – Mobil visning
Web Mail
Web-Mail er en single-side eksempel på applikasjon med en Outlook-lignende brukergrensesnitt bygget for å håndtere en postboks.
Dette programmet er bygd med rike grensesnitt og en interaktiv design ved hjelp av Syncfusion komponenter som Trekkspill, ListView, og Sidefelt som en enkelt-vise websiden. Programmet er delt inn i tre seksjoner for å administrere e-post: mail mapper, e-poster, og e-post-innhold-området., På grunn av sin responsive design, dette programmet kan gjengis med letthet over mobile enheter og datamaskiner.
Data-bindende spiller en betydelig rolle i dette programmet for å oppdatere e-postkassen og for å vise e-post-innhold basert på brukermedvirkning. E-post liste elementer vil bli oppdatert med relevant innhold basert på brukerens valg i e-postmapper. E-post området vil bli oppdatert med oppdatert innhold når brukeren velger en e-post fra e-post-listen.
Du kan finne live demo av dette programmet på vår hjemmeside, og du kan finne kilden på GitHub.,
Web-e-Post – SPA –
– >
programmet håndterer flere bruker vekselsvirkningene og oppdaterer innholdet følgelig uten noen siden oppdateres, noe som gjør programmet ser ut som en desktop applikasjon.
Den responsive design av dette programmet gjør det enkelt å gjengi over mobile enheter med det beste BRUKERGRENSESNITTET.,
Lån Kalkulator
Lånet Kalkulatoren er enkel-side eksempel på applikasjon som viser komponenter som DataGrid, Diagrammer, Slider, og andre sammen i en enkelt-visning-siden for å beregne et lån betaling basert på lånebeløp, rente -, og sikt.,
lånekalkulator – SPA –
– >
data-bindende i dette programmet fungerer på en slik måte at, mens du justerer verdien av et lån beløp, interesse og tid ved hjelp av glidebryteren komponent, dataene for diagrammet, og rutenett komponenter vil bli oppdatert med aktuelle data i henhold til dette.
Man kan også oppdatere diagrammet innholdet ved å velge ønsket måned for å se gevinsttabellen ved å bruke DatePicker kontroll. Når måned for å bli sett er endret, det data for tilsvarende måned vil bli returnert fra modellen., Det samme vil bli oppdatert i Diagrammer kontroll også.
Du kan finne live demo av dette programmet på vår hjemmeside, og du kan finne sin kilde på GitHub.
Helse Tracker
Helse Tracker er en annen single-side søknaden eksempel å spore en persons helse ved å spore deres inntak av mat, avstand gikk, vann som forbrukes, og varighet av søvn.
Dette programmet er bygd med rike grensesnitt og en interaktiv design ved hjelp av Syncfusion kontroller som Diagrammer og Kort som en enkelt-vise websiden. Data bindende brukes til å presentere dataene i diagrammet., Kilden for denne prøven kan bli funnet i denne GitHub beliggenhet.
Helse Tracker – SPA
Diagram Builder
Diagrammet Builder er et program som hjelper i etableringen av ulike diagrammer for ulike tilfeller, for eksempel organisasjonskart, hierarkiske trær, og tankekart.
Dette programmet er bygget med kraftig og funksjonsrik kontroller som Diagrammet, fargevelgeren, Dialog og Utvalg Glidebryteren. Kilden til denne prøven kan bli funnet i denne GitHub beliggenhet.,
Diagram Builder – SPA
Historie Estimator
Historien Estimator er en effektiv, Smidig-basert verktøy for beregning historie poeng for historier ved hjelp av Planning Poker teknikker.
Dette programmet er bygget med kontroller som DataGrid, Diagrammer, inndatamasken, Knappen, Radio-Knappen, og Ruten. Kilden for denne prøven kan bli funnet i denne GitHub beliggenhet.,
Historie Estimator – SPA
Stock Chart
The Stock Diagram brukes til å spore og visualisere aksjekursen i selskapet over en bestemt tidsperiode.
Dette programmet er bygget med Diagrammer, Verktøylinjen, DateTimePicker, DropDown, og Knappen kontroller. Du kan finne sin kilde på GitHub.,
Stock Diagram – SPA
Asset Management
Asset Management program er en enkel side som eksempel på applikasjon som brukes til å spore og visualisere programvare og maskinvare eiendeler i en organisasjon.
Dette programmet er bygget med DataGrid, Diagrammer, TreeMap, og DateRangePicker kontroller. Du kan finne sin kilde på GitHub.,
Asset Management – SPA
Hensynet til SPA
i Tillegg til flere fordeler for enkelt-side-programmet, er det noen spesielle hensyn å huske på med SPA:
- En bør sikre objekt-orienterte prinsipper når du oppretter et SPA. Dersom det ignoreres, vil det føre til minne lekkasjer i nettleseren. Dermed forårsaker programmet til å bremse ned, og dermed redusere dens ytelse.
- Håndtere tilbakeknappen i nettleseren riktig i single-side-programmer., Hvis ikke, kan brukeren klikke på nettleserens tilbake-knapp, som fører til arbeidsflyt tap.
Imidlertid, er den riktige teknikker kan løse alle disse problemene.
Oppsummering
I dette blogg innlegget, så vi fordelene med single-side-programmer over flere programmer. Også, vi så den virkelige verden, single-side-program eksempler bygget med flere Syncfusion Viktig JS 2 kontroller.
tidligere diskutert enkelt-side eksempler på bruksområder er også tilgjengelig for Kantete, JavaScript, ASP.NET Kjerne, og ASP.,NETTO MVC-plattformer, og du kan finne live demo av disse programmene på vår nettside. Du kan også sjekke andre virkelige verden programmer bygd med Syncfusion komponenter her.
Vi anbefale å sjekke ut kildekoden selv, tilgjengelig på GitHub, som er lett kjørbart, for å se hvor enkelt-side-programmer er bygget ved hjelp av Syncfusion komponenter.