WikiDer > Einzelseitenanwendung

Single Page Application

EIN Einzelseitenanwendung (SPA), auch a . genannt Single-Page-Schnittstelle (SPI) genannt, ist ein Internetanwendung oder Webseite das passt auf eine Single Website mit dem Ziel, eine reibungslose Benutzererfahrung zu bieten, vergleichbar mit einem Computer Programm die auf dem eigenen Computer des Benutzers ausgeführt wird. Es stehen verschiedene Techniken zur Verfügung Einzelseitenanwendung bauen, in dem HTML-Skripting spielt eine wesentliche Rolle. Die Techniken können auch verwenden: HTML-Formulare, HTML-Frames und XML.

In einem SPA alle notwendigen Codes - HTML, Javascript und C.S.S - mit einem einzelnen Seitenladevorgang abgerufen[1], oder die erforderlichen Ressourcen werden dynamisch geladen und der Seite nach Bedarf hinzugefügt, normalerweise als Reaktion auf Benutzeraktionen. Die Seite wird zu keinem Zeitpunkt des Prozesses neu geladen oder die Kontrolle auf eine andere Seite übertragen, obwohl moderne Webtechnologien (wie z HTML5), ermöglichen die Wahrnehmung und Navigation einzelner logischer Seiten in der Anwendung. Die Interaktion mit einem SPA beinhaltet oft eine dynamische Kommunikation mit dem Webserver der hinter den Kulissen arbeitet.

Der Begriff Single Page Application wurde 2005 von Steve Yen geprägt, obwohl das Konzept zumindest 2003 bereits diskutiert wurde[2]. Stuart 'stunix' Morris hat seine SPA-Website unter www.slashdotslash.com für denselben Zweck und dieselbe Funktion erstellt[3] in 2002[4], im selben Jahr, in dem Lucas Birdeau, Kevin Hakman, Michael Peachey und Clifford Yeh in der US-Patentanmeldung 8.136.109 eine SPA-Implementierung beschrieben[5]

Moderne Browser, die HTML5 interpretieren können, ermöglichen es Entwicklern, Benutzeroberfläche und verlagern Sie die Anwendungslogik von Webservern auf die Klient. Komplett Open SourceBibliotheken Unterstützung beim Erstellen von SPAs, ohne dass die Entwickler zu tief in JavaScript eintauchen oder mit technischen Problemen kämpfen müssen.

Merkmale von SPAs

Eine fachmännisch erstellte Single Page Application hat die folgenden Funktionen:

  • Teilen Sie den Inhalt in kleine Einheiten auf (Englisch: stückeln): Die Webseite wird erstellt, indem Bits von HTML-Snippets und JSON-Daten geladen werden, anstatt sie jedes Mal hinzuzufügen Anfrage den vollständigen HTML-Code von einem Webserver (Backbone.js, Pjax, jQuery, Fazit.js)
  • Controller: JavaScript-Code, der komplexe Manipulationen von Dokumentobjektmodell (DOM) und der Umgang mit Daten, Anwendungslogik und AJAX-Anfragen wird durch Controller ersetzt, die Ansichten und Modelle mithilfe von . trennen Model View Controller (MVC) oder Model-View-ViewModel (MVVM) Muster (Backbone.js, Knockout.js, JavascriptMVC, Angular)
  • Benutzen Vorlagen: die Codierung der Manipulation der Benutzeroberfläche (Englisch Benutzeroberfläche, abgekürzt UI) und DOM wird ersetzt durch deklarativ Verknüpfen von Daten mit HTML-Vorlagen (Knockout.js, Moustache, jQuery-Vorlagen, Underscore.js, Angular)
  • Routing: Auswahl von Ansichten und Navigation (ohne Neuladen der Seite), die den Seitenzustand, Elemente und Daten speichern (History.js, Crossroads.js, Backbone.js, Pjax, Angular)
  • Echtzeit Kommunikation: bidirektionale Kommunikation zwischen der Client-Anwendung und dem Webserver ersetzt unidirektionale Anfragen vom Browser (HTML5 WebSockets, Socket.io, SignalR)
  • Lokaler Speicher: Optionen zum Speichern von Daten in einem Browser für eine bessere Leistung Performance) und offline Zugriff ersetzen Cookies und intensive Datenlasten vom Webserver (HTML5 localStorage).

