Articles

Angular Single Page Applications (SPA): Was sind die Vorteile?

Oktober 13, 2020 by admin

In diesem Beitrag werden wir die Hauptvorteile einer SPA-Architektur beim Erstellen unserer Angular-Anwendungen behandeln und einige sehr häufige Fragen zu SPAs im Allgemeinen beantworten.

Dieser Beitrag ist Teil der laufenden Angular für Anfänger Serie, hier ist die komplette Serie:

Angular für Anfänger Guide-Erste Schritte (Setup-Umgebung)
Angular für Anfänger Guide: Warum Angular?, Die Top-Vorteile
Angular für Anfänger Guide-Komponenten vs Direktiven
Warum eine einzelne Seite Anwendung, Was sind die Vorteile? Was ist ein SPA?

Warum die SPA-Architektur?

beginnen wir mit der ersten Frage: Warum Single-Page-Anwendungen (SPAs)? Diese Art von Anwendungen gibt es schon seit Jahren, aber im öffentlichen Internet sind sie noch nicht weit verbreitet.

Und warum ist das so?

Es gibt sowohl einen guten Grund dafür als auch einen noch besseren Grund, warum sich das in naher Zukunft ändern könnte.,

SPAs wurden in den letzten Jahren häufig für den Aufbau des privaten Dashboard-Teils von SaaS-Plattformen (Software as a Service) oder Internetdiensten im Allgemeinen sowie für den Aufbau datengetriebener und formularintensiver Anwendungen für Unternehmen eingesetzt.

Aber erzwingt Angular dann das Erstellen unserer Anwendungen als SPAs?

Die Antwort ist nein, tut es nicht, aber das ist eine interessante Möglichkeit, die es bringt, angesichts der vielen Vorteile des Aufbaus einer Anwendung auf diese Weise. Das bringt uns zu einer Schlüsselfrage:

Warum möchten Sie eine Anwendung als SPA erstellen?,

Das ist oft selbstverständlich. Jeder baut Anwendungen auf diese Weise, aber was ist der große Vorteil davon? Es muss mindestens ein paar Killerfunktionen geben, oder?

Beginnen wir mit einer Funktion, die nicht sehr oft erwähnt wird: Produktionsbereitstellung.

Das Verständnis der Vorteile der SPA-Nutzung in der Produktion wird tatsächlich auch die Schlüsselfrage beantworten:

Was ist eine einseitige Anwendung?

Manchmal sind Namen in der Softwareentwicklung nicht gut gewählt, und das kann zu viel Verwirrung führen., Das ist sicherlich nicht der Fall mit dem Begriff SPA: eine einzelne Seite Anwendung hat buchstäblich nur eine Seite !! 😊

Wenn Sie eine einseitige Anwendung in Aktion sehen möchten, lade ich Sie ein, zur AngularUniv https://angular-university.io zu gehen und auf die Startseite in der Liste der neuesten Kurse und im oberen Menü zu klicken.

Wenn Sie mit der Navigation beginnen, werden Sie feststellen, dass die Seite nicht vollständig neu geladen wird – nur neue Daten werden über die Leitung gesendet, während der Benutzer durch die Anwendung navigiert – dies ist ein Beispiel für eine einzelne Seitenanwendung.,

Lassen Sie mich Ihnen erklären, was der Vorteil ist, eine solche Anwendung zu erstellen, und wie funktioniert das überhaupt?

Überprüfen wir den Index mithilfe der Chrome-Entwicklungstools.html der AngularUniv-Website, die auf der Startseite heruntergeladen wird (oder auf einer anderen Seite, wenn Sie navigieren und auf Aktualisieren klicken).

Die Seite, die heruntergeladen wird, ist die allererste Anforderung, die Sie im Chrome Network Tab Panel sehen – das ist buchstäblich die einzelne Seite unserer Anwendung.

Lassen Sie uns eines bemerken – diese Seite ist fast leer! Außer dem Tag ist hier nicht viel los.,

Hinweis: Auf der eigentlichen Website enthält die heruntergeladene Seite auch HTML, das auf dem Server mit Angular Universal vorgerendert wurde

