Einseitige Bewerbung - Single-page application

Eine Single-Page-Anwendung ( SPA ) ist eine Webanwendung oder Website , die mit dem Benutzer interagiert, indem sie die aktuelle Webseite dynamisch mit neuen Daten vom Webserver umschreibt , anstatt wie standardmäßig ein Webbrowser ganz neue Seiten lädt. Das Ziel sind schnellere Übergänge, damit sich die Website eher wie eine native App anfühlt .

In einem SPA findet nie eine Seitenaktualisierung statt; Stattdessen wird der gesamte erforderliche HTML- , JavaScript- und CSS- Code entweder vom Browser mit einem einzigen Seitenladevorgang abgerufen oder die entsprechenden Ressourcen werden dynamisch geladen und nach Bedarf zur Seite hinzugefügt, normalerweise als Reaktion auf Benutzeraktionen. Die Seite wird zu keinem Zeitpunkt des Prozesses neu geladen, noch überträgt sie die Kontrolle auf eine andere Seite, obwohl der Standort-Hash oder die HTML5-Verlaufs-API verwendet werden können, um die Wahrnehmung und Navigierbarkeit separater logischer Seiten in der Anwendung bereitzustellen.

Geschichte

Die Ursprünge des Begriffs Single-Page-Anwendung sind unklar, obwohl das Konzept bereits 2003 diskutiert wurde. Stuart Morris, ein Programmierstudent an der Cardiff University, Wales, schrieb die Self-Contained-Website unter slashdotslash.com mit den gleichen Zielen und Funktionen im April 2002, und später im selben Jahr beschrieben Lucas Birdeau, Kevin Hakman, Michael Peachey und Clifford Yeh eine einseitige Anwendungsimplementierung im US-Patent 8.136.109.

JavaScript kann in einem Webbrowser verwendet werden, um die Benutzeroberfläche (UI) anzuzeigen , Anwendungslogik auszuführen und mit einem Webserver zu kommunizieren. Es stehen ausgereifte Open-Source-Bibliotheken zur Verfügung, die den Aufbau einer SPA unterstützen, wodurch die Menge an JavaScript-Code, die Entwickler schreiben müssen, reduziert wird.

Technische Ansätze

Es stehen verschiedene Techniken zur Verfügung, die es dem Browser ermöglichen, eine einzelne Seite beizubehalten, selbst wenn die Anwendung eine Serverkommunikation erfordert.

Dokument-Hashes

HTML-Autoren können Element-IDs nutzen, um verschiedene Abschnitte des HTML-Dokuments anzuzeigen oder auszublenden. Dann können Autoren mit CSS den `#target`-Selektor verwenden, um nur den Abschnitt der Seite anzuzeigen, zu dem der Browser navigiert hat.

JavaScript-Frameworks

