Lassen Sie mich Ihnen jetzt einen kurzen Überblick über Single Page Applications geben.
Was sind Single Page Applications?
Inwiefern unterscheiden sie sich von den Websites, die Sie früher entwickelt haben?
Zum Beispiel die Website, die Sie im vorherigen Verlauf dieser Spezialisierung entwickelt haben, auf
der Sie mehrere Seiten hatten - warum sind Single Page Applications interessant
und was müssen Sie beachten,
wenn Sie Single Page Applications entwerfen?
Dieser Vortrag ist nicht beabsichtigt, eine ganze Abhandlung über Single Page Applications zu sein,
aber wirklich, geben Sie genug Einführung,
um Sie mit dem Nachdenken über Single Page Applications beginnen,
vor allem im Kontext von Angular.
Bevor wir Single Page Applications verstehen, machen wir einen Schritt zurück
und schauen wir uns an, wie traditionelle Websites funktionieren.
Auf traditionellen Websites, bis jetzt - wenn Sie eine Website besuchen,
können Sie um den Zugriff auf eine bestimmte Seite bitten.
Sie werden beispielsweise eine Seite index.html anfordern,
wenn Sie zur Website navigieren,
indem Sie entweder auf einen Link klicken
oder die Adresse der Website in die Adressleiste Ihres Browsers eingeben. In der
Regel ist die Seite index.html die erste
, die Sie abrufen, wenn Sie eine Website besuchen.
Und wenn die Seite vom Server in Ihren Browser heruntergeladen wird -
und dann wird dies in Ihrem Browser angezeigt.
Dies kann nun nicht nur die Seite index.html enthalten, sondern auch andere Ressourcen
, die möglicherweise heruntergeladen werden müssen, um die Seite index.html zu erstellen.
In diesem Fall erfordert die Seite index.html möglicherweise zusätzliche Ressourcen,
wie Bilder oder Daten, heruntergeladen werden, bevor die Indexseite erstellt werden kann.
Aber jetzt, später, wenn Sie zu einer anderen Seite auf Ihrer Website navigieren
- zum Beispiel eine andere Seite wie contactus.html,
wird dies dazu führen,
dass Ihr Browser eine weitere Anfrage an den Server sendet, um diese zweite Seite zu holen.
Es wird also eine ganze Anfrage an den Server initiieren
und alle Ressourcen, die für
die Erstellung der zweiten Seite benötigt werden, müssen vom Server heruntergeladen werden.
Wenn Sie also von einer Seite zu einer anderen Seite wechseln,
wird jede neue Seite vom Server geladen werden,
und dies würde eine Roundtrip-Zeit zum Server beinhalten,
um alle Ressourcen zu holen, die für die Erstellung dieser Seiten erforderlich sind.
Stellen Sie sich nun vor, dass Ihre Website viele Seiten hat.
Dann erfordert natürlich jedes einzelne Stück, das Ihre
Webseite für das Rendern benötigt, eine vollständige Round-Trip-Zeit zu den Servern.
Was Sie beachten würden, ist - oft ist, dass viele dieser Seiten viel gemeinsam haben.
Vielleicht sind zum Beispiel die Kopf-
und Fußzeile und einige andere Informationen alle auf all diesen Seiten üblich.
Dennoch erfordert jede einzelne neue Seitenanforderung, dass Sie
die gesamte Seite vom Server abrufen müssen.
Jetzt können Sie mit der Verwendung von Caching auf der Browser-Site einige dieser Probleme beheben,
indem Sie die bereits abgerufenen Ressourcen aus Ihrem Cache wiederverwenden. Dennoch
erfordert jede neue Seite, zu der Sie navigieren, eine ganze Seite
von der Server-Site neu geladen werden.
Single Page Applications nähern sich diesem Problem auf eine andere Art und Weise.
In einer Single Page Application haben wir in der Regel eine Webanwendung entwickelt.
Wenn der Browser zur Website navigiert,
wird dies für die Webanwendung von der Server-Site heruntergeladen werden.
Dies wird beispielsweise in einer Masterseite wie index.html enthalten sein,
die einen ganzen Satz von Assets auslöst,
die zum Rendern Ihrer Web-App auf Ihre Client-Site heruntergeladen werden müssen.
Wie diese Assets gepackt werden, hängt davon ab, wie Sie Ihre Webanwendung entwerfen
und welches Framework Sie verwenden, um Ihre Webanwendung zu entwerfen.
Trotzdem haben Sie einen einzigen großen Download zu Beginn Ihrer Webanwendung.
Nachfolgende Änderungen an der Client-Site, z. B. durch einen Klick auf einen Link
initiiert, führen zu einer neuen Anforderung an die Server-Site. In diesem Fall laden
Sie jedoch häufig nur einige Daten, möglicherweise in Form von JSON-Daten,
von der Server-Site herunter.
In diesem Fall erfordert jeder von ihnen möglicherweise nur Zugriff auf den Server
, nur um die JSON-Daten herunterzuladen,
wodurch Sie dann möglicherweise die neue Ansicht
in Ihrer Single Page Application vollständig rendern können.
Der anfängliche Download der Seite, der anfängliche Download der Anwendung,
ist natürlich immer da, aber die meisten nachfolgenden Interaktionen mit dem Server
sind einfach zum Herunterladen von Daten, in der Regel in Form von JSON oder XML,
abhängig davon, wie Sie Ihr Datenformat entwerfen.
Sobald die Daten heruntergeladen wurden,
können diese Daten dann verwendet werden, um die neue Ansicht in Ihrer Anwendung zu rendern.
Unter diesen Umständen
sparen Sie eine Menge Roundtrip-Zeit zum Server, um viele Assets herunterzuladen.
Natürlich erfordert das anfängliche Laden der Seite eine gewisse Menge an Arbeit,
aber die nachfolgenden Anfragen können für sehr kleine Datenmengen sein.
Und das ist in der Tat das bedeutende Merkmal von Single Page Applications.
Jetzt
können Sie mit dem Vor-Rendering einiger ihrer Ansichten auf der Server-Site selbst sogar einige der anfänglichen Download-Zeit für Ihre Webanwendung reduzieren.
So
können Sie auch Angular zum Beispiel einen Teil Ihrer ersten Ansicht auf der Server-Site vorrendern,
um die Anzeige von Informationen auf dem Client schnell zu ermöglichen,
während der Rest der Webanwendung von Ihrem Browser heruntergeladen wird.
So können wir zusammenfassen, dass Single Page Applications
als Webanwendung auf einer Website, die in eine einzelne Seite passt - wieder,
geben oder nehmen - Sie - Sie wissen, interpretieren Sie es nicht zu wörtlich.
Sie müssen also keine ganze Seite erneut laden.
Das ist also das bedeutende Merkmal einer Single-Page-Anwendung. Mit
Einzelseitenanwendungen können Sie außerdem eine Benutzererfahrung bereitstellen
, die näher an der Arbeit ist, die sie mit Desktopanwendungen sehen.
Sobald die ursprüngliche Web-App heruntergeladen wurde; danach
scheinen die meisten anderen Interaktionen so zu sein, als würden Sie mit einer Desktop-Anwendung interagieren.
Um zusammenzufassen, was wir gerade gelernt haben, was ist eine Single Page Application?
Eine Single Page Application ist eine Webanwendung oder eine Website, die in eine einzelne Seite passt.
Sie müssen die gesamte Seite nicht jedes Mal neu laden, wenn ein Benutzer
mit der Anwendung interagiert.
Die UX ist eher wie ein Desktop oder eine native Anwendung.
Die meisten Ressourcen, die für Ihre Anwendung benötigt
werden, werden bei der ersten Instanz selbst heruntergeladen, wobei die erste Seite geladen wird.
Danach werden nur Teile der Seite neu gezeichnet,
je nachdem, wie die Benutzerinteraktion stattfindet, ohne dass ein vollständiger Server-Rundtrip erforderlich ist,
um alle benötigten Ressourcen abzurufen.
Natürlich kommt dies nicht ohne eine eigene Reihe von Fragen, die angegangen werden müssen.
Wenn Sie also Single Page Applications entwerfen,
ist eines der ersten Dinge, die Menschen oft über Single Page Applications in Frage stellen, dass sie nicht für Suchmaschinen optimiert sind.
Suchmaschinenoptimierung ist also ein wichtiger Teil, der angegangen werden muss.
Wenn Sie also Suchmaschinen haben
, die Ihre Website crawlen, um Daten zu extrahieren und Indexinformationen zu extrahieren,
dann sind Single Page Applications in diesem Fall möglicherweise nicht unbedingt kooperativ.
Aber auch Suchmaschinenoptimierung mit den aktuellen Datenrahmen,
wie Angular, sind weit auf den Weg gekommen, dass sogar mit Single Page Application,
Suchmaschinen können im Wesentlichen eine Menge der Informationen
, die Ihre Web-Anwendung dient indizieren.
Das zweite Problem, das behoben werden soll, ist, wie viel der Webaufbau
auf die Client-Site ausgelagert werden soll, im Gegensatz zur Server-Site.
So fungiert der Server so ziemlich als Datenquelle in Single Page Applications
und ein Großteil der Arbeit wird auf die Client-Site verschoben.
Aus einer Perspektive
bietet Ihnen dies eine wesentlich skalierbarere Möglichkeit, Ihre Webanwendung
an Ihre Client-Site bereitzustellen, da ein Großteil der Rendering-Arbeit auf der Client-Site erledigt wird.
Jetzt können Sie dies zu einem gewissen Grad optimieren, um den anfänglichen Download
der Webanwendung von der Server-Site auszugleichen,
indem Sie einen Teil des Renderings auf der Server-Site durchführen.
Wie ich bereits erwähnt habe, bietet Angular Ihnen die Möglichkeit,
dies mit teilweisem Server-Site-Rendering
Ihrer ursprünglichen Ansicht Ihrer Anwendung zu tun.
Der dritte Aspekt ist, wie man den Verlauf pflegt, wenn man also auf eine Zurück-
oder eine Vorwärtsschaltfläche klickt, wohin würdest du den Benutzer bringen?
Speichern Sie genügend Informationen
, damit Sie zwischen den verschiedenen Ansichten Ihrer Anwendung navigieren können usw.?
Das ist also eine Sache, die Sie im Hinterkopf behalten müssen.
Natürlich, weil der Angular Router die fünfseitige HTML History API nutzt,
so dass er in der Lage ist, dieses Problem zu einem großen Teil zu beheben.
Die letzte Frage, die wir haben, ist die Analyse.
Wie unterstützen Sie Analytics auf Ihrer Webseite?
Wie erfassen Sie die Analysedaten und so weiter?
Und auch, wie ich bereits erwähnt habe,
ist die Beschleunigung des anfänglichen Seitenladens etwas, das beim Entwerfen Ihrer Webanwendung von Bedeutung ist.
Jetzt mit Angular, wie gesagt,
beschleunigt das partielle Rendern auf der Serverseite das anfängliche Laden der Seite
auf Ihrer Client-Site, während der Rest der Webanwendung
auf die Client-Site heruntergeladen wird.
So können Sie ein wenig von der anfänglichen Downloadzeit für die Webanwendung maskieren,
indem Sie partielles Rendern von der Server-Site selbst durchführen.
Lassen Sie uns nun mit diesen grundlegenden Ideen erkunden, wie Angular Single Page Applications unterstützt.
Wir haben den Angular-Router bereits
in der vorherigen Übung in unsere Angular-Anwendung integriert.
In den nachfolgenden Übungen in dieser Lektion
und Aufgabe werden wir die Entwicklung der Single Page Application abschließen
, an der wir bisher in diesem Kurs gearbeitet haben.