Beachten Sie die Namen der CSS-und Javascript – Bundles: Das gesamte CSS und sogar das gesamte Javascript der Anwendung (einschließlich Angular) stammen nicht einmal vom selben Server wie die index.html von einem völlig anderen statischen Server kommend:

In diesem Fall stammen die beiden Bundles tatsächlich aus einem Amazon S3-Bucket!,

Beachten Sie außerdem, dass der Name der Bundles versioniert ist: Er enthält den Zeitstempel, zu dem der Bereitstellungs-Build ausgeführt wurde, der diese bestimmte Version der Anwendung bereitgestellt hat.

Die Produktionsbereitstellungsvorteile von Einzelseitenanwendungen

Das Szenario, das wir oben gesehen haben, ist tatsächlich ein ziemlich cooler Vorteil von Einzelseitenanwendungen:

Einzelseitenanwendungen lassen sich sehr einfach in der Produktion und sogar im Zeitverlauf bereitstellen!,

Eine einseitige Anwendung ist im Vergleich zu herkömmlicheren serverseitig gerenderten Anwendungen sehr einfach zu implementieren: Es ist wirklich nur eine index.html-Datei mit einem CSS-Bundle und einem Javascript-Bundle.

Diese 3 statischen Dateien können auf jeden statischen Inhaltsserver wie Apache, Nginx, Amazon S3 oder Firebase-Hosting hochgeladen werden.

Natürlich muss die Anwendung das Backend aufrufen, um ihre Daten abzurufen, aber das ist ein separater Server, der bei Bedarf mit einer völlig anderen Technologie erstellt werden kann: wie Node, Java oder PHP.,

Wenn wir unsere REST-API oder einen anderen Backend-Typ in Node erstellen würden, könnten wir sie sogar in Typescript erstellen und so dieselbe Sprache sowohl auf dem Server als auch auf dem Client verwenden und sogar Code zwischen ihnen teilen.

Single Page Application Versionierung in der Produktion

Ein weiterer Vorteil der Bereitstellung unseres Frontends als Single Page Application ist eine Versionierung und ein Rollback. Alles, was wir tun müssen, ist, unsere Build-Ausgabe zu aktualisieren (die die oben gelb hervorgehobenen CSS-und JS-Bundles erzeugt).,

Wir können den Server, der unser SPA bedient, mit einem Parameter konfigurieren, der angibt, welche Version der Frontend-Anwendung erstellt werden soll: So einfach ist das!

Diese Art der Bereitstellung lässt sich sehr gut skalieren: Statische Inhaltsserver wie Nginx können für eine sehr große Anzahl von Benutzern skaliert werden.

Diese Art der Bereitstellung und Versionierung gilt natürlich nur für den Frontend-Teil unserer Anwendung, dies gilt nicht für den Backend-Server. Trotzdem ist es ein wichtiger Vorteil.

Aber ist die Produktionsbereitstellung der einzige Vorteil von Einzelseitenanwendungen?, Sicherlich nicht, hier ist ein weiterer wichtiger Vorteil:

Einzelseitenanwendungen und Benutzererfahrung

Wenn Sie jemals eine Webanwendung verwendet haben, die bei fast jeder Benutzerinteraktion ständig alles vom Server neu lädt, werden Sie wissen, dass diese Art von Anwendung eine schlechte Benutzererfahrung bietet aufgrund von:

Die konstante Ganzseite lädt
auch aufgrund der Hin-und Herfahrten des Netzwerks zum Server, um all diesen HTML-Code abzurufen.,

In einer einseitigen Anwendung haben wir dieses Problem mit einem grundlegend anderen architektonischen Ansatz gelöst:

In einem SPA wird nach dem ersten Laden der Seite kein HTML mehr über das Netzwerk gesendet. Stattdessen werden nur Daten vom Server angefordert (oder an den Server gesendet).

Während ein SPA ausgeführt wird, werden nur Daten über die Leitung gesendet, was viel weniger Zeit und Bandbreite in Anspruch nimmt als das ständige Senden von HTML. Schauen wir uns die Art der Nutzlast an, die normalerweise in einem SPA über den Draht geht.,