Webbrowser-JavaScript-Frameworks und -Bibliotheken wie AngularJS , Ember.js , ExtJS , Knockout.js , Meteor.js , React , Vue.js und Svelte haben SPA-Prinzipien übernommen. Abgesehen von ExtJS sind all dies Open-Source .

  • AngularJS ist ein vollständig clientseitiges Framework. Das Templating von AngularJS basiert auf einer bidirektionalen UI-Datenbindung . Die Datenbindung 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, das der Browser wieder in die Live-Ansicht rendert. Der Schritt wird für nachfolgende Seitenaufrufe wiederholt. Bei der traditionellen serverseitigen HTML-Programmierung interagieren Konzepte wie Controller und Modell innerhalb eines Serverprozesses, um neue HTML-Ansichten zu erzeugen. Im AngularJS-Framework werden die Controller- und Modellzustände im Client-Browser verwaltet. Daher können neue Seiten ohne Interaktion mit einem Server generiert werden.
  • Ember.js ist ein clientseitiges JavaScript-Webanwendungs-Framework, das auf dem Model-View-Controller (MVC)-Softwarearchitekturmuster basiert . Es ermöglicht Entwicklern, skalierbare Single-Page-Anwendungen zu erstellen, indem gängige Redewendungen und Best Practices in ein Framework integriert werden, das ein umfassendes Objektmodell, deklarative bidirektionale Datenbindung, berechnete Eigenschaften, automatische Aktualisierung von Vorlagen mit Handlebars.js und einen Router für Anwendungsstatus verwalten.
  • ExtJS ist auch ein clientseitiges Framework, das das Erstellen von MVC-Anwendungen ermöglicht. Es verfügt über ein eigenes Ereignissystem, Fenster- und Layoutverwaltung, Zustandsverwaltung (Stores) und verschiedene UI-Komponenten (Grids, Dialogfenster, Formularelemente etc.). Es hat ein eigenes Klassensystem mit entweder dynamischem oder statischem Lader. Die mit ExtJS erstellte Anwendung kann entweder alleine existieren (mit Status im Browser) oder mit dem Server (zB mit REST API, die verwendet wird, um seine internen Speicher zu füllen). ExtJS verfügt nur über integrierte Funktionen zur Verwendung von localStorage, sodass größere Anwendungen einen Server zum Speichern des Status benötigen.
  • Knockout.js ist ein clientseitiges Framework, das Vorlagen basierend auf dem Model-View-ViewModel- Muster verwendet.
  • Meteor.js ist ein Full-Stack (Client-Server) JavaScript-Framework, das ausschließlich für SPAs entwickelt wurde. Es bietet eine einfachere Datenbindung als Angular, Ember oder ReactJS und verwendet das Distributed Data Protocol und ein Publish-Subscribe-Muster , um Datenänderungen automatisch in Echtzeit an Clients weiterzugeben, ohne dass der Entwickler einen Synchronisationscode schreiben muss. Die volle Stack-Reaktivität stellt sicher, dass sich alle Layer, von der Datenbank bis zu den Vorlagen, bei Bedarf automatisch aktualisieren. Ökosystempakete wie Server Side Rendering adressieren das Problem der Suchmaschinenoptimierung.
  • React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen . Es wird von Facebook , Instagram und einer Community aus einzelnen Entwicklern und Unternehmen gepflegt . React verwendet eine neue Sprache, die eine Mischung aus JS und HTML (einer Teilmenge von HTML) ist. Mehrere Unternehmen verwenden React with Redux (JavaScript-Bibliothek), das State-Management-Funktionen hinzufügt, mit denen (mit mehreren anderen Bibliotheken) Entwickler komplexe Anwendungen erstellen können.
  • Vue.js ist ein JavaScript-Framework zum Erstellen von Benutzeroberflächen. Vue-Entwickler stellen auch Vuex für das Zustandsmanagement bereit.
  • Svelte ist ein Framework zum Erstellen von Benutzeroberflächen, das Svelte-Code für JavaScript-DOM-Manipulationen kompiliert, wodurch die Notwendigkeit vermieden wird, ein Framework an den Client zu bündeln, und eine einfachere Anwendungsentwicklungssyntax ermöglicht.

Ajax

Ab 2006 war die bekannteste Technik Ajax . Ajax beinhaltet die Verwendung asynchroner Anfragen an einen Server für XML- oder JSON- Daten, wie etwa mit XMLHttpRequest von JavaScript oder einem moderneren fetch() (seit 2017) oder dem veralteten ActiveX Object . Im Gegensatz zum deklarativen Ansatz der meisten SPA-Frameworks verwendet die Website bei Ajax direkt JavaScript oder eine JavaScript-Bibliothek wie jQuery , um das DOM zu manipulieren und HTML-Elemente zu bearbeiten. Ajax wurde durch Bibliotheken wie jQuery weiter populär gemacht , das eine einfachere Syntax bietet und das Ajax-Verhalten über verschiedene Browser hinweg normalisiert, die in der Vergangenheit ein unterschiedliches Verhalten hatten.

