In diesem Artikel führe ich Sie durch einige grundlegende Konzepte zum Erstellen von einseitigen Anwendungen (SPA) und einige einseitige Anwendungsbeispiele, die mit Syncfusion Essential JS 2-Komponenten erstellt wurden.
Was ist single-page-Anwendung (SPA)?,
Eine Single-Page-Anwendung (SPA) ist eine Webanwendung, in der eine einzelne Root-View-Seite vom Server geladen wird und dann, basierend auf der Benutzerinteraktion, Die Anwendung den Inhalt auf der Client-Seite dynamisch aktualisiert Seite neu laden.
SPAs sind flüssiger und reaktionsschneller als herkömmliche mehrseitige Anwendungen und eignen sich am besten zum Erstellen von SaaS (Software as a Service), Enterprise Dashboards und anderen formulargesteuerten Webanwendungen.,
Lebenszyklus von SPA
Es gibt mehrere Frameworks zum Erstellen eines SPA, aber das Konzept des SPA in jedem Framework bleibt gleich. Rufen Sie beim ersten Laden die gesamte clientseitige Benutzeroberfläche oder Ansicht vom Server ab. Basierend auf den Benutzerinteraktionen oder der Navigation durch die Anwendung wird die Benutzeroberfläche dann auf der Clientseite dynamisch aktualisiert.
SPA verwendet eine minimale Bandbreite, um den Server zu kontaktieren, um die Daten aus Benutzerinteraktionen zu aktualisieren und die aktualisierten Daten abzurufen, während die Webseite aktualisiert wird.,
Bildquelle : https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
Vorteile von SPA
Einseitige Anwendungen sind flüssiger und reaktionsschneller als mehrseitige Anwendungen. Aus diesem Grund eignen sich diese Anwendungen auch gut für mobile Geräte, ohne dass eine separate native mobile Anwendung erstellt werden muss.
SPA unterstützt umfangreiche Interaktionen mit mehreren Komponenten wie Editoren und Popups auf der Seite Ansicht. Diese Komponenten können Zwischenzustände aufweisen, die beim serverseitigen Rendern schwieriger zu implementieren sind.,
Abgesehen vom anfänglichen Laden der Seite verwendet SPA weniger Bandbreite für die Aktualisierung der Benutzeroberfläche. Es gibt keine Seite aktualisiert, während ein Benutzer die Anwendung navigiert, so dass die Anwendung bequemer in mobilen Geräten zu verwenden.
Da die Ansichtsschicht und die Datenschicht getrennt im SPA verwaltet werden, ist die Bereitstellung in der Produktion viel einfacher.
Wichtige Konzepte von SPA
Routing
In SPA werden alle Inhalte mit separaten URLs gepflegt und man kann mit diesen URLs schnell zu verschiedenen Inhalten navigieren.,
Einseitige Anwendungen behalten den Status mithilfe von URLs bei oder verfolgen den Status intern, während ein Benutzer durch die Anwendung navigiert.
Der Hauptanwendungsfall beim Seitenrouting in SPA ist, wenn eine Person die URL teilt. Diese Person kann sicher sein, dass jeder, der diesen Link öffnet, genau denselben Inhalt sieht, indem er zur genauen URL in der Anwendung navigiert.
Datenbindung und-synchronisierung
SPA verwendet eine minimale Bandbreite, um den Server zum Abrufen von Daten oder zum Aktualisieren des Datenmodells nach der Benutzerinteraktion in der Anwendung zu kontaktieren.,
Während ein Benutzer durch die Anwendung navigiert, wird das Datenmodell auf dem Server gleichzeitig mit einer asynchronen HTTP-Anforderung (AJAX) aktualisiert.
Basierend auf den Benutzerinteraktionen werden die Daten auf das Datenmodell im Server aktualisiert. Und diese Datenänderungen werden gleichzeitig auf der Benutzeroberfläche aktualisiert, wodurch der Benutzer immer in der Lage ist, eine aktualisierte Webseite anzuzeigen, ohne sie zu aktualisieren.
Schnelle und flüssige Reaktionszeit
SPA ist bekannt für seine schnellen und nahtlosen Reaktionen auf Benutzerinteraktionen., Ihre umfangreichen Schnittstellen behandeln die Benutzeraktion und aktualisieren die Benutzeroberfläche dynamisch ohne Verzögerung oder Anforderung vom Server. Sie können dadurch Unterbrechungen in der Erfahrung vermeiden und die Web-App eher wie eine Desktop-Anwendung verhalten.
Trennung von Ansicht und Datenschicht
SPA wird mit Model-View-Controller (MVC)-und Model-View-ViewModel (MVVM) – Mustern erstellt, Sie können die Anwendung jedoch weiterhin auf Ihrem eigenen MV* – Muster erstellen.,
Die Ansichtsdatei (zusammen mit dem CSS-Bundle), die das UI-Rendering für die Anwendung und die Datenschicht der Anwendung enthält, wird in der SPA-Architektur gut gepflegt.
Die Trennung von Ansicht und Datenschicht dient dem Benutzer dazu, die Ansichtsseite für verschiedene Datensätze wiederzuverwenden oder die Ansichtsseite zu ändern, ohne das Datenmodell in der Produktion zu beeinträchtigen.
Die Trennung von Ansicht und Datenschicht in SPA erleichtert die Versionierung und das Rollback in der Produktion.,
Einseitige Anwendungsbeispiele und Demos
Dies sind einige der realen einseitigen Anwendungsbeispiele, die mit wesentlichen JS 2-Steuerelementen erstellt wurden.
Expense Tracker
Das einseitige Anwendungsbeispiel für Expense Tracker zeigt mehrere wichtige JS 2-Steuerelemente zusammen, um die täglichen Ausgaben mit einer großartigen Benutzeroberfläche zu verfolgen und zu visualisieren.,
Expense tracker – SPA
Die verschiedenen webseiten in der anwendung, Dashboard, Transaktionen, und Über, verwenden sie die DataGrid, Diagramme, und andere Wesentliche JS 2 kontrollen für die visualisierung der daten modell. Diese Anwendung verwendet einen Seitenroutingmechanismus für Seitenübergänge, um zwischen Ansichten zu navigieren.
Benutzer können zwischen diesen Ansichten mithilfe der URLs navigieren, die aufgrund des Routings für jede Webseite erstellt werden., Da diese Anwendung mithilfe der SPA-Architektur erstellt wurde, werden alle Webseiten beim ersten Laden der Webanwendung heruntergeladen. Dann erfolgen die Seitenübergänge vollständig auf der Clientseite, ohne dass Webseiten des Servers angefordert werden. Während der Navigation zu verschiedenen Ansichten wird die URL der Anwendung entsprechend aktualisiert.
Die Datenbindung spielt in SPA eine große Rolle. Da alle Webseiten clientseitig heruntergeladen werden, sollten die UI-Komponenten dann und dort mit den aktualisierten Daten aktualisiert werden., Während Sie eine Bearbeitungsaktion auf der Transaktionswebseite ausführen, werden die Änderungen gleichzeitig auf das Datenmodell aktualisiert. Diese Änderungen werden sich auch in den UI-Komponenten widerspiegeln, die auf anderen Seiten verfügbar sind.
Da sie sich sowohl für das Rendern in Desktop-Browsern als auch in mobilen Umgebungen gut eignen, ist diese Anwendung mit einem flüssigen und reaktionsschnellen Design für das Rendern in mobilen Geräten ausgestattet.
Die Live-Demo dieser Anwendung ist auf unserer Website verfügbar und Sie können Quelle auf GitHub finden hier.,
Expense Tracker – Mobile view
Web Mail
Web Mail ist ein einseitiges Anwendungsbeispiel mit einer Outlook-ähnlichen Benutzeroberfläche zum Verwalten eines Postfachs.
Diese Anwendung ist mit reichen Schnittstellen und ein interaktives Design mit Syncfusion Komponenten wie Akkordeon, ListView und Sidebar als Single-View-Webseite gebaut. Die Anwendung ist in drei Abschnitte zum Verwalten der Mailbox unterteilt: Mailordner, E-Mail-Elemente und der Mail-Inhaltsbereich., Aufgrund seines ansprechenden Designs kann diese Anwendung problemlos auf mobilen Geräten und Desktop-Browsern gerendert werden.
Die Datenbindung spielt in dieser Anwendung eine wichtige Rolle, um das Postfach zu aktualisieren und den E-Mail-Inhalt basierend auf der Benutzerinteraktion anzuzeigen. Die E-Mail-Listenelemente werden basierend auf der Benutzerauswahl in E-Mail-Ordnern mit dem entsprechenden Inhalt aktualisiert. Der E-Mail-Bereich wird mit dem aktualisierten Inhalt aktualisiert, wenn der Benutzer ein E-Mail-Element aus der E-Mail-Liste auswählt.
Sie können die Live-Demo dieser Anwendung auf unserer Website finden und Sie können die Quelle auf GitHub finden.,
Web Mail – SPA
Die Anwendung verarbeitet mehrere Benutzerinteraktionen und aktualisiert den Inhalt entsprechend, ohne dass die Seite aktualisiert wird, sodass die Anwendung wie eine Desktop-Anwendung aussieht.
Das responsive Design dieser Anwendung macht es einfach, auf mobilen Geräten mit der besten Benutzeroberfläche zu rendern.,
Darlehensrechner
Der Darlehensrechner ist ein einseitiges Anwendungsbeispiel, das Komponenten wie DataGrid, Diagramme, Schieberegler und andere zusammen auf einer einzigen Ansichtsseite zur Berechnung einer Darlehenszahlung basierend auf Darlehensbetrag, Zinsen und Laufzeit anzeigt.,
Loan Calculator – SPA
Die Datenbindung in dieser Anwendung funktioniert so, dass die Werte eines Darlehensbetrags, einer Verzinsung und einer Laufzeit mithilfe der Schiebereglerkomponente so angepasst werden, dass die Daten für die Diagramm-und Rasterkomponenten mit den entsprechenden Daten entsprechend aktualisiert werden.
Sie können den Diagramminhalt auch aktualisieren, indem Sie den gewünschten Monat auswählen, der mit dem DatePicker-Steuerelement angezeigt werden soll. Wenn der anzuzeigende Monat geändert wird, werden die Daten für den entsprechenden Monat aus dem Modell zurückgegeben., Dasselbe wird auch im Diagrammsteuerelement aktualisiert.
Sie können die Live-Demo dieser Anwendung auf unserer Website finden und Sie können ihre Quelle auf GitHub finden.
Health Tracker
Der Health Tracker ist ein weiteres einseitiges Anwendungsbeispiel, um die Gesundheit einer Person zu verfolgen, indem sie deren Nahrungsaufnahme, Gehstrecke, Wasserverbrauch und Schlafdauer verfolgt.
Diese Anwendung ist mit reichen Schnittstellen und ein interaktives Design mit Syncfusion Kontrollen wie Diagramme und Karten als Single-View-Webseite gebaut. Die Datenbindung wird verwendet, um die Daten im Diagramm darzustellen., Die Quelle für dieses Beispiel befindet sich an diesem GitHub-Speicherort.
Health Tracker – SPA
Diagram Builder
Der Diagram Builder ist eine Anwendung, die bei der Erstellung der verschiedenen Diagramme für verschiedene Anwendungsfälle wie Organigramme, hierarchische Bäume und Mind Maps hilft.
Diese Anwendung wurde mit leistungsstarken und funktionsreichen Steuerelementen wie Diagramm, Farbauswahl, Dialog und Bereichsregler erstellt. Die Quelle dieses Beispiels befindet sich an diesem GitHub-Speicherort.,
Diagram Builder – SPA
Story Estimator
Der Story Estimator ist ein effektives, agiles Tool zum Schätzen von Story-Punkten für Storys mithilfe von Planungs-Poker-Techniken.
Diese Anwendung ist mit Steuerelementen wie DataGrid, Diagrammen, Eingabemaske, Schaltfläche, Optionsfeld und Kontrollkästchen erstellt. Die Quelle für dieses Beispiel befindet sich an diesem GitHub-Speicherort.,
Story Estimator – SPA
Stock Chart
Mit dem Stock Chart können Sie den Aktienkurs eines Unternehmens über einen bestimmten Zeitraum verfolgen und visualisieren.
Diese Anwendung ist mit den Diagrammen, Symbolleiste, DateTimePicker, Dropdown-und Button-Steuerelemente gebaut. Sie können seine Quelle auf GitHub finden.,
Stock Chart – SPA
Asset Management
Die Asset Management-Anwendung ist ein einseitiges Anwendungsbeispiel zum Verfolgen und Visualisieren der Software-und Hardware-Assets einer Organisation.
Diese Anwendung ist mit dem DataGrid, Diagramme, TreeMap und DateRangePicker Kontrollen gebaut. Sie können seine Quelle auf GitHub finden.,
Asset Management – SPA
Überlegungen zu SPA
Neben den vielfältigen Vorteilen der einseitigen Anwendung gibt es bei SPA einige besondere Überlegungen zu beachten:
- Man sollte beim Erstellen eines SPA objektorientierte Prinzipien sicherstellen. Wenn dies ignoriert wird, führt dies zu Speicherlecks im Browser. Dadurch verlangsamt sich die Anwendung und beeinträchtigt dadurch ihre Leistung.
- Griff Browser Zurück-Taste richtig in Single-Page-Anwendungen., Wenn nicht, kann der Benutzer auf die Schaltfläche „Browser zurück“ klicken, was zu einem Workflow-Verlust führt.
Die richtigen Techniken können jedoch all diese Probleme lösen.
Zusammenfassung
In diesem Blogbeitrag haben wir die Vorteile von einseitigen Anwendungen gegenüber mehrseitigen Anwendungen gesehen. Außerdem haben wir die realen einseitigen Anwendungsbeispiele gesehen, die mit mehreren Syncfusion Essential JS 2-Steuerelementen erstellt wurden.
Die zuvor diskutierten einseitigen Anwendungsbeispiele sind auch für Angular, JavaScript, ASP.NET Kern und ASP.,NET MVC-Plattformen, und Sie können die Live-Demo dieser Anwendungen auf unserer Website finden. Sie können hier auch andere reale Anwendungen überprüfen, die mit Syncfusion-Komponenten erstellt wurden.
Wir empfehlen, den Quellcode selbst zu überprüfen, der auf GitHub verfügbar ist und problemlos ausgeführt werden kann, um zu sehen, wie einseitige Anwendungen mit Syncfusion-Komponenten erstellt werden.