Einseitige Anwendung

A Einseitige Anwendung (SPA) ist ein Internetanwendung oder Webseite Das interagiert mit dem Benutzer, indem er den Strom dynamisch neu schreibt Website mit neuen Daten aus dem Webserveranstelle der Standardmethode von a Webbrowser Laden ganz neuer Seiten. Das Ziel sind schnellere Übergänge, die die Website machen Gefühl eher wie a einheimisch App.

In einem Spa tritt eine Seite Aktualisierung niemals auf; Stattdessen alles notwendig Html, JavaScript, und CSS Der Code wird entweder vom Browser mit einer einzelnen Seite geladen.^[1] oder die entsprechenden Ressourcen werden dynamisch geladen und nach Bedarf zur Seite hinzugefügt, normalerweise als Reaktion auf Benutzeraktionen.

Geschichte

Die Ursprünge des Begriffs Einseitige Anwendung sind unklar, obwohl das Konzept mindestens 2003 diskutiert wurde.^[2] Stuart Morris, ein Programmierstudent an der Cardiff University in Wales, schrieb die in sich geschlossene Website unter Slashdotslash.com mit den gleichen Zielen und Funktionen im April 2002.^[3] und später im selben Jahr beschrieben Lucas Birdeau, Kevin Hakman, Michael Peachey und Clifford Yeh eine einseitige Implementierung im US-Patent 8,136,109.^[4]

JavaScript kann in einem Webbrowser verwendet werden, um die anzuzeigen Benutzeroberfläche (UI), die Anwendungslogik ausführen und mit einem Webserver kommunizieren. Reifen frei Bibliotheken sind verfügbar, die das Aufbau eines Spa unterstützen und die Menge an JavaScript -Code -Entwicklern verringern.

Technische Ansätze

Es stehen verschiedene Techniken zur Verfügung, mit denen der Browser auch dann eine einzelne Seite beibehalten kann, wenn die Anwendung eine Serverkommunikation erfordert.

Hashes dokument

HTML -Autoren können Element -IDs nutzen, um verschiedene Abschnitte des HTML -Dokuments anzuzeigen oder auszublenden. Mithilfe von CSS können Autoren mit dem Selektor "#target" nur den Abschnitt der Seite angezeigt, auf den der Browser navigiert ist.

JavaScript -Frameworks

Webbrowser -JavaScript -Frameworks und Bibliotheken, wie z. Angularjs, Ember.js, Extjs, Knockout.js, Meteor.js, Reagieren, Vue.js, und Svelte haben Spa -Prinzipien übernommen. Abgesehen von ExtJs sind alle diese frei.

• Angularjs ist ein voll kundenseitiges Framework. AngularJS 'Vorlagen basieren auf bidirektional UI -Datenbindung. Die Datenbindung ist eine automatische Methode, um die Ansicht zu aktualisieren, wenn sich das Modell ändert, sowie das Modell zu aktualisieren, wenn sich die Ansicht ändert. Die HTML -Vorlage wird im Browser zusammengestellt. Der Kompilierungsschritt erzeugt reine HTML, die der Browser in die Live-Ansicht neu rägt. Der Schritt wird für nachfolgende Seitenansichten wiederholt. In der herkömmlichen Server-Seite-HTML-Programmierung interagieren Konzepte wie Controller und Modell innerhalb eines Serverprozesses, um neue HTML-Ansichten zu erstellen. Im AngularJS -Framework werden der Controller und die Modellzustände im Client -Browser aufrechterhalten. Daher können neue Seiten ohne Interaktion mit einem Server generiert werden.
• Ember.js ist ein clientseitiges JavaScript-Webanwendungs-Framework basierend auf dem Model View Controller (MVC) Software -Architekturmuster. Es ermöglicht Entwicklern, skalierbare einseitige Anwendungen zu erstellen, indem gemeinsame Redewendungen und Best Practices in ein Framework einbezogen werden, das ein reichhaltiges Objektmodell, deklarative Zwei-Wege Verwaltungsstatus verwalten.
• Extjs ist auch ein clientseitiges Framework, mit dem MVC -Anwendungen erstellt werden können. Es verfügt über ein eigenes Ereignissystem, ein eigenes Fenster- und Layout -Management, eine staatliche Verwaltung (Speicher) und verschiedene UI -Komponenten (Gitter, Dialogfenster, Formularelemente usw.). Es hat ein eigenes Klassensystem mit dynamischer oder statischer Lader. Die mit extJs erstellte Anwendung kann entweder selbst (mit Status im Browser) oder mit dem Server (z. B. mit SICH AUSRUHEN API, mit der die internen Geschäfte gefüllt werden können). EXTJS hat nur Funktionen für die Verwendung von LocalStorage eingebaut, sodass größere Anwendungen einen Server benötigen, um Status zu speichern.
• Knockout.js ist ein clientseitiges Framework, das Vorlagen basierend auf dem verwendet Modell-View-ViewModel Muster.
• Meteor.js ist ein JavaScript-Framework (Client-Server) Full-Stack (Client-Server), das ausschließlich für Spas entwickelt wurde. Es verfügt über eine einfachere Datenbindung als Angular, Ember oder Reactjs.^[5] und verwendet die Verteilter Datenprotokoll^[6] und ein Veröffentlichungs -Subscribe -Muster Um automatisch Datenänderungen in Echtzeit an Clients zu verbreiten, ohne dass der Entwickler einen Synchronisationscode schreiben muss. Die vollständige Stack -Reaktivität stellt sicher, dass alle Schichten von der Datenbank bis zu den Vorlagen bei Bedarf automatisch aktualisiert werden. Ökosystempakete wie Serverseite Rendering^[7] Behandeln Sie das Problem der Suchmaschinenoptimierung.
• Reagieren ist ein JavaScript -Bibliothek zum Bauen Benutzeroberflächen. Es wird von gepflegt von Facebook, Instagram und eine Gemeinschaft einzelner Entwickler und Unternehmen. React verwendet eine neue Sprache, eine Mischung aus JS und HTML (eine Teilmenge von HTML). Mehrere Unternehmen reagieren mit reagieren mit Redux (JavaScript -Bibliothek) Dies fügt staatliche Verwaltungsfunktionen hinzu, mit denen Entwickler (mit mehreren anderen Bibliotheken) komplexe Anwendungen erstellen können.^[8]
• Vue.js ist ein JavaScript -Framework zum Erstellen von Benutzeroberflächen. VUE -Entwickler bieten auch Vuex für das staatliche Management.
• Svelte ist ein Framework zum Erstellen von Benutzeroberflächen, in denen Svelte -Code in JavaScript DOM -Manipulationen (Dokumentobjektmodell) kompiliert wird, um zu vermeiden, dass ein Framework für den Client gebündet werden muss und eine einfachere Syntax für Anwendungsentwicklung ermöglicht wird.

Ajax

Ab 2006 war die bekannteste Technik verwendet Ajax.^[1] AJAX beinhaltet die Verwendung asynchroner Anforderungen an einen Server für Xml oder JSON Daten, wie beispielsweise mit JavaScripts Xmlhttprequest oder moderner Fetch () (seit 2017) oder die veralteten ActiveX -Objekt. Im Gegensatz zu deklarativ Ansatz der meisten SPA -Frameworks, mit AJAX Die Website verwendet direkt JavaScript oder eine JavaScript -Bibliothek wie z. JQuery Um das zu manipulieren Dom und HTML -Elemente bearbeiten. Ajax wurde von Bibliotheken wie weiter populär gemacht JQuery, das eine einfachere Syntax liefert und das AJAX -Verhalten über verschiedene Browser normalisiert, die historisch gesehen ein unterschiedliches Verhalten hatten.

Websockets

Websockets sind eine bidirektionale Kommunikationstechnologie für Kunden-Server-Server in Echtzeit, die Teil der HTML5-Spezifikation ist. Für die Echtzeitkommunikation ist ihre Verwendung Ajax in Bezug auf die Leistung überlegen^[9] und Einfachheit.

Server-Sent-Ereignisse

Server-Sent-Ereignisse (SSES) ist eine Technik, bei der Server die Datenübertragung an Browser -Clients initiieren können. Sobald eine erste Verbindung hergestellt wurde, bleibt ein Ereignisstrom bis zum geschlossenen Kunden geöffnet. SSEs werden über herkömmliche HTTP gesendet und verfügen über eine Vielzahl von Funktionen, die Websockets durch das Design fehlen, z. B. automatische Wiederverbindung, Ereignis -IDs und die Möglichkeit, willkürliche Ereignisse zu senden.^[10]

Browser -Plugins

Obwohl diese Methode veraltet ist, können asynchrone Aufrufe an den Server auch mit Browser-Plug-in-Technologien wie z. Silberlicht, Blinken, oder Java -Applets.

Datentransport (XML, JSON und Ajax)

Anforderungen an den Server führen normalerweise zu beiden Rohdaten (z. B.,, Xml oder JSON) oder neu Html zurückgegeben werden. In dem Fall, in dem HTML vom Server zurückgegeben wird, aktualisiert JavaScript im Client einen Teilbereich des DOM (Dokumentobjektmodell). Wenn Rohdaten zurückgegeben werden, häufig ein clientseitiger JavaScript Xml / (XSL) Prozess (und im Fall von JSON a Schablone) wird verwendet, um die Rohdaten in HTML zu übersetzen, um einen Teilbereich des DOM zu aktualisieren.

Serverarchitektur

Dünne Serverarchitektur

Ein Spa verschiebt Logik vom Server zum Client, wobei sich die Rolle des Webservers zu einer reinen Daten -API oder einem Webdienst entwickelt. Diese architektonische Verschiebung wurde in einigen Kreisen "dünne Serverarchitektur" geprägt, um hervorzuheben, dass die Komplexität vom Server zum Client verschoben wurde, mit dem Argument, dass dies letztendlich die Gesamtkomplexität des Systems verringert.

Dicke statige Serverarchitektur

Der Server behält den erforderlichen Status im Speicher des Client -Status der Seite. Auf diese Weise sendet der Server, wenn eine Anforderung auf den Server auf den Server trifft (normalerweise Benutzeraktionen) Client Dom). Gleichzeitig wird der Status auf dem Server aktualisiert. Der größte Teil der Logik wird auf dem Server ausgeführt, und HTML wird normalerweise auch auf dem Server gerendert. In gewisser Weise simuliert der Server einen Webbrowser, empfängt Ereignisse und führt Delta -Änderungen im Serverstatus durch, die automatisch an den Client verbreitet werden.

Dieser Ansatz benötigt mehr Serverspeicher und Serververarbeitung. Der Vorteil ist jedoch ein vereinfachtes Entwicklungsmodell, da a) die Anwendung normalerweise vollständig im Server codiert wird und b) Daten und UI -Status im Server im selben Speicherplatz ohne Nr. Bedarf an benutzerdefinierten Client/Server -Kommunikationsbrücken.

Dicke staatenlose Serverarchitektur

Dies ist eine Variante des staatlichen Serveransatzes. Die Client -Seite sendet Daten, die ihren aktuellen Status repräsentieren, normalerweise über AJAX -Anforderungen an den Server. Mit diesen Daten kann der Server den Client -Status des Teils der Seite rekonstruieren, der geändert werden muss und die erforderlichen Daten oder den erforderlichen Code (z. Es an einen neuen Zustand, der normalerweise den Seitenbaum gemäß der Kundenaktion geändert hat, die die Anfrage motiviert hat.

Dieser Ansatz erfordert, dass mehr Daten an den Server gesendet werden und möglicherweise mehr Rechenressourcen pro Anforderung erfordern, um den Client -Seitenstatus auf dem Server teilweise oder vollständig zu rekonstruieren. Gleichzeitig ist dieser Ansatz leichter skalierbar, da auf dem Server keine Seitungsdaten pro Klient aufbewahrt werden. Daher können AJAX-Anforderungen an verschiedene Serverknoten versandt werden, ohne dass die Freigabe von Sitzungsdaten oder die Server-Affinität erforderlich ist.

Vor Ort laufen

Einige Spas können aus einer lokalen Datei mit dem ausgeführt werden Datei URI -Schema. Auf diese Weise können Benutzer das SPA von einem Server herunterladen und die Datei von einem lokalen Speichergerät ausführen, ohne von der Serverkonnektivität abhängig zu sein. Wenn ein solches Spa Daten speichern und aktualisieren möchte, muss es Browserbasiert verwenden Webspeicher. Diese Anwendungen profitieren von Fortschritten mit verfügbaren mit HTML5.^[11]

Herausforderungen mit dem SPA -Modell

Da das Spa eine Entwicklung abseits des staatenlosen Page-Redraw-Modells ist, für das Browser ursprünglich entwickelt wurden, sind einige neue Herausforderungen entstanden. Mögliche Lösungen (unterschiedlicher Komplexität, Vollständigkeit und Autorenkontrolle) umfassen:^[12]

• Client-Seite-JavaScript-Bibliotheken.
• Serverseitige Webrahmen, die sich auf das SPA-Modell spezialisiert haben.^[13][14][15]
• Die Entwicklung von Browsern und die HTML5 -Spezifikation,^[16] für das SPA -Modell entwickelt.

Suchmaschinenoptimierung

Wegen des Mangels an JavaScript -Ausführung bei Crawlers einiger beliebter Web -Suchmaschinen,^[17] SEO (Suchmaschinenoptimierung) hat historisch ein Problem für öffentliche Websites präsentiert, die das SPA -Modell annehmen möchten.^[18]

Zwischen 2009 und 2015, Google Webmaster Central Vorgeschlagen und empfahl dann ein "Ajax Crawlling -Schema"^[19][20] Verwenden eines anfänglichen Ausrufezeichens in Fragment -Identifikatoren für staatlich Ajax Seiten (#!). Besonderes Verhalten muss von der Spa -Site implementiert werden, um die Extraktion relevanter Metadaten durch den Crawler der Suchmaschine zu ermöglichen. Für Suchmaschinen, die dies nicht unterstützen URL Hash Schema, die Hashed -URLs des Spa bleiben unsichtbar. Diese "Hash-Bang" -Heris wurden von einer Reihe von Schriftstellern, darunter Jeni Tennison im W3C, als problematisch angesehen, weil sie Seiten für diejenigen, die nicht haben JavaScript in ihrem Browser aktiviert. Sie brechen auch HTTP Referer Header als Browser dürfen die Fragment -Kennung nicht im Referer -Header senden.^[21] Im Jahr 2015 veraltete Google seinen Hash-Bang Ajax Crawling-Vorschlag.^[22]

Alternativ können Anwendungen die erste Seite auf dem Server und den nachfolgenden Seitenaktualisierungen im Client laden. Dies ist traditionell schwierig, da der Rendering -Code möglicherweise in einer anderen Sprache oder einem anderen Framework auf dem Server und im Client geschrieben werden muss. Unter Verwendung von logiklosen Vorlagen, dem Überschreiten von einer Sprache in eine andere oder derselben Sprache auf dem Server und dem Client kann dazu beitragen, die Menge an Code zu erhöhen, die gemeinsam genutzt werden kann.

Im Jahr 2018 führte Google dynamisches Rendering als eine weitere Option für Websites ein, die Crawlers eine nicht-javaScript-schwere Version einer Seite für indizierende Zwecke anbieten möchten.^[23] Dynamisches Rendering-Schalter zwischen einer Version einer Seite, die eine clientseitige Seite ist, und einer vorgezogenen Version für bestimmte Benutzeragenten. Dieser Ansatz beinhaltet Ihr Webserver, der Crawler (über den Benutzeragenten) erkennt und an einen Renderer weitergeleitet wird, von dem sie dann eine einfachere Version des HTML -Inhalts erhalten.

Da die SEO -Kompatibilität in SPAs nicht trivial ist, ist es erwähnenswert, dass SPAs üblicherweise in einem Kontext verwendet werden, in dem die Suchmaschinenindizierung entweder eine Anforderung oder wünschenswert ist. Anwendungsfälle umfassen Anwendungen, die private Daten aufnehmen, die hinter einem versteckt sind Authentifizierung System. In den Fällen, in denen diese Anwendungen Konsumgüter sind, wird häufig ein klassisches "Page -Red -Raw" -Modell für die Anwendungs ​​-Landing -Seite und die Marketing -Site verwendet, die genügend Meta -Daten bereitstellt, damit die Anwendung als Hit in einer Suchmaschinenabfrage angezeigt wird. Blogs, Support -Foren und andere traditionelle Seitenkrawartefakte befinden sich häufig um das Spa, das Suchmaschinen mit relevanten Begriffen säen kann.

Ab 2021 und Google speziell ist die SEO -Kompatibilität für ein einfaches Spa unkompliziert und erfordert nur wenige einfache Bedingungen, um erfüllt zu werden.^[24] Ein praktischer Leitfaden für ein fortgeschritteneres Spa, das selektives Vorbereitung verwendet, ist ebenfalls verfügbar.^[25]

Eine Möglichkeit, die Codemenge zu erhöhen, die zwischen Servern und Clients gemeinsam genutzt werden kann Schnurrbart oder Lenker. Solche Vorlagen können aus verschiedenen Hostsprachen gerendert werden, wie z. Rubin auf dem Server und JavaScript im Kunden. Das ledigliche Teilen von Vorlagen erfordert jedoch normalerweise eine Doppelarbeit von Geschäftslogik Wird verwendet, um die richtigen Vorlagen auszuwählen und sie mit Daten zu füllen. Das Rendern von Vorlagen kann negative Leistungseffekte haben, wenn nur ein kleiner Teil der Seite aktualisiert wird - wie der Wert einer Texteingabe in einer großen Vorlage. Das Ersetzen einer gesamten Vorlage kann auch die Auswahl oder den Cursorposition eines Benutzers stören, wobei nur der geänderte Wert aktualisiert wird. Um diese Probleme zu vermeiden, können Anwendungen verwendet werden UI -Datenbindungen oder granular Dom Manipulation, um nur die entsprechenden Teile der Seite zu aktualisieren, anstatt ganze Vorlagen neu zu rendern. Ranglisten.^[26]

Client/Server -Code -Partitionierung

Browserverlauf

Da ein Spa per Definition "eine einzelne Seite" ist, unterbricht das Modell das Design des Browsers für die Seitungshistorie -Navigation mit den Schaltflächen "Vorwärts" oder "zurück". Dies zeigt ein Usability -Hindernis, wenn ein Benutzer die Rückschaltfläche drückt und den vorherigen Bildschirmstatus innerhalb des Spa erwartet. Stattdessen wird die Einzelseite der Anwendung und die vorherige Seite im Browser -Verlauf vorgestellt.

Die traditionelle Lösung für Spas bestand darin, den Hash der Browser -URL zu ändern Fragment -Kennung In Übereinstimmung mit dem aktuellen Bildschirmzustand. Dies kann mit JavaScript erreicht werden und führt dazu, dass URL -Verlaufsereignisse im Browser aufgebaut werden. Solange das SPA den gleichen Bildschirmzustand aus Informationen, die im URL-Hash enthalten sind, wiederbelebt werden können, wird das erwartete Verhalten der Rückseite beibehalten.

Um dieses Problem weiter anzugehen, wurde die HTML5 -Spezifikation eingeführt Pushstate und Ersetzen Bereitstellung programmatischer Zugriff auf die tatsächliche URL- und Browser -Geschichte.

Analyse

Analytics -Tools wie z. Google Analytics Verlassen Sie sich stark auf ganze neue Seiten, die im Browser geladen werden, die durch eine neue Seitenlast initiiert werden. Spas funktionieren nicht so.

Nach dem Laden der ersten Seite werden alle nachfolgenden Seiten- und Inhaltsänderungen intern von der Anwendung behandelt, die einfach eine Funktion zum Aktualisieren des Analysepakets aufrufen sollte. Der Browser wird nicht aufgerufen und löst niemals eine neue Seitenladung aus, nichts wird zum Browserverlauf hinzugefügt, und das Analytics -Paket hat keine Ahnung, wer auf der Website was tut.

Sicherheitsscanning

Ähnlich wie die Probleme mit Suchmaschinencrawlern, Dastwerkzeuge kann mit diesen javascriptreichen Anwendungen kämpfen. Zu den Problemen können das Fehlen von Hypertext -Links, Speicherverbrauch und Ressourcen, die vom Spa geladen werden, normalerweise von einem verfügbar gemacht werden Programmierschnittstelle oder API. Einseiten -Anwendungen unterliegen weiterhin denselben Sicherheitsrisiken wie herkömmliche Webseiten wie z. Cross-Site Scripting (XSS), aber auch eine Vielzahl anderer einzigartiger Schwachstellen wie der Datenbelastung über API und Client-Seitenlogik und clientseitige Durchsetzung der serverseitigen Sicherheit.^[27] Um eine einzelne Seitenanwendung effektiv zu scannen, muss ein Dast-Scanner in der Lage sein, die clientseitige Anwendung auf zuverlässige und wiederholbare Weise zu navigieren, um alle Bereiche der Anwendung und Abfangen aller Anforderungen zu ermöglichen, die die Anwendung an Remote-Server sendet (z. B. API -Anfragen). Es gibt nur wenige kommerzielle Tools, die solche Aktionen in der Lage sind, aber es gibt definitiv solche Tools.

Hinzufügen von Seite lädt zu einem Spa

Mit der HTML5 -Historie -API ist es möglich, Seitenladeereignisse zu einem Spa hinzuzufügen. Dies wird dazu beitragen, Analysen zu integrieren. Die Schwierigkeit besteht darin, dies zu verwalten und sicherzustellen, dass alles genau verfolgt wird. Dies beinhaltet die Überprüfung auf fehlende Berichte und Doppeleinträge. Einige Frameworks bieten frei Analytics -Integrationen, die sich mit den meisten wichtigsten Analyseanbietern befassen. Entwickler können sie in die Anwendung integrieren und sicherstellen, dass alles korrekt funktioniert, aber es ist nicht nötig, alles von Grund auf neu zu machen.^[26]

Beschleunigen der Seitenlast

Es gibt einige Möglichkeiten, die anfängliche Last eines Spa zu beschleunigen, z. Es ist jedoch nicht möglich, sich von der Tatsache zu entfernen, dass es das Framework herunterladen muss, zumindest einige der Anwendungscode. und wird eine API für Daten treffen, wenn die Seite dynamisch ist.^[26] Dies ist ein Kompromisszenario "JETZT ZAHLE MEINE ZAHLE MEINE PAY MICH". Die Frage der Leistung und der Wartemaschine bleibt eine Entscheidung, die der Entwickler treffen muss.

Seitenlebenszyklus

Ein Spa ist in der anfänglichen Seitenlade vollständig geladen und die Seitenregionen werden durch neue Seitenfragmente aus dem Server auf Bedarf ersetzt oder aktualisiert. Um ein übermäßiges Herunterladen ungenutzter Funktionen zu vermeiden, wird ein Spa häufig zunehmend mehr Funktionen herunterladen, wenn sie benötigt werden, entweder kleine Fragmente der Seite oder vollständige Bildschirmmodule.

Auf diese Weise besteht eine Analogie zwischen "Zuständen" in einem Spa und "Seiten" auf einer traditionellen Website. Da die "Statusnavigation" auf derselben Seite analog zur Seitennavigation ist, kann theoretisch jede Seiten-basierte Website auf einseitige Ersetzen auf derselben Seite nur die geänderten Teile konvertiert werden.

Der SPA -Ansatz im Web ähnelt dem Einzeldokumentschnittstelle (SDI) Präsentationstechnik beliebt in einheimisch Desktop -Anwendungen.

Siehe auch

• Progressive Webanwendung (PWA)
• Serverseitiges Skripting

Verweise

Externe Links

• Migrierende mehrseitige Webanwendungen auf einseitige AJAX-Schnittstellen (Delft University of Technology)
• Das einseitige Schnittstellenmanifesto
• Dynamisches Rendering