WebSockets

WebSockets sind eine bidirektionale Echtzeit-Client-Server-Kommunikationstechnologie, die Teil der HTML5-Spezifikation ist. Für die Echtzeitkommunikation ist ihr Einsatz Ajax in Bezug auf Leistung und Einfachheit überlegen.

Vom Server gesendete Ereignisse

Server- Sent Events (SSEs) ist eine Technik, mit der Server eine Datenübertragung an Browser-Clients initiieren können. Sobald eine anfängliche Verbindung hergestellt wurde, bleibt ein Ereignisstrom geöffnet, bis er vom Client geschlossen wird. SSEs werden über herkömmliches HTTP gesendet und verfügen über eine Vielzahl von Funktionen, die WebSockets vom Design her fehlen, wie z. B. automatische Wiederverbindung, Ereignis-IDs und die Möglichkeit, beliebige Ereignisse zu senden.

Browser-Plugins

Obwohl diese Methode veraltet ist, können asynchrone Aufrufe des Servers auch mithilfe von Browser-Plug-in-Technologien wie Silverlight , Flash oder Java-Applets erreicht werden .

Datentransport (XML, JSON und Ajax)

Anfragen an den Server führen normalerweise dazu, dass entweder Rohdaten (zB XML oder JSON ) oder neues HTML zurückgegeben wird. Falls HTML vom Server zurückgegeben wird, aktualisiert JavaScript auf dem Client einen Teilbereich des DOM ( Document Object Model ). Wenn Rohdaten zurückgegeben werden, wird oft ein clientseitiger JavaScript XML / ( XSL )-Prozess (und im Fall von JSON eine Vorlage ) verwendet, um die Rohdaten in HTML zu übersetzen, das dann verwendet wird, um einen Teilbereich des DOM zu aktualisieren .

Serverarchitektur

Thin-Server-Architektur

Ein SPA verlagert die 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 als "Thin Server Architecture" bezeichnet, um hervorzuheben, dass die Komplexität vom Server auf den Client verlagert wurde, mit dem Argument, dass dies letztendlich die Gesamtkomplexität des Systems reduziert.

Dicke zustandsbehaftete Serverarchitektur

Der Server hält den erforderlichen Zustand im Speicher des Client-Zustands der Seite. Auf diese Weise sendet der Server, wenn eine Anfrage den Server trifft (normalerweise Benutzeraktionen), das entsprechende HTML und/oder JavaScript mit den konkreten Änderungen, um den Client in den neuen gewünschten Zustand zu bringen (normalerweise Hinzufügen/Löschen/Aktualisieren eines Teils der Client-DOM). Gleichzeitig wird der Zustand im Server aktualisiert. Die meiste 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 des Serverstatus durch, die automatisch an den Client weitergegeben werden.

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

Dicke zustandslose Serverarchitektur

Dies ist eine Variante des Stateful-Server-Ansatzes. Die Clientseite sendet Daten, die ihren aktuellen Status darstellen, an den Server, normalerweise über Ajax-Anfragen. Anhand dieser Daten kann der Server den Client-Zustand des zu ändernden Teils der Seite rekonstruieren und die erforderlichen Daten oder Codes (z. B. als JSON oder JavaScript) generieren, die an den Client zurückgeliefert werden es in einen neuen Zustand, wobei normalerweise der Seiten-DOM-Baum entsprechend der Client-Aktion modifiziert wird, die die Anforderung motiviert hat.

Dieser Ansatz erfordert, dass mehr Daten an den Server gesendet werden und kann mehr Rechenressourcen pro Anforderung erfordern, um den Clientseitenzustand im Server teilweise oder vollständig zu rekonstruieren. Gleichzeitig ist dieser Ansatz leichter skalierbar, da keine Seitendaten pro Client im Server gespeichert werden und daher Ajax-Anfragen an verschiedene Serverknoten gesendet werden können, ohne dass Sitzungsdaten gemeinsam genutzt oder Serveraffinität erforderlich ist.

