In dit artikel zal ik u een aantal fundamentele concepten voor het bouwen van applicaties met één pagina (SPA) en enkele toepassingsvoorbeelden met één pagina die zijn gemaakt met Syncfusion Essential JS 2 components.
Wat is een toepassing met één pagina (SPA)?,
een single-page applicatie (SPA) is een webapplicatie waarin een enkele root view pagina wordt geladen vanaf de server en vervolgens, op basis van de gebruikersinteractie, zal de applicatie dynamisch de inhoud aan de client-kant bijwerken zonder pagina opnieuw te laden.
spa ‘ s zijn vloeiender en responsiever dan conventionele multipage applicaties en ze zijn het meest geschikt voor het maken van SaaS (Software as a Service), enterprise dashboards en andere vormgestuurde webapplicaties.,
levenscyclus van SPA
Er zijn meerdere frameworks om een SPA te bouwen, maar het concept van de SPA in elk framework blijft hetzelfde. Haal de volledige client-side UI of weergave van de server tijdens de eerste belasting. Vervolgens, op basis van de gebruikersinteracties of navigatie door de toepassing, wordt de gebruikersinterface dynamisch vernieuwd aan de clientzijde.
SPA gebruikt minimale bandbreedte om contact op te nemen met de server om de gegevens van gebruikersinteracties bij te werken en om de bijgewerkte gegevens op te halen tijdens het verversen van de webpagina.,
Afbeeldingsbron : https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
voordelen van SPA
toepassingen met één pagina zijn vloeiender en responsiever dan toepassingen met meerdere pagina ‘ s. Hierdoor zijn deze applicaties ook geschikt voor mobiele apparaten, zonder de noodzaak om een aparte native mobiele applicatie te bouwen.
SPA ondersteunt rijke interacties met meerdere componenten, zoals editors en pop-ups, op de weergavepagina. Deze componenten kunnen tussenliggende toestanden hebben die moeilijker te implementeren zijn met server-side rendering.,
behalve de eerste paginabelasting gebruikt SPA minder bandbreedte voor het bijwerken van de gebruikersinterface. Er zijn geen pagina ververst terwijl een gebruiker de applicatie navigeert, waardoor de applicatie comfortabeler is om te gebruiken in mobiele apparaten.
aangezien de weergavelaag en de gegevenslaag afzonderlijk worden onderhouden in de SPA, zal dit veel gemakkelijker zijn om deze in productie te implementeren.
belangrijke concepten van SPA
Routing
in SPA wordt alle inhoud onderhouden met afzonderlijke URL ’s en kan men snel naar andere inhoud navigeren met behulp van deze URL’ s.,
toepassingen met één pagina onderhouden de status met behulp van URL ‘ s of tracktoestanden intern terwijl een gebruiker door de toepassing navigeert.
het belangrijkste gebruik bij paginaroutering in SPA is wanneer een persoon de URL deelt. Die persoon kan er zeker van zijn dat iedereen die die link opent exact dezelfde inhoud zal zien door te navigeren naar de exacte URL in de applicatie.
gegevensbinding en synchronisatie
SPA gebruikt minimale bandbreedte om contact op te nemen met de server voor het ophalen van gegevens of voor het bijwerken van het datamodel na de gebruikersinteractie in de toepassing.,
terwijl een gebruiker door de toepassing navigeert, zal het datamodel op de server gelijktijdig worden bijgewerkt met behulp van een asynchrone HTTP-aanvraag (AJAX).
Op basis van de gebruikersinteracties worden de gegevens bijgewerkt naar het gegevensmodel op de server. En deze gegevenswijzigingen worden gelijktijdig vernieuwd naar de gebruikersinterface, waardoor de gebruiker altijd in staat is om een bijgewerkte webpagina te bekijken zonder deze te vernieuwen.
snelle en vloeiende responstijd
SPA staat bekend om hun snelle en naadloze reacties op gebruikersinteractie., Hun rijke interfaces behandelen de actie van de gebruiker en vernieuwen de UI dynamisch zonder enige vertraging of verzoek van de server. Ze kunnen daardoor onderbrekingen in de ervaring te voorkomen en maken de web-app zich meer gedragen als een desktop applicatie.
scheiding van Beeld en gegevenslaag
SPA is gebouwd met behulp van Model-View-Controller (MVC) en Model-View-ViewModel (MVVM) patronen, maar u kunt de toepassing nog steeds bouwen op uw eigen MV* patroon.,
het weergavebestand (samen met de CSS-bundel) dat de UI-rendering voor de toepassing bevat en de gegevenslaag van de toepassing worden goed Apart onderhouden in de SPA-architectuur.
de scheiding van de beeld – en gegevenslaag is bedoeld voor de gebruiker om de weergavepagina te hergebruiken voor verschillende gegevenssets of de weergavepagina te wijzigen zonder het datamodel in productie te beïnvloeden.
de scheiding van de weergave – en datalaag in SPA vergemakkelijkt de versiebeheer-en rollback-geloften in de productie.,
toepassingsvoorbeelden van enkele pagina ’s en demo’ s
Dit zijn enkele van de echte toepassingsvoorbeelden van enkele pagina ‘ s die zijn gebouwd met behulp van essentiële js 2-besturingselementen.
Expense Tracker
Het Expense Tracker applicatie voorbeeld van één pagina toont verschillende essentiële js 2 besturingselementen samen om dagelijkse uitgaven te volgen en te visualiseren met een geweldige gebruikersinterface.,
Expense tracker – SPA
de verschillende webpagina ‘ s in de applicatie, Dashboard, transacties en Over, gebruiken de DataGrid, grafieken en andere essentiële js 2-besturingselementen voor het visualiseren van het gegevensmodel. Deze applicatie maakt gebruik van een pagina routing mechanisme voor pagina-overgangen om te navigeren tussen weergaven.
gebruikers kunnen tussen deze weergaven navigeren met behulp van de URL ‘ s, die voor elke webpagina worden aangemaakt vanwege routering., Aangezien deze applicatie is gebouwd met behulp van SPA-architectuur, zullen alle webpagina ‘ s worden gedownload bij het eerste laden van de webapplicatie. Dan zullen de pagina-overgangen volledig gebeuren aan de client-kant zonder het aanvragen van webpagina ‘ s van de server. Tijdens het navigeren naar verschillende weergaven, zal de URL van de toepassing dienovereenkomstig worden bijgewerkt.
gegevensbinding speelt een belangrijke rol in SPA. Aangezien alle webpagina ‘ s worden gedownload op de client-side, de UI componenten moeten worden vernieuwd met de bijgewerkte gegevens dan en daar., Tijdens het uitvoeren van een bewerkingsactie in de transactie webpagina, de wijzigingen worden bijgewerkt naar het gegevensmodel tegelijkertijd. Deze wijzigingen zullen ook worden weerspiegeld in de UI-componenten die op andere pagina ‘ s beschikbaar zijn.
aangezien SPA zeer geschikt is voor het renderen van zowel desktopbrowsers als mobiele omgevingen, is deze applicatie gebouwd met een vloeiend en responsief ontwerp voor het renderen van mobiele apparaten.
De live demo van deze applicatie is beschikbaar op onze website en u kunt de broncode van GitHub hier vinden.,
Expense Tracker – Mobile view
Webmail
Webmail is een enkele pagina applicatie voorbeeld met een Outlook-achtige gebruikersinterface gebouwd voor het beheren van een mailbox.
Deze applicatie is gebouwd met rijke interfaces en een interactief ontwerp met behulp van Syncfusion componenten zoals de accordeon, ListView, en Sidebar als een single-view webpagina. De applicatie is opgesplitst in drie secties voor het beheren van de mailbox: mailmappen, e-mailitems en het e-mailcontentgebied., Vanwege het responsieve ontwerp kan deze applicatie met gemak worden weergegeven op mobiele apparaten en desktopbrowsers.
gegevensbinding speelt een belangrijke rol in deze toepassing voor het bijwerken van de mailbox en voor het weergeven van de e-mailinhoud op basis van de gebruikersinteractie. De e-maillijstitems worden vernieuwd met de juiste inhoud op basis van gebruikersselectie in e-mailmappen. Het e-mailgebied wordt ververst met de bijgewerkte inhoud wanneer de gebruiker een e-mailitem uit de e-maillijst selecteert.
u kunt de live demo van deze applicatie vinden op onze website en u kunt de bron vinden op GitHub.,
Web Mail – SPA
de toepassing behandelt meerdere gebruikersinteracties en ververst de inhoud zonder enige pagina ververst, waardoor de toepassing eruit ziet als een bureaubladtoepassing.
het responsieve ontwerp van deze applicatie maakt het gemakkelijk om te renderen op mobiele apparaten met de beste gebruikersinterface.,
Loan Calculator
De Loan Calculator is een toepassingsvoorbeeld van één pagina dat componenten zoals het DataGrid, grafieken, Slider en andere samen in één pagina toont voor het berekenen van een leningbetaling op basis van het bedrag van de lening, de rente en de looptijd.,
Loan Calculator – SPA
De gegevensbinding in deze toepassing werkt zo dat, terwijl de waarden van een leningbedrag, rente en looptijd worden aangepast met behulp van de slidercomponent, de gegevens voor de grafiekcomponenten en rastercomponenten dienovereenkomstig worden ververst met de juiste gegevens.
men kan ook de inhoud van de grafiek vernieuwen door de gewenste maand te kiezen die bekeken moet worden met behulp van de datepicker controle. Wanneer de te bekijken maand wordt gewijzigd, zullen de gegevens voor de betreffende maand worden geretourneerd uit het model., Hetzelfde zal worden bijgewerkt in de grafieken controle te.
u kunt de live demo van deze applicatie vinden op onze website en u kunt de bron vinden op GitHub.
Health Tracker
De Health Tracker is een ander enkele pagina applicatie voorbeeld om de gezondheid van een persoon te volgen door het bijhouden van hun inname van voedsel, de afgelegde afstand, het drinken van water, en de duur van de slaap.
Deze applicatie is gebouwd met rijke interfaces en een interactief ontwerp met behulp van Syncfusion besturingselementen zoals grafieken en kaarten als een single-view webpagina. Gegevensbinding wordt gebruikt om de gegevens in de grafiek weer te geven., De bron voor dit monster kan gevonden worden in deze GitHub locatie.
Health Tracker – SPA
Diagram Builder
De Diagram Builder is een applicatie die helpt bij het maken van de verschillende diagrammen voor verschillende use cases, zoals organisatieschema ‘ s, hiërarchische bomen en mindmaps.
Deze applicatie is gebouwd met krachtige en feature-rijke besturingselementen zoals Diagram, Kleurkiezer, dialoogvenster en Range Slider. De bron van dit monster kan worden gevonden in deze GitHub locatie.,
Diagram Builder – SPA
Story Estimator
De Story Estimator is een effectieve, Agile-gebaseerde tool voor het schatten van story points voor verhalen met behulp van Planning Poker technieken.
deze toepassing is gebouwd met besturingselementen zoals DataGrid, grafieken, invoermasker, knop, radioknop en CheckBox. De bron voor dit monster kan gevonden worden in deze GitHub locatie.,
Story Estimator – SPA
aandelengrafiek
De aandelengrafiek wordt gebruikt om de aandelenkoers van een bedrijf over een bepaalde periode te volgen en te visualiseren.
deze toepassing is gebouwd met de grafieken, werkbalk, DateTimePicker, DropDown en knop controles. Je kunt de bron vinden op GitHub.,
Stock Chart – SPA
Asset Management
De Asset Management Applicatie is een enkele pagina applicatie gebruikt om de software en hardware activa van een organisatie te volgen en te visualiseren.
deze toepassing is gebouwd met de besturingselementen DataGrid, Charts, TreeMap en DateRangePicker. Je kunt de bron vinden op GitHub.,
Asset Management – SPA
overwegingen voor SPA
naast de vele voordelen van de toepassing met één pagina, zijn er een aantal speciale overwegingen om in gedachten te houden met SPA:
- men moet objectgeoriënteerde principes waarborgen tijdens het creëren van een SPA. Indien genegeerd, zal het leiden tot geheugenlekken binnen de browser. Dus, waardoor de toepassing te vertragen, waardoor de prestaties.
- behandel de terugknop van de browser correct in toepassingen met één pagina., Zo niet, kan de gebruiker op de knop browser terug klikken, wat leidt tot workflow verlies.
echter, de juiste technieken kunnen al deze problemen aanpakken.
samenvatting
In deze blogpost zagen we de voordelen van toepassingen met één pagina over toepassingen met meerdere pagina ‘ s. Ook zagen we de real-world enkele pagina applicatievoorbeelden gebouwd met meerdere Syncfusion essentiële js 2 besturingselementen.
de eerder besproken applicatievoorbeelden van één pagina zijn ook beschikbaar voor Angular, JavaScript, ASP.NET kern en ASP.,NET MVC platforms, en u kunt de live demo van deze applicaties te vinden op onze website. U kunt hier ook andere real-world applicaties bekijken die zijn gebouwd met Syncfusion-componenten.
we raden u aan zelf de broncode te controleren, die beschikbaar is op GitHub, en die gemakkelijk kan worden uitgevoerd, om te zien hoe applicaties met één pagina worden gebouwd met behulp van Syncfusion componenten.