Technische Ansätze

Es stehen mehrere Techniken zur Verfügung, die es dem Browser ermöglichen, eine einzelne Seite beizubehalten, selbst wenn die Anwendung eine Kommunikation mit dem Server benötigt.

JavaScript-Frameworks

JavaScript-Rahmen für Webbrowser, wie z AngularJS, YUI-App-Framework[6] und Reagieren haben das SPA-Konzept angewendet.

  • Eckig ist ein komplettes Kundenseite Rahmen. Die Vorlagenfunktionen von Angular basieren auf bidirektionaler Datenverknüpfung. Die Datenverknüpfung ist eine automatische Methode zum Aktualisieren der Ansicht, wenn sich das Modell ändert, sowie zum Aktualisieren des Modells, wenn sich die Ansicht ändert. Die HTML-Vorlage wird im Browser kompiliert. Der Kompilierungsschritt erzeugt reines HTML, wonach der Browser die aktuelle Ansicht erneut anzeigt. Der Schritt wird für nächstes wiederholt Seitenaufrufe. Bei der traditionellen serverseitigen HTML-Programmierung arbeiten Controller- und Modellkomponenten innerhalb eines Prozesses auf dem Server, um neue HTML-Ansichten zu erzeugen. Im Angular-Framework werden Controller und Modell im Client-Browser verwaltet. Somit können neue Seiten generiert werden, ohne mit einem Server zu interagieren.
  • Das YUI App Framework ist ein Kombinationspaket aus den Komponenten App, Model, Model List, Router und View; Zusammen bilden sie ein MVC-ähnliches Framework zum Schreiben von Single Page Applications mit JavaScript. Diese Komponenten können einzeln oder zusammen verwendet werden, um eine Vielzahl von Anwendungen zu erstellen, von einfachen nicht interaktiven Webseiten bis hin zu großen Anwendungen mit URL-basiertem Routing, Datenverknüpfung und vollständiger Client-Server-Synchronisierung.

AJAX

Eine bekannte Technik, die derzeit verwendet wird, ist Ajax. AJAX verwendet hauptsächlich die XMLHTTPObjekt von JavaScript anfordern. Andere AJAX-Techniken verwenden die HTML-Elemente iframe oder Skript. Beliebte Bibliotheken wie jQuery, das das AJAX-Verhalten über Browser verschiedener Hersteller hinweg standardisiert, hat die AJAX-Technologie weiter populär gemacht.

WebSocket

WebSocket ist ein Protokoll für die bidirektionale Kommunikation über ein einzelnes TCP-Verbindung. Dieses Protokoll ist Teil der HTML5-Spezifikation und wird für Single Page Applications verwendet.

Browser-Plugins

Asynchrone Aufrufe zum Server können auch realisiert werden mit Plugins für Browser, wie z Microsoft Silverlight, Adobe Flash oder Java-Applets.

Datentransport (XML, JSON und AJAX)

Anfragen zum Server führen in der Regel zu Rohdaten (z. XML oder JSON) oder neu HTML die zurückgegeben wird. Falls der Server HTML zurückgibt, aktualisiert clientseitiges JavaScript einen Teil des DOM. Wenn Rohdaten zurückgegeben werden, wird oft ein clientseitiges JavaScript verwendet XML / XSLT[7] Prozess (und im Fall von JSON eine Vorlage), um die Rohdaten in HTML zu übersetzen, das dann verwendet wird, um einen Teilbereich des DOM zu aktualisieren.

Serverarchitektur

Thin-Server-Architektur

Ein SPA verschiebt die Logik vom Server zum Client. Dadurch entwickelt sich die Rolle des Webservers zu einem reinen DatenAPI oder Webservice. Diese Verschiebung in der Architektur wird manchmal als „Thin-Server-Architektur“ bezeichnet. Thin-Server-Architektur), um zu betonen, dass die Komplexität vom Server auf den Client verlagert wird, und argumentiert, dass dies die Gesamtkomplexität des Systems verringert.