Lokal ausgeführt

Einige SPAs können unter Verwendung des Datei-URI-Schemas von einer lokalen Datei ausgeführt werden . Dies gibt Benutzern die Möglichkeit, die SPA von einem Server herunterzuladen und die Datei von einem lokalen Speichergerät auszuführen, ohne von der Serverkonnektivität abhängig zu sein. Wenn ein solches SPA Daten speichern und aktualisieren möchte, muss es browserbasierten Webspeicher verwenden . Diese Anwendungen profitieren von den Verbesserungen, die mit HTML5 verfügbar sind .

Herausforderungen mit dem SPA-Modell

Da die SPA eine Weiterentwicklung des zustandslosen Seitenneuzeichnungsmodells ist, für das Browser ursprünglich entwickelt wurden, sind einige neue Herausforderungen aufgetreten. Mögliche Lösungen (von unterschiedlicher Komplexität, Umfang und Autorenkontrolle) umfassen:

  • Clientseitige JavaScript-Bibliotheken.
  • Serverseitige Webframeworks, die auf das SPA-Modell spezialisiert sind.
  • Die Evolution der Browser und der HTML5-Spezifikation, die für das SPA-Modell entwickelt wurde.

Suchmaschinenoptimierung

Aufgrund des Fehlens von JavaScript-Ausführung auf den Crawlern einiger beliebter Websuchmaschinen hat SEO ( Suchmaschinenoptimierung ) in der Vergangenheit ein Problem für öffentlich zugängliche Websites dargestellt, die das SPA-Modell übernehmen möchten.

