i den här artikeln ska jag gå igenom några grundläggande begrepp för att bygga ensidiga applikationer (SPA) och några enkla applikationsexempel som skapats med hjälp av Syncfusion Essential JS 2-komponenter.
Vad är ensidig ansökan (SPA)?,
en enda sida ansökan (SPA) är ett webbprogram där en enda rotvyn sida kommer att laddas från servern och sedan, baserat på användarinteraktionen, programmet kommer dynamiskt uppdatera innehållet på klientsidan utan någon sida ladda.
Spa är mer flytande och lyhörda än konventionella flersidiga applikationer och de är bäst lämpade för att skapa SaaS (programvara som en tjänst), företags instrumentpaneler och andra formdrivna webbapplikationer.,
livscykel för SPA
det finns flera ramar för att bygga ett SPA, men begreppet SPA i varje ram är detsamma. Hämta hela klientsidan UI eller visa från servern under den första belastningen. Sedan, baserat på användarinteraktioner eller navigering genom programmet, UI kommer att uppdateras dynamiskt på klientsidan.
SPA använder minsta bandbredd för att kontakta servern för att uppdatera data från användarinteraktioner och för att hämta uppdaterade data samtidigt som webbsidan uppdateras.,
Bildkälla:https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
fördelarna med SPA
enkelsidiga applikationer är mer flytande och responsiva än flersidiga applikationer. På grund av detta är dessa applikationer också väl lämpade för Mobila enheter, utan att behöva bygga en separat inbyggd mobil applikation.
SPA har stöd för rika interaktioner med flera komponenter, t.ex. redaktörer och popup-fönster, på visningssidan. Dessa komponenter kan ha mellanliggande tillstånd som kan vara svårare att implementera med serversidan rendering.,
förutom den ursprungliga sidbelastningen använder SPA mindre bandbredd för uppdatering av användargränssnittet. Det finns inga siduppdateringar medan en användare navigerar programmet, vilket gör programmet bekvämare att använda i mobila enheter.
eftersom visningsskiktet och datalagret bibehålls separat i spaet blir det mycket lättare att distribuera det i produktion.
viktiga koncept för SPA
Routing
i SPA upprätthålls allt innehåll med separata webbadresser och man kan snabbt navigera till olika innehåll med hjälp av dessa webbadresser.,
program på en sida upprätthåller status med hjälp av webbadresser eller spårtillstånd internt medan en användare navigerar genom programmet.
det stora användningsfallet med siddirigering i SPA är när en person delar webbadressen. Den personen kan vara säker på att alla som öppnar den länken kommer att se exakt samma innehåll genom att navigera till den exakta webbadressen i programmet.
databindning och synkronisering
SPA använder minimal bandbredd för att kontakta servern för att hämta data eller för att uppdatera datamodellen efter användarinteraktionen i programmet.,
medan en användare navigerar genom programmet uppdateras datamodellen i servern samtidigt med en asynkron HTTP-begäran (AJAX).
baserat på användarinteraktionerna uppdateras data till datamodellen i servern. Och dessa dataändringar uppdateras tillbaka till användargränssnittet samtidigt, vilket gör att användaren alltid kan visa en uppdaterad webbsida utan att uppdatera den.
snabb och flytande svarstid
SPA är känt för sina snabba och sömlösa svar på användarinteraktion., Deras rika gränssnitt hanterar användaråtgärden och uppdaterar användargränssnittet dynamiskt utan dröjsmål eller begäran från servern. De kan därmed undvika avbrott i upplevelsen och göra webbappen beter sig mer som ett skrivbordsprogram.
Separation av vy och datalager
SPA är byggt med Model-View-Controller (MVC) och Model-View-ViewModel (MVVM) mönster, men du kan fortfarande bygga programmet på din egen MV* mönster.,
visningsfilen (tillsammans med CSS-bunten) som håller användargränssnittet för applikationen och datalagret i applikationen är väl underhållna separat i SPA-arkitekturen.
separationen av vyn och datalagret är avsedd för användaren att återanvända visningssidan för olika datamängder eller ändra visningssidan utan att påverka datamodellen i produktionen.
separationen av vyn och datalagret i SPA underlättar versions-och rollback-löften i produktionen.,
applikationsexempel på en sida och demos
det här är några av de verkliga applikationsexempel på en sida som byggts med hjälp av viktiga JS 2-kontroller.
Expense Tracker
Expense Tracker enkelsidig ansökan exempel, visar upp flera viktiga JS 2 kontroller tillsammans för att spåra och visualisera dagliga utgifter med en stor UI.,
Expense tracker – SPA
de olika webbsidorna i programmet, instrumentpanelen, transaktioner och om, använd DataGrid, diagram och andra viktiga JS 2-kontroller för att visualisera datamodellen. Denna applikation använder en sidroutningsmekanism för sidövergångar för att navigera bland vyer.
användare kan navigera bland dessa vyer med hjälp av webbadresserna, som kommer att skapas för varje webbsida på grund av routing., Eftersom denna applikation är byggd med hjälp av SPA-arkitektur, kommer alla webbsidor laddas ner vid den första inläsningen av webbapplikationen. Då kommer sidövergångarna att hända helt på klientsidan utan att begära några webbsidor på servern. När du navigerar till olika vyer uppdateras webbadressen till programmet i enlighet med detta.
databindning har en viktig roll i SPA. Eftersom alla webbsidor laddas ner på klientsidan bör GRÄNSSNITTSKOMPONENTERNA uppdateras med uppdaterade data då och där., När du utför någon redigeringsåtgärd på Transaktionswebbsidan uppdateras ändringarna samtidigt till datamodellen. Dessa ändringar kommer att återspeglas i UI-komponenter som finns på andra sidor också.
eftersom SPA är väl lämpade för rendering både i stationära webbläsare och mobila miljöer, är denna applikation byggd med en flytande och lyhörd design för rendering i mobila enheter.
live demo av denna ansökan finns på vår hemsida och du kan hitta källa på GitHub här.,
Expense Tracker – Mobile view
Web Mail
Web Mail är ett applikationsexempel på en sida med ett Outlook-liknande användargränssnitt byggt för att hantera en brevlåda.
denna applikation är byggd med rika gränssnitt och en interaktiv design med hjälp av Syncfusion komponenter som dragspel, ListView, och sidofältet som en enda vy webbsida. Programmet är uppdelat i tre sektioner för att hantera brevlådan: e-postmappar, postobjekt och e-postinnehållet., På grund av sin lyhörda design, kan denna ansökan göras med lätthet över mobila enheter och stationära webbläsare.
databindning spelar en viktig roll i den här applikationen för att uppdatera brevlådan och för att visa mailinnehållet baserat på användarinteraktionen. Postlistobjekten uppdateras med lämpligt innehåll baserat på användarval i e-postmappar. E-postområdet uppdateras med det uppdaterade innehållet när användaren väljer ett e-postobjekt från e-postlistan.
Du kan hitta live demo av denna ansökan på vår hemsida och du kan hitta källan på GitHub.,
Web Mail – SPA
programmet hanterar flera användarinteraktioner och uppdaterar innehållet i enlighet med detta utan att någon sida uppdateras, vilket gör att programmet ser ut som ett skrivbordsprogram.
den responsiva designen av den här applikationen gör det enkelt att göra över mobila enheter med det bästa användargränssnittet.,
lånekalkylator
Lånekalkylatorn är exempel på en sida som visar komponenter som DataGrid, Diagram, skjutreglage och andra tillsammans på en enda vysida för att beräkna en lånebetalning baserat på lånebeloppet, räntan och termen.,
Loan Calculator – SPA
databindningen i den här applikationen fungerar på ett sådant sätt att data för diagrammet och rutnätskomponenterna uppdateras med lämpliga data samtidigt som värdena för ett lånebelopp, ränta och term används med glidkomponenten.
man kan också uppdatera diagraminnehållet genom att välja önskad månad som ska visas med DatePicker-kontrollen. När månaden som ska ses ändras returneras uppgifterna för motsvarande månad från modellen., Detsamma kommer att uppdateras i Diagramkontrollen också.
Du kan hitta live demo av denna ansökan på vår hemsida och du kan hitta dess källa på GitHub.
Health Tracker
Health Tracker är ett annat applikationsexempel på en sida för att spåra en persons hälsa genom att spåra deras intag av mat, avståndet gick, vatten som konsumeras och sömnens varaktighet.
denna applikation är byggd med rika gränssnitt och en interaktiv design med hjälp av Syncfusion kontroller som diagram och kort som en enda vy webbsida. Databindning används för att visa upp data i diagrammet., Källan för detta prov finns i denna GitHub-plats.
Health Tracker – SPA
Diagram Builder
diagrammet Builder är ett program som hjälper till att skapa de olika diagrammen för olika användningsfall som organisatoriska diagram, hierarkiska träd och tankekartor.
den här applikationen är byggd med kraftfulla och funktionsrika kontroller som Diagram, Färgväljare, Dialog och Avståndsreglage. Källan till detta prov finns i denna GitHub-plats.,
Diagram Builder – SPA
Story Estimator
berättelsen Estimator är ett effektivt, Agile-baserat verktyg för att uppskatta berättelse poäng för berättelser med hjälp av planering Poker tekniker.
den här applikationen är byggd med kontroller som DataGrid, Diagram, inmatningsmask, knapp, radioknapp och kryssruta. Källan för detta prov finns i denna GitHub-plats.,
Story Estimator – SPA
lagerdiagram
lagerdiagrammet används för att spåra och visualisera aktiekursen för ett företag under en viss tidsperiod.
det här programmet är byggt med diagram, verktygsfält, DateTimePicker, rullgardinsmenyn och knappkontroller. Du hittar källan på GitHub.,
Stock Diagram – SPA
Asset Management
Asset Management program är en enda sida tillämpning exempel som används för att spåra och visualisera mjukvara och hårdvara tillgångar i en organisation.
denna applikation är byggd med DataGrid, Diagram, TreeMap och daterangepicker kontroller. Du hittar källan på GitHub.,
Asset Management – SPA
överväganden för SPA
förutom de flera fördelarna med ensidig ansökan, finns det några speciella överväganden att tänka på med SPA:
- man bör säkerställa objektorienterade principer när man skapar ett SPA. Om ignoreras, kommer det att leda till minnesläckor i webbläsaren. Således orsakar applikationen att sakta ner och därigenom försämra dess prestanda.
- hantera webbläsarens bakåtknapp korrekt i ensidiga program., Om inte, kan användaren klicka på webbläsaren tillbaka knappen, vilket leder till förlust av arbetsflöde.
de rätta teknikerna kan dock ta itu med alla dessa problem.
sammanfattning
i det här blogginlägget såg vi fördelarna med ensidiga applikationer över flersidiga applikationer. Vi såg också de verkliga applikationsexemplen på en sida som byggdes med flera Syncfusion Essential JS 2-kontroller.
de tidigare diskuterade applikationsexemplen på en sida är också tillgängliga för vinkel, JavaScript, ASP.NET kärna och ASP.,NET MVC plattformar, och du kan hitta live demo av dessa program på vår hemsida. Du kan också kontrollera andra verkliga applikationer byggda med Syncfusion komponenter här.
Vi rekommenderar att du checkar ut källkoden själv, tillgänglig på GitHub, som lätt kan köras, för att se hur enkelsidiga applikationer byggs med hjälp av Syncfusion-komponenter.