Wenn Sie beispielsweise im AngularUniv SPA auf einen Kurs klicken, wird kein HTML-Code über die Leitung gesendet. Stattdessen erhalten wir eine Ajax-Anfrage, die eine JSON-Nutzlast mit allen Kursdaten empfängt:

Wie wir sehen können, wäre die HTML-Version eines Kurses im Vergleich zu einem einfachen JSON-Objekt aufgrund aller öffnenden und schließenden Tags viel größer, aber es gibt auch viele doppelte HTML-Dateien, wenn wir ständig ähnliche Seiten immer wieder laden.

Zum Beispiel werden Dinge wie die Kopf-und Fußzeilen einer Seite ständig an den Browser gesendet, aber sie haben sich nicht wirklich geändert.,

Damit haben wir hier einen zweiten großen Vorteil einer Einzelseitenanwendung: eine deutlich verbesserte Benutzererfahrung durch weniger ganzseitige Neuladungen und eine bessere Gesamtleistung, da weniger Bandbreite benötigt wird.

Warum benutzen wir dann Nicht Überall SPAs?

Wenn der SPAs haben so viele Vorteile, warum haben Sie nicht angenommen wurde, auf einen größeren Maßstab auf das öffentliche internet? Dafür gibt es einen guten Grund.

Bis vor relativ kurzer Zeit hatten Suchmaschinen wie Google Schwierigkeiten, eine einzelne Seitenanwendung korrekt zu indizieren. Aber was ist mit heute?,

In der Vergangenheit gab es einige Empfehlungen, ein spezielles Ajax-Crawling-Schema zu verwenden, das inzwischen veraltet ist. Ist Google jetzt in der Lage, Ajax vollständig zu rendern?

In einer offiziellen Ankündigung haben wir die Information, dass die Google-Suche jetzt im Allgemeinen Ajax crawlen kann, aber es gibt einige Berichte, dass dies noch nicht vollständig möglich ist.

Und die Empfehlung ist, stattdessen progressive Verbesserung zu verwenden. Was bedeutet das also, ist es in diesem Stadium möglich, SPAs im öffentlichen Internet zu nutzen oder noch nicht?

Search Engine Friendly SPAs?,

Es ist möglich, die Leistung und Benutzererfahrung eines SPA zusammen mit guten SEO-Eigenschaften zu haben: Die Verwendung der Universal-Pre-Rendering-Engine von Angular ermöglicht es uns:

Eine Anwendung im Backend vorab zu rendern
Versenden Sie den HTML-Code zusammen mit Angular
an den Browser und haben Sie Angular bootstrap auf der Clientseite und übernehmen Sie die Seite ein SPA

Werden SPAs in Zukunft häufiger?,

stellen Sie sich eine SEO-freundliche version von Amazon, der würde sich nicht selbst aktualisieren, auf jeder Seite neu laden und mit einem viel-verbesserte performance und user experience: das hätte wahrscheinlich eine enorm positive Auswirkungen auf die Zeit, die Kunden verbringen auf der Website!

So sind die technischen Vorteile von SEO-freundlichen SPAs signifikant und noch mehr auf mobilen Geräten, und wir würden erwarten, dass diese Art von SEO-freundlichen SPA-Anwendungen in Zukunft auch im öffentlichen Internet häufiger werden würden.

Die letzte Frage dieses Abschnitts bleibt jedoch unbeantwortet., Sie müssen in diesem Stadium nach dem Lesen der letzten Abschnitte nachdenken:

Wenn beim Start nur minimales HTML vom Server geladen wird, wie ändert sich die Seite dann im Laufe der Zeit?

Was uns zur letzten Frage dieses Abschnitts und vielleicht zur wichtigsten führt:

Wie funktioniert die einseitige Anwendung überhaupt?

Wie können sie funktionieren, da wir nur sehr wenig HTML vom Server geladen haben? Sobald die Anwendung gestartet wird, gehen nur Daten über den Draht. Woher kommt also das neue HTML?,

Weil irgendwo neues HTML generiert werden muss, da dies die einzige Möglichkeit ist, dass der Browser ändert, was er anzeigt, oder?

Die Antwort ist einfach und hat damit zu tun, wie Einzelseitenanwendungen im Vergleich zu herkömmlichen serverbasierten Anwendungen tatsächlich funktionieren.

Bei einer herkömmlichen Anwendung (die die überwiegende Mehrheit des heutigen öffentlichen Internets umfasst) werden die Daten in HTML-Transformation (oder Rendering) auf der Serverseite ausgeführt.,

Auf der anderen Seite tun es Einzelseitenanwendungen auf eine ganz andere Weise:

In einem SPA Nach dem Start der Anwendung wurden die Daten in den HTML-Transformationsprozess vom Server auf den Client verschoben-SPAs haben das Äquivalent einer Template-Engine, die in Ihrem Browser ausgeführt wird!

Und so mit diesen Informationen in der Hand, lassen Sie uns diesen Abschnitt abschließen, indem Sie die wichtigsten Punkte über Single Page-Anwendungen zusammenfassen.,– Vorteile von SPAs und das Schlüsselkonzept, wie sie funktionieren

Der Aufbau unserer Anwendung als SPA wird uns eine beträchtliche Anzahl von Vorteilen bringen:

Wir werden dem Benutzer eine deutlich verbesserte Erfahrung bringen können
Die Anwendung fühlt sich schneller an, da weniger Bandbreite verwendet wird und keine ganzseitigen Aktualisierungen stattfinden, wenn der Benutzer durch die Anwendung navigiert
Die Anwendung wird viel einfacher in produktion, zumindest sicherlich der Client-Teil: Alles, was wir brauchen, ist ein statischer Server, der mindestens 3 Dateien bereitstellt: unseren Single Page Index.,html, ein CSS-Bundle und ein Javascript-Bundle.
Wir können die Bundles bei Bedarf auch mithilfe von Code Splitting in mehrere Teile aufteilen.
Der Frontend-Teil der Anwendung ist sehr einfach in der Produktion zu versionenund ermöglicht bei Bedarf eine vereinfachte Bereitstellung und Rollbacks zur vorherigen Version des Frontends

Und dies nur ein mögliches Bereitstellungsszenario von SPAs in der Produktion.,

Andere Produktionsszenarien

Andere Szenarien umfassen das Pre-Rendering großer Teile der Anwendung und das Hochladen auf einen statischen Hosting-Server, das In-Memory-Caching auf dem Server nur bestimmter Seiten, die Versionierung mit DNS usw.

Die heute einfacher als je zuvor, SEO-freundliche SPAs, so werden Sie wahrscheinlich haben die zunehmende Verbreitung in der Zukunft in Szenarien, in denen SPAs, wurden nicht Häufig verwendet.,

Die Art und Weise, wie SPAs funktionieren

Die Art und Weise, wie Einzelseitenanwendungen diese Vorteile bringen, hängt mit der Art und Weise zusammen, wie sie intern funktionieren:

Nach dem Start werden nur Daten als JSON-Nutzlast oder in einem anderen Format über die Leitung gesendet. Aber kein HTML oder CSS wird mehr über die Leitung gesendet, nachdem die Anwendung ausgeführt wird.,

Der Schlüsselpunkt, um zu verstehen, wie Einzelseitenanwendungen funktionieren, ist folgender:

anstatt Daten auf dem Server in HTML zu konvertieren und dann über die Leitung zu senden, haben wir diesen Konvertierungsprozess jetzt in einem SPA vom Server auf den Client verschoben.

Die Konvertierung erfolgt in letzter Sekunde auf der Clientseite, wodurch wir dem Benutzer eine deutlich verbesserte Benutzererfahrung bieten können.

Ich hoffe, dass Sie dadurch von den Vorteilen von SPAs überzeugt werden., Wenn nicht, lassen Sie es mich bitte wissen und warum das nicht der Fall ist, damit ich einige der Punkte besser entwickeln kann.

Außerdem möchte ich Ihnen in diesem Stadium sofort Code zeigen. Lassen Sie uns ein kleines Hallo Welt SPA in Angular bauen, und nehmen Sie es von dort. Wir werden sehen, wie die Konzepte, die wir eingeführt haben, der kleinen Anwendung zugeordnet werden, die wir erstellen werden.

Ich hoffe, dass dieser Beitrag dazu beigetragen hat, die wichtigsten Vorteile von SPAs zu verstehen, und dass Sie es genossen haben!,