Zwischen 2009 und 2015 hat Google Webmaster Central ein "AJAX-Crawling-Schema" vorgeschlagen und dann empfohlen, das ein anfängliches Ausrufezeichen in Fragment-IDs für zustandsbehaftete AJAX- Seiten verwendet ( #!). Die SPA-Site muss ein spezielles Verhalten implementieren, um die Extraktion relevanter Metadaten durch den Crawler der Suchmaschine zu ermöglichen. Bei Suchmaschinen, die dieses URL-Hash- Schema nicht unterstützen , bleiben die gehashten URLs der SPA unsichtbar. Diese "Hash-Bang"-URIs wurden von einer Reihe von Autoren, darunter Jeni Tennison vom W3C, als problematisch angesehen, da sie Seiten für diejenigen unzugänglich machen, die kein JavaScript in ihrem Browser aktiviert haben. Sie unterbrechen auch HTTP-Referer- Header, da Browser die Fragment-ID im Referer-Header nicht senden dürfen. Im Jahr 2015 hat Google seinen Hash-Bang-AJAX-Crawling-Vorschlag eingestellt.

Alternativ können Anwendungen das Laden der ersten Seite auf dem Server und nachfolgende Seitenaktualisierungen auf dem Client wiedergeben. Dies ist traditionell schwierig, da der Rendering-Code möglicherweise in einer anderen Sprache oder einem anderen Framework auf dem Server und auf dem Client geschrieben werden muss. Die Verwendung logikloser Vorlagen, das Cross-Kompilieren von einer Sprache in eine andere oder die Verwendung derselben Sprache auf dem Server und dem Client können dazu beitragen, die Codemenge zu erhöhen, die gemeinsam genutzt werden kann.

Im Jahr 2018 führte Google dynamisches Rendering als weitere Option für Websites ein, die Crawlern eine nicht-JavaScript-starke Version einer Seite für Indexierungszwecke anbieten möchten. Dynamisches Rendering wechselt zwischen einer Version einer Seite, die clientseitig gerendert wird, und einer vorgerenderten Version für bestimmte Benutzeragenten. Bei diesem Ansatz erkennt Ihr Webserver Crawler (über den Benutzeragenten) und leitet sie an einen Renderer weiter, von dem sie dann eine einfachere Version von HTML-Inhalten erhalten.

Da die SEO-Kompatibilität in SPAs nicht trivial ist, ist es erwähnenswert, dass SPAs im Allgemeinen nicht in einem Kontext verwendet werden, in dem eine Suchmaschinenindexierung entweder erforderlich oder wünschenswert ist. Anwendungsfälle umfassen Anwendungen, die private Daten hinter einem Authentifizierungssystem verbergen . In den Fällen, in denen es sich bei diesen Anwendungen um Verbraucherprodukte handelt, wird häufig ein klassisches "Seiten-Neuzeichnen"-Modell für die Zielseite und die Marketing-Site der Anwendung verwendet, das genügend Metadaten liefert, damit die Anwendung in einer Suchmaschinenanfrage als Treffer erscheint. Blogs, Support-Foren und andere traditionelle Artefakte beim Neuzeichnen von Seiten befinden sich häufig im SPA, die Suchmaschinen mit relevanten Begriffen versorgen können.

Ein anderer Ansatz, der von serverzentrierten Web-Frameworks wie dem Java-basierten ItsNat verwendet wird, besteht darin, jeden Hypertext auf dem Server mit derselben Sprache und Vorlagentechnologie zu rendern. Bei diesem Ansatz kennt der Server den DOM-Zustand auf dem Client genau, jede erforderliche große oder kleine Seitenaktualisierung wird im Server generiert und von Ajax transportiert, dem genauen JavaScript-Code, um die Clientseite in den neuen Zustand zu bringen, indem DOM-Methoden ausgeführt werden . Entwickler können entscheiden, welche Seitenzustände von Web-Spidern für SEO gecrawlt werden müssen und in der Lage sein, den erforderlichen Zustand zur Ladezeit zu generieren, indem einfaches HTML anstelle von JavaScript generiert wird. Im Fall des ItsNat-Frameworks geschieht dies automatisch, da ItsNat den Client-DOM-Baum im Server als einen Java-W3C-DOM-Baum behält; Das Rendern dieses DOM-Baums auf dem Server generiert reines HTML zur Ladezeit und JavaScript-DOM-Aktionen für Ajax-Anfragen. Diese Dualität ist für SEO sehr wichtig, da Entwickler mit demselben Java-Code und reinem HTML-basiertem Template den gewünschten DOM-Zustand im Server erstellen können; Beim Laden der Seite wird herkömmliches HTML von ItsNat generiert, wodurch dieser DOM-Zustand SEO-kompatibel wird.

Ab Version 1.3 bietet ItsNat einen neuen zustandslosen Modus, und das Client-DOM wird nicht auf dem Server gehalten, da beim zustandslosen Modus-Client der DOM-Zustand teilweise oder vollständig auf dem Server rekonstruiert wird, wenn eine Ajax-Anfrage basierend auf den gesendeten erforderlichen Daten verarbeitet wird indem der Client den Server über den aktuellen DOM-Zustand informiert; der zustandslose Modus kann auch SEO-kompatibel sein, da die SEO-Kompatibilität zur Ladezeit der ersten Seite erfolgt, die nicht von zustandsbehafteten oder zustandslosen Modi beeinflusst wird. Eine andere mögliche Wahl sind Frameworks wie PreRender, Puppeteer, Rendertron, die als Middleware einfach in jede Website integriert werden können mit Webserver-Konfiguration, die es ermöglicht, Bot-Anfragen (Google Bot und andere) von der Middleware zu bedienen, während Nicht-Bot-Anfragen wie gewohnt bedient werden . Diese Frameworks cachen die relevanten Website-Seiten regelmäßig, damit die neuesten Versionen für Suchmaschinen verfügbar sind. Diese Frameworks wurden offiziell von Google genehmigt.

Es gibt einige Problemumgehungen, damit es so aussieht, als ob die Website crawlbar wäre. Beide beinhalten das Erstellen separater HTML-Seiten, die den Inhalt des SPA widerspiegeln. Der Server könnte eine HTML-basierte Version der Site erstellen und diese an Crawler liefern, oder es ist möglich, einen Headless-Browser wie PhantomJS zu verwenden, um die JavaScript-Anwendung auszuführen und den resultierenden HTML- Code auszugeben.

Beides erfordert einiges an Aufwand und kann bei der Wartung der großen komplexen Websites zu Kopfschmerzen führen. Es gibt auch potenzielle SEO-Stolpersteine. Wenn der vom Server generierte HTML-Code als zu stark vom SPA-Inhalt abweicht, wird die Site bestraft. Das Ausführen von PhantomJS zur Ausgabe des HTML-Codes kann die Reaktionsgeschwindigkeit der Seiten verlangsamen, was etwas ist, für das Suchmaschinen – insbesondere Google – die Rankings herabstufen.

Client/Server-Codepartitionierung

Eine Möglichkeit, die Codemenge zu erhöhen, die zwischen Servern und Clients gemeinsam genutzt werden kann, besteht darin, eine logiklose Vorlagensprache wie Moustache oder Handlebars zu verwenden . Solche Vorlagen können aus verschiedenen Hostsprachen gerendert werden, wie beispielsweise Ruby auf dem Server und JavaScript im Client. Das bloße Freigeben von Vorlagen erfordert jedoch in der Regel die Duplizierung der Geschäftslogik, die verwendet wird, um die richtigen Vorlagen auszuwählen und sie mit Daten zu füllen. Das Rendern aus Vorlagen kann negative Auswirkungen auf die Leistung haben, wenn nur ein kleiner Teil der Seite aktualisiert wird – beispielsweise der Wert einer Texteingabe in einer großen Vorlage. Das Ersetzen einer gesamten Vorlage kann auch die Auswahl oder die Cursorposition eines Benutzers stören, während die Aktualisierung nur des geänderten Werts möglicherweise nicht erfolgt. Um diese Probleme zu vermeiden, können Anwendungen UI-Datenbindungen oder granulare DOM- Manipulation verwenden, um nur die entsprechenden Teile der Seite zu aktualisieren, anstatt ganze Vorlagen erneut zu rendern.

Browserverlauf

Da ein SPA per Definition "eine einzelne Seite" ist, unterbricht das Modell das Design des Browsers für die Seitenverlaufsnavigation unter Verwendung der "Vorwärts"- oder "Zurück"-Schaltflächen. Dies stellt ein Usability-Hindernis dar, wenn ein Benutzer die Zurück-Taste drückt und den vorherigen Bildschirmstatus innerhalb des SPA erwartet, aber stattdessen die einzelne Seite der Anwendung entladen und die vorherige Seite im Browserverlauf angezeigt wird.

Die traditionelle Lösung für SPAs bestand darin, die Hash- Fragment-Kennung der Browser-URL entsprechend dem aktuellen Bildschirmstatus zu ändern . Dies kann mit JavaScript erreicht werden und bewirkt, dass URL-Verlaufsereignisse innerhalb des Browsers aufgebaut werden. Solange die SPA in der Lage ist, denselben Bildschirmstatus aus den im URL-Hash enthaltenen Informationen wiederherzustellen, wird das erwartete Verhalten der Zurück-Schaltfläche beibehalten.

Um dieses Problem weiter anzugehen, hat die HTML5-Spezifikation pushState und replaceState eingeführt, die programmgesteuerten Zugriff auf die tatsächliche URL und den Browserverlauf bieten.

Analytik

Analysetools wie Google Analytics verlassen sich stark darauf, dass ganz neue Seiten im Browser geladen werden, die durch einen neuen Seitenladevorgang ausgelöst werden. SPAs funktionieren nicht auf diese Weise.

Nach dem ersten Laden der Seite werden alle nachfolgenden Seiten- und Inhaltsänderungen intern von der Anwendung verarbeitet, die einfach eine Funktion zum Aktualisieren des Analysepakets aufrufen sollte. Wenn diese Funktion nicht aufgerufen wird, löst der Browser nie einen neuen Seitenladevorgang aus, es wird nichts zum Browserverlauf hinzugefügt und das Analysepaket hat keine Ahnung, wer was auf der Website tut.

Sicherheitsscans

Ähnlich den Problemen, die bei Suchmaschinen-Crawlern auftreten, können DAST-Tools mit diesen JavaScript-reichen Anwendungen Probleme haben . Probleme können das Fehlen von Hypertext-Links, Speichernutzung und Ressourcen umfassen, die von der SPA geladen werden, die typischerweise von einer Anwendungsprogrammierschnittstelle oder API verfügbar gemacht werden . Single Page Applications unterliegen immer noch denselben Sicherheitsrisiken wie herkömmliche Webseiten wie Cross-Site Scripting (XSS) , aber auch einer Vielzahl anderer einzigartiger Schwachstellen wie Datenexponierung über API und clientseitige Logik und clientseitige Durchsetzung des Servers -Seitensicherheit. Um eine Single Page Application effektiv zu scannen, muss ein DAST-Scanner in der Lage sein, die clientseitige Anwendung zuverlässig und wiederholbar zu navigieren, um alle Bereiche der Anwendung zu erkennen und alle Anfragen abzufangen, die die Anwendung an Remote-Server sendet (zB API-Anfragen). Es gibt nur wenige kommerzielle Tools, die solche Aktionen ausführen können, aber solche Tools gibt es definitiv.

Hinzufügen von Seitenladevorgängen zu einem SPA

Es ist möglich, mithilfe der HTML5-History-API Seitenladeereignisse zu einem SPA hinzuzufügen. Dies hilft bei der Integration von Analysen. Die Schwierigkeit besteht darin, dies zu verwalten und sicherzustellen, dass alles genau verfolgt wird – dazu gehört die Überprüfung auf fehlende Berichte und Doppeleinträge. Einige Frameworks bieten Open-Source-Analyseintegrationen, die sich an die meisten großen Analyseanbieter richten. Entwickler können sie in die Anwendung integrieren und sicherstellen, dass alles richtig funktioniert, aber es muss nicht alles von Grund auf neu gemacht werden.

Beschleunigen des Seitenladens

Es gibt einige Möglichkeiten, das anfängliche Laden eines SPA zu beschleunigen, z. Aber es ist nicht möglich, sich der Tatsache zu entziehen, dass es das Framework herunterladen muss, zumindest einen Teil des Anwendungscodes, und höchstwahrscheinlich eine API für Daten anspricht, bevor etwas im Browser angezeigt wird. Dies ist ein "Bezahle mich jetzt oder bezahle mich später"-Kompromissszenario. Die Frage nach Leistung und Wartezeiten bleibt eine Entscheidung, die der Entwickler treffen muss.

Seitenlebenszyklus

Ein SPA wird beim anfänglichen Laden der Seite vollständig geladen, und dann werden Seitenbereiche durch neue Seitenfragmente ersetzt oder aktualisiert, 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 Fragmente der Seite oder vollständige Bildschirmmodule.

Auf diese Weise besteht eine Analogie zwischen „States“ in einem SPA und „Pages“ in einer traditionellen Website. Da die "Zustandsnavigation" auf derselben Seite der Seitennavigation analog ist, könnte theoretisch jede seitenbasierte Website in eine einzelne Seite umgewandelt werden, die auf derselben Seite nur die geänderten Teile ersetzt.

Der SPA-Ansatz im Web ähnelt der SDI-Präsentationstechnik ( Single Document Interface ), die in nativen Desktopanwendungen beliebt ist .

Siehe auch

Verweise

Externe Links