I denne artikel, jeg vil lede dig gennem nogle af de grundlæggende begreber for bygning enkelt-side applikationer (SPA) og nogle enkelt-side eksempler på anvendelse skabt ved hjælp af Syncfusion Afgørende JS 2 komponenter.
Hvad er enkeltsidet ansøgning (SPA)?,
en enkeltsidet applikation (SPA) er en SPAEBAPPLIKATION, hvor en enkelt rodvisningsside indlæses fra serveren, og derefter, baseret på brugerinteraktionen, opdaterer applikationen dynamisk indholdet på klientsiden uden nogen sideindlæsning.
Kurbade er mere flydende og responsiv end konventionelle flere ansøgninger, og de er bedst egnet til at skabe SaaS (Software as a Service), enterprise dashboards og andre form-drevne web applikationer.,
livscyklus for SPA
Der er flere rammer til at opbygge en SPA, men SPA-konceptet i alle rammer forbliver det samme. Hent hele klientsiden UI eller visning fra serveren under den indledende belastning. Derefter, baseret på brugerinteraktioner eller navigation gennem applikationen, opdateres brugergrænsefladen dynamisk på klientsiden.
SPA bruger minimum båndbredde til at kontakte serveren for at opdatere dataene fra brugerinteraktioner og for at hente de opdaterede data, mens refreshingebsiden opdateres.,
Billede kilde : https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
Fordele i SPA –
Single-side-programmer er mere flydende og responsiv end med flere applikationer. På grund af dette er disse applikationer også velegnede til mobile enheder uden behov for at opbygge en separat indbygget mobilapplikation.
SPA understøtter rige interaktioner med flere komponenter, såsom redaktører og pop-ups, på visningssiden. Disse komponenter kan have mellemliggende tilstande, der kan være sværere at implementere med server-side rendering.,
bortset fra den oprindelige sidebelastning bruger SPA mindre båndbredde til opdatering af brugergrænsefladen. Der er ingen sideopdateringer, mens en bruger navigerer i applikationen, hvilket gør applikationen mere behagelig at bruge i mobile enheder.
da visningslaget og datalaget opretholdes separat i spaen, vil det være meget lettere at installere det i produktionen.
vigtige begreber SPA
Routing
i SPA opretholdes alt indhold med separate Urebadresser, og man kan hurtigt navigere til andet indhold ved hjælp af disse Urebadresser.,enkeltsidede applikationer opretholder tilstand ved hjælp af Urebadresser eller sportilstande internt, mens en bruger navigerer gennem applikationen.
den største brugssag med sideruting i SPA er, når en person deler URL ‘ en. Denne person kan være sikker på, at enhver, der åbner det link, vil se nøjagtigt det samme indhold ved at navigere til den nøjagtige URL i applikationen.
databinding og synkronisering
SPA bruger minimal båndbredde til at kontakte serveren til at hente data eller til opdatering af datamodellen efter brugerinteraktionen i applikationen.,
mens en bruger navigerer gennem applikationen, opdateres datamodellen på serveren samtidigt ved hjælp af en asynkron HTTP-anmodning (aja.).
baseret på brugerinteraktioner opdateres dataene til datamodellen på serveren. Og disse dataændringer opdateres tilbage til brugergrænsefladen samtidigt, hvilket gør brugeren altid i stand til at se en opdateret weebside uden at opdatere den.
hurtig og flydende responstid
SPA er kendt for deres hurtige og problemfri respons på brugerinteraktion., Deres rige grænseflader håndterer brugerens handling og opdaterer brugergrænsefladen dynamisk uden forsinkelse eller anmodning fra serveren. De kan derved undgå afbrydelser i oplevelsen og få webebappen til at opføre sig mere som en desktop-applikation.
Adskillelse af view og data lag
SPA er bygget ved hjælp af Model-View-Controller (MVC) og Model-View-ViewModel (MVVM -) mønstre, men du kan stadig bygge din ansøgning MV* mønster.,
visningsfilen (sammen med CSS-bundtet), der indeholder UI-gengivelsen til applikationen og datalaget i applikationen, opretholdes godt separat i SPA-arkitekturen.adskillelsen af visnings-og datalaget er beregnet til, at brugeren kan genbruge visningssiden til forskellige datasæt eller ændre visningssiden uden at påvirke datamodellen i produktionen.
visningen og datalag adskillelse i SPA Letter versionering og rollback løfter i produktionen.,
eksempler på enkeltsider og demoer
Dette er nogle af de virkelige eksempler på enkeltsider, der er bygget ved hjælp af essentielle Js 2-Kontroller.
Bekostning Tracker
Bekostning Tracker enkelt-side ansøgning eksempel, viser flere Væsentlige JS 2 kontroller sammen til at spore og visualisere daglige udgifter med en stor UI.,
Bekostning tracker – SPA
De forskellige websider, i den ansøgning, Instrumentbræt, Transaktioner, og Om brug DataGrid, Diagrammer og andre Væsentlige JS 2 kontrol for at visualisere data model. Dette program bruger en side routing mekanisme til sideovergange til at navigere blandt visninger.
brugere kan navigere blandt disse visninger ved hjælp af de Urebadresser, som oprettes for hver weebside på grund af routing., Da denne applikation er bygget ved hjælp af SPA-arkitektur, do .nloades alle weebsider ved den første indlæsning af webebapplikationen. Derefter sker sideovergange fuldstændigt på klientsiden uden at anmode om nogen weebsider på serveren. Mens du navigerer til forskellige visninger, opdateres URLEBADRESSEN til applikationen i overensstemmelse hermed.
databinding har en vigtig rolle i SPA. Da alle weebsider do .nloades på klientsiden, skal UI-komponenterne opdateres med de opdaterede data derefter og der., Under udførelsen af enhver redigering handling i transaktionen weebside, vil ændringerne blive opdateret til datamodellen samtidigt. Disse ændringer afspejles også i UI-komponenterne, der er tilgængelige på andre sider.da SPA er velegnet til gengivelse både i stationære bro .sere og mobile miljøer, er denne applikation bygget med et flydende og responsivt design til gengivelse på mobile enheder.
live demo af denne applikation er tilgængelig på vores hjemmeside, og du kan finde kilde på GitHub her.,
Bekostning Tracker – Mobil visning
Web Mail
Web-Mail er en single-side ansøgning eksempel med en Outlook-lignende brugergrænseflade er bygget til at administrere en postkasse.
Dette program er bygget med rige grænseflader og interaktivt design ved hjælp af Syncfusion komponenter som Harmonika, ListView, og Sidebar som en single-view webside. Programmet er opdelt i tre sektioner til styring af postkassen: postmapper, postartikler og postindholdsområdet., På grund af sin lydhør design, kan denne ansøgning gøres med lethed på tværs af mobile enheder og desktop bro .sere.
databinding spiller en væsentlig rolle i denne applikation til opdatering af postkassen og til visning af postindholdet baseret på brugerinteraktionen. Postlisteelementerne opdateres med det relevante indhold baseret på brugervalg i postmapper. Mailområdet opdateres med det opdaterede indhold, når brugeren vælger et postelement fra postlisten.
Du kan finde live demo af denne applikation på vores hjemmeside, og du kan finde kilden på GitHub.,
Web-Mail – SPA
programmet håndterer flere brugere interaktioner og genopfrisker indholdet i overensstemmelse hermed, uden at nogen side opdateres, hvilket gør programmet til at ligne en desktop applikation.
det responsive design af denne applikation gør det nemt at gengive på tværs af mobile enheder med den bedste brugergrænseflade.,
Lån Calculator
Lån Calculator er enkelt-side ansøgning eksempel, der montrer komponenter som DataGrid, diagrammer, skyderen, og andre sammen i en enkelt-vie.side til beregning af et lån betaling baseret på lånebeløbet, renter og sigt.,
Lån Lommeregner – SPA
De data, der er bindende i dette program fungerer på en sådan måde, at selv justere værdier af et lånebeløb, renter og sigt ved hjælp af skyderen komponent, data for skema-og grid-komponenter vil blive opdateret med relevante data i overensstemmelse hermed.
man kan også opdatere diagramindholdet ved at vælge den ønskede måned, der skal vises ved hjælp af datepicker-kontrollen. Når den måned, der skal ses, ændres, returneres dataene for den tilsvarende måned fra modellen., Det samme vil blive opdateret i diagrammerne kontrol også.
Du kan finde live demo af denne applikation på vores hjemmeside, og du kan finde dens kilde på GitHub.
Health Tracker
Health Tracker er et andet enkeltsidet applikationseksempel til at spore en persons helbred ved at spore deres indtag af mad, afstand, vandforbrug og søvnvarighed.
Denne applikation er bygget med rige grænseflader og et interaktivt design ved hjælp af Syncfusion-kontroller som diagrammer og kort som en enkeltvisnings weebside. Databinding bruges til at fremvise dataene i diagrammet., Kilden til denne prøve kan findes i denne GitHub placering.
Sundhed Tracker – SPA
Diagram Builder
Diagram Builder er et program, der hjælper i skabelsen af de forskellige diagrammer for forskellige use cases som organisationsdiagrammer, hierarkisk træer, og mind maps.
Denne applikation er bygget med kraftfulde og feature-rige kontroller som Diagram, Farvevælger, Dialog og rækkevidde skyderen. Kilden til denne prøve kan findes i denne GitHub placering.,
Diagram Builder – SPA
Historie Estimator
Historien Estimator er en effektiv, Smidig-baseret værktøj til estimering af story points for historier ved hjælp af Planning Poker teknikker.
Denne applikation er bygget med kontroller som DataGrid, diagrammer, Inputmaske, knap, radioknap og afkrydsningsfelt. Kilden til denne prøve kan findes i denne GitHub placering.,
Historie Estimator – SPA
Lager Chart
aktiediagram bruges til at spore og visualisere aktiekursen for enhver virksomhed i en bestemt periode.
dette program er bygget med diagrammer, værktøjslinje, DateTimePicker, Dropdo .n, og knap kontrol. Du kan finde dens kilde på GitHub.,
Lager Chart – SPA
Asset Management
Asset Management-program er en enkelt side ansøgning eksempel bruges til at spore og visualisere software og hardware aktiver i en organisation.
Dette program er bygget med DataGrid, Diagrammer, TreeMap, og DateRangePicker kontrol. Du kan finde dens kilde på GitHub.,
Asset Management – SPA
Overvejelser for SPA –
Udover de mange fordele ved det indre-side ansøgningen, at der er nogle særlige hensyn for at holde i tankerne med SPA:
- Man bør sikre, objekt-orienterede principper, mens du opretter en SPA. Hvis det ignoreres, vil det føre til hukommelseslækager i Bro .seren. Således får applikationen til at bremse og derved forringe dens ydeevne.
- Håndter bro .serens tilbage-knap korrekt i enkeltsidede applikationer., Hvis ikke, kan brugeren klikke på bro .serens tilbage-knap, hvilket fører til tab af arbejdsgang.
de rigtige teknikker kan dog løse alle disse problemer.
resum.
i dette blogindlæg så vi fordelene ved enkeltsidede applikationer i forhold til flersidede applikationer. Også, vi så den virkelige verden enkelt-side applikationseksempler bygget med flere Syncfusion Essential JS 2 Kontroller.
de tidligere diskuterede enkeltsidede applikationseksempler er også tilgængelige for vinkel, JavaScript, ASP.NET Core og ASP.,Net MVC platforme, og du kan finde live demo af disse applikationer på vores hjemmeside. Du kan også tjekke andre virkelige applikationer bygget med Syncfusion komponenter her.
Vi anbefaler at tjekke kildekoden selv, tilgængelig på GitHub, som let kan køres, for at se, hvordan enkeltsidede applikationer er bygget ved hjælp af Syncfusion-komponenter.