Dicke Serverarchitektur mit nachverfolgtem Status

Der Server hält den erforderlichen Zustand (Englisch: Zustand) der Kundenseite. Wenn eine Anfrage beim Server eintrifft (normalerweise als Ergebnis einer Benutzeraktion), sendet der Server das entsprechende HTML und/oder JavaScript mit den konkreten Änderungen, um den Client in den neuen gewünschten Zustand zu versetzen (normalerweise Hinzufügen/Entfernen/Ändern eines Teils von das Datenobjektmodell des Kunden). Gleichzeitig wird der Zustand auf dem Server aktualisiert. Die meiste Logik wird auf dem Server ausgeführt und HTML wird normalerweise auch auf dem Server erstellt. In gewisser Weise simuliert der Server einen Webbrowser, indem er Ereignisse empfängt (Englisch: Veranstaltungen) und führen Serverstatusänderungen durch, die automatisch an den Client weitergegeben werden.Dieser Ansatz erfordert mehr Speicher und Prozessorleistung vom Server, aber der Vorteil ist ein vereinfachtes Entwicklungsmodell, da die Anwendung normalerweise vollständig im Server codiert ist, undb) die Daten und der Zustand der Benutzeroberfläche werden im gleichen Speicherplatz geteilt, wodurch Client/Server-Kommunikationsbrücken überflüssig werden.

Dicke Serverarchitektur ohne nachverfolgten Status

Dies ist eine Variation des serverseitigen Ansatzes zur Statusverfolgung. In diesem Fall sendet die Clientseite Informationen über ihren aktuellen Status an den Server, normalerweise über AJAX-Anfragen. Mit diesen Informationen kann der Server den Client-Zustand des zu ändernden Teils der Seite rekonstruieren und die erforderlichen Daten oder Codes generieren. Dies geschieht beispielsweise mithilfe von JSON oder JavaScript, das an den Client zurückgesendet wird, um ihn in einen neuen Zustand zu versetzen, normalerweise durch Ändern des DOM-Baums der Seite nach einer Benutzeraktion, die die Anforderung ausgelöst hat.

Dieser Ansatz erfordert, dass mehr Daten an den Server gesendet werden und kann mehr Prozessorleistung pro Anforderung erfordern, um den Client-Zustand auf dem Server teilweise oder vollständig zu rekonstruieren. Gleichzeitig ist dieser Ansatz skalierbarer, da keine Seitendaten pro Client auf dem Server gespeichert werden müssen, was AJAX-Anfragen an mehrere Server ermöglicht.Knoten gesendet werden, ohne dass Sitzungsdaten zwischen Servern ausgetauscht werden müssen.

Lokal ausführen

Einige SPAs können aus einer lokalen Datei mit dem Datei-URI-Schema ausgeführt werden, wie in RFC1630 definiert[8] und RFC1738[9]. Dies gibt Benutzern die Möglichkeit, ein SPA zu nutzen herunterladen von einem Server und laufen von einem lokalen Speichergerät, ohne sich auf a Verknüpfung mit einem Server. Wenn ein solches SPA Daten speichern und bearbeiten möchte, muss es einen browserbasierten Webspeicher verwenden (Englisch: Webspeicher). Diese Anwendungen nutzen die zusätzlichen Möglichkeiten, die HTML5 bietet.

Herausforderungen mit dem SPA-Modell

Da das SPA-Modell eine Entwicklung ist, die sich vom zustandslosen Modell der Neuerstellung von Webseiten unterscheidet, für das Browser ursprünglich vorgesehen waren, sind eine Reihe neuer Herausforderungen entstanden. Für jedes dieser Probleme gibt es eine effektive Lösung[10] unter Verwendung von:

  • Clientseitige JavaScript-Bibliotheken zur Behebung verschiedener Probleme
  • Serverseitige Web-Frameworks, die auf das SPA-Modell spezialisiert sind[11][12][13]
  • Die Weiterentwicklung der Browser und der HTML5-Spezifikation zielte auf das SPA-Modell ab.

Suchmaschinenoptimierung

Aufgrund der fehlenden JavaScript-Ausführung auf dem Spinnen (ebenfalls Webcrawler genannt) von beliebt Websuchmaschinen,[14][15] hast Suchmaschinenoptimierung (englisch: Suchmaschinenoptimierung oder SEO) in der Vergangenheit für öffentlich zugängliche Websites, die das SPA-Modell anwenden wollten, Probleme bereitete[16]

Google suche gerade URLs mit Freigabe-URLs, Hash-Fragmente benannt, die mit #! beginnen. Der Teil der URL, der mit '#' beginnt, wird zum Fragmentkennung erwähnt. Dies ermöglicht die Verwendung von Hash-Fragmenten innerhalb der einzelnen URL eines SPA. Die SPA-Website muss ein bestimmtes Verhalten implementieren, um den Abruf relevanter Metadaten durch den Suchmaschinen-Spider zu ermöglichen. Bei Suchmaschinen, die dieses URL-Hash-Schema nicht unterstützen, bleiben die URLs mit einer Fragmentkennung unsichtbar.

Alternativ können Anwendungen das anfängliche Laden der Seite auf dem Server und nachfolgende Seitenänderungen auf dem Client aufbauen. Dies kann schwierig sein, da es manchmal erforderlich ist, den Anzeigecode auf dem Server und auf dem Client in einer anderen Sprache zu schreiben. Die Menge an Code, der geteilt werden kann, kann potenziell erhöht werden, indem Vorlagen verwendet werden, die keine Logik enthalten und von einer Sprache in eine andere kompiliert werden (Englisch: Kreuzzusammenstellung) oder die gleiche Sprache auf dem Server und dem Client anwenden.

Da die SEO-Kompatibilität in SPAs nicht trivial ist, ist es erwähnenswert, dass die SPAs normalerweise nicht in einer Umgebung verwendet werden, in der eine Suchmaschinenindexierung erforderlich oder wünschenswert ist. Zu den Anwendungsgebieten gehören Anwendungen, die private Daten, die sich hinter einem Authentifizierungssystem. Handelt es sich bei diesen Anwendungen um Konsumgüter, wird häufig ein klassisches Seitenmodell für die Startseite und die Verkaufsseite verwendet, die genügend Metadaten liefern, um in der Suchmaschine als „Treffer“ zu erscheinen. Blogs, Support-Foren und andere Seiten mit traditioneller Struktur befinden sich oft neben einem SPA und können Suchmaschinen mit relevanten Schlüsselwörtern versorgen.

Ein anderer Ansatz, der von serverorientierten Frameworks verwendet wird, wie dem Java-basierten SeineNat[17] ist Alles Hypertext auf dem Server unter Verwendung der gleichen Sprache und Vorlagentechnik erstellt werden. Bei diesem Ansatz kennt der Server den Zustand des DOM auf dem Client genau; Jede größere oder kleinere Seitenänderung wird auf dem Server generiert und von AJAX transportiert, über den genauen JavaScript-Code, der benötigt wird, um die Clientseite durch Ausführen von DOM-Methoden in den neuen Zustand zu bringen. Entwickler können entscheiden, welche Seitenzustände für SEO durch Spider erkennbar sein sollen, und können den erforderlichen Zustand beim Laden mit reinem HTML anstelle von JavaScript generieren. Im Fall des ItsNat-Frameworks geschieht dies automatisch, da ItsNat den DOM-Baum auf dem Server als Java-W3C-DOM-Baum speichert. Der Aufbau dieses DOM-Baums auf dem Server generiert reine HTML- und JavaScript-DOM-Aktionen für AJAX-Anfragen. Diese Dualität ist für SEO sehr wichtig, denn Entwickler können den gewünschten DOM-Zustand auf dem Server mit dem gleichen Java-Code und Templates auf Basis von reinem HTML aufbauen. Wenn die Seite geladen wird, generiert ItsNat herkömmlichen HTML-Code, der den DOM-Zustand SEO-konform macht. Ab Version 1.3[18] ItsNat bietet ein neues zustandsloses (Englisch: staatenlos) Modus; das Client-DOM wird nicht auf dem Server gehalten, da im zustandslosen Modus das Client-DOM bei der Verarbeitung jeder AJAX-Anfrage teilweise oder vollständig auf dem Server rekonstruiert wird, basierend auf den vom Client gesendeten erforderlichen Daten mit Informationen über den aktuellen DOM-Zustand. Der zustandslose Modus kann auch SEO-kompatibel sein, da die SEO-Kompatibilität während des ersten Ladens der Seite erfolgt, unabhängig von zustandsreichen oder zustandslosen Modi.

Es gibt einige Lösungen, die die Website als durchsuchbar erscheinen lassen. In beiden Fällen ist es erforderlich, separate HTML-Seiten zu erstellen, die den Inhalt des SPA widerspiegeln. Der Server kann eine HTML-basierte Version der Website an Spider liefern. Es ist auch möglich, kopflos Webbrowser wie Phantom JS (d. h. ein Webbrowser ohne grafische Benutzeroberfläche), um die JavaScript-Anwendung auszuführen und den resultierenden HTML-Code auszugeben.

Beide Lösungen erfordern einiges an Aufwand und können bei der Pflege großer komplexer Websites eventuell zu Problemen führen. Es gibt auch potenzielle Fallstricke bei SEO. Wenn der vom Server generierte HTML-Code zu stark vom SPA-Inhalt abweicht, wird die Website einer „strafrechtlichen Sanktion“ unterzogen. Darüber hinaus kann die Verarbeitung von PhantomJS zum Rendern des HTML-Codes die Reaktionsfähigkeit der Seite verlangsamen, eine Funktion, bei der Suchmaschinen – insbesondere Google – das Ranking einer Website senken.

Client/Server-Codepartitionierung

Eine Möglichkeit, die Menge an Code zu erhöhen, die zwischen Servern und Clients geteilt werden kann, besteht darin, eine Vorlagensprache mit weniger Logik zu verwenden, wie z Schnurrbart oder Lenker. Solche Vorlagen können aus verschiedenen Hostsprachen erstellt werden, wie z Rubin auf dem Server und Javascript auf dem Auftraggeber. Das bloße Freigeben von Vorlagen erfordert jedoch normalerweise eine Duplizierung der Geschäftslogik, um die entsprechenden Vorlagen auszuwählen und die Vorlagen mit Daten zu füllen. Das Erstellen aus Vorlagen kann negative Auswirkungen auf die Reaktionsgeschwindigkeit haben, wenn nur ein kleiner Teil der Seite aktualisiert wird, z. B. wenn ein Textwert in eine größere Vorlage eingegeben wird. Das Ersetzen einer gesamten Vorlage kann sich auch auf eine benutzerdefinierte Auswahl oder Cursorposition auswirken, was nicht passieren würde, wenn nur der geänderte Wert aktualisiert würde. Um diese Probleme zu vermeiden, können Anwendungen eine Datenverknüpfung der Benutzeroberfläche anwenden oder eine ausgeklügelte Manipulation des DOM durchführen, um nur die betroffenen Teile der Seite zu aktualisieren, anstatt ganze Vorlagen neu zu erstellen.

Browserverlauf

Da ein SPA per Definition eine einzelne Seite enthält, bricht dieses Modell das Browser-Design in Bezug auf die Verlaufsnavigation mit den Schaltflächen Nächster/Bisherige. Dies verringert die Benutzerfreundlichkeit, wenn ein Benutzer die Zurück-Taste drückt und erwartet, dass der vorherige Bildschirmstatus innerhalb des SPA angezeigt wird, stattdessen jedoch die einzelne Seite verschwindet und die vorherige Seite im Browserverlauf angezeigt wird.

Die herkömmliche Lösung für SPAs bestand darin, die URL-Hash-Fragment-Kennung des Browsers entsprechend dem aktuellen Status des Bildschirms zu ändern. Dies kann mit JavaScript erfolgen und bewirkt, dass Verlaufsereignisse mit URLs im Browser erstellt werden. Solange die SPA in der Lage ist, denselben Bildschirmstatus basierend auf Informationen im URL-Hash wiederherzustellen, wird das erwartete Verhalten der Zurück-Schaltfläche beibehalten.

Um dieses Problem weiter anzugehen, enthält die HTML5-Spezifikation die Methoden pushState und ErsetzenStaat eingeführt, um programmatischen Zugriff auf URL und Browserverlauf zu ermöglichen.

Analysetools

Analysetools wie z Google Analytics verlassen sich stark darauf, dass völlig neue Seiten im Browser geladen werden, die durch eine URL-Änderung ausgelöst werden. SPAs funktionieren nicht auf diese Weise.

Nach dem Laden der ersten Seite werden alle nachfolgenden Änderungen an Seite und Inhalt von der Anwendung verarbeitet. Infolgedessen initiiert der Browser nie einen neuen Seitenladevorgang, es wird nichts zum Browserverlauf hinzugefügt und das Analysepaket hat keine Ahnung, was auf der Website passiert.

Hinzufügen von Seitenladevorgängen zu einem SPA

Es ist möglich, einem SPA mit der History-API von HTML5 Seitenladeaktionen hinzuzufügen. Dies hilft bei der Integration der Analysedaten. Die Schwierigkeit besteht darin, dies zu verwalten und sicherzustellen, dass alles genau verfolgt wird; dazu gehört auch die Überprüfung auf fehlende Daten und doppelte Einträge.Die gute Nachricht ist, dass nicht alles von Grund auf neu aufgebaut werden muss. Für AngularJS sind beispielsweise mehrere Open-Source-Analysetools online verfügbar, die auf die meisten großen Anbieter von Analysetools ausgerichtet sind. Entwickler müssen diese in die Anwendung integrieren und sicherstellen, dass alles richtig funktioniert, aber nicht alles selbst bauen müssen.[19]

Geschwindigkeit des ersten Ladens ( = TTFB / Zeit bis zum ersten Byte )

Single Page Applications haben im Allgemeinen ein langsameres Laden der ersten Seite als serverbasierte Anwendungen. Dies liegt daran, dass beim ersten Laden das Framework und der Anwendungscode abgerufen werden müssen, bevor die erforderliche Ansicht als HTML im Browser erstellt wird. Eine serverbasierte Anwendung muss nur den erforderlichen HTML-Code an den Browser senden, was Latenz und Downloadzeit reduziert.

Beschleunigen des Ladens der Seite

Es gibt einige Möglichkeiten, das anfängliche Laden eines SPA zu beschleunigen, z. B. einen bestimmten Cache-Build oder das Laden von Modulen zu verzögern, bis sie benötigt werden (auch bekannt als dynamisches Laden genannt, oder auf Englisch: faules Laden). Es ist jedoch nicht möglich, das Framework und zumindest einen Teil des Anwendungscodes herunterzuladen. Darüber hinaus ist es wahrscheinlich, dass a API zugegriffen werden, um Daten abzurufen, bevor etwas im Browser angezeigt werden kann.

Seitenlebenszyklus

Ein SPA wird beim ersten Laden der Seite vollständig geladen und dann werden Seiten ersetzt oder durch neue Seitenfragmente ergänzt, die bei Bedarf vom Server geladen werden. Um ein übermäßiges Herunterladen ungenutzter Funktionen zu vermeiden, lädt ein SPA bei Bedarf nach und nach weitere Funktionen herunter, entweder kleine Ausschnitte der Seite oder Vollbildkomponenten.

Auf diese Weise gibt es eine Analogie zwischen Zustände in einem SPA und Seiten auf einer traditionellen Website. weil Zustandsnavigation auf der gleichen Seite ist analog zu Seitennavigation, theoretisch kann eine seitenbasierte Website in eine einzelne Seite umgewandelt werden, die nur die geänderten Teile auf derselben Seite anzeigt, ähnlich den Unterschieden zwischen aufeinanderfolgenden Seiten in einem Nicht-SPA.

Der SPA-Ansatz im Web ähnelt dem von Einzeldokument-Schnittstelle (SDI) Präsentationstechnik, die in Desktop-Anwendungen beliebt ist.

Literatur

(und) Flanagan, David, JavaScript: Der endgültige Leitfaden. O'Reilly Media (April 2011), S. 1096,. ISBN 978-0-596-80552-4 .

Siehe auch

Externe Links