1
00:00:03,609 --> 00:00:09,108
Lassen Sie mich Ihnen jetzt einen kurzen Überblick über Single Page Applications geben.

2
00:00:09,108 --> 00:00:11,415
Was sind Single Page Applications?

3
00:00:11,415 --> 00:00:16,080
Inwiefern unterscheiden sie sich von den Websites, die Sie früher entwickelt haben?

4
00:00:16,080 --> 00:00:21,405
Zum Beispiel die Website, die Sie im vorherigen Verlauf dieser Spezialisierung entwickelt haben, auf

5
00:00:21,405 --> 00:00:26,854
der Sie mehrere Seiten hatten - warum sind Single Page Applications interessant

6
00:00:26,854 --> 00:00:29,300
und was müssen Sie beachten,

7
00:00:29,300 --> 00:00:32,548
wenn Sie Single Page Applications entwerfen?

8
00:00:32,548 --> 00:00:37,606
Dieser Vortrag ist nicht beabsichtigt, eine ganze Abhandlung über Single Page Applications zu sein,

9
00:00:37,606 --> 00:00:40,159
aber wirklich, geben Sie genug Einführung,

10
00:00:40,159 --> 00:00:44,375
um Sie mit dem Nachdenken über Single Page Applications beginnen,

11
00:00:44,375 --> 00:00:47,509
vor allem im Kontext von Angular.

12
00:00:47,509 --> 00:00:53,409
Bevor wir Single Page Applications verstehen, machen wir einen Schritt zurück

13
00:00:53,409 --> 00:00:56,335
und schauen wir uns an, wie traditionelle Websites funktionieren.

14
00:00:56,335 --> 00:00:59,695
Auf traditionellen Websites, bis jetzt - wenn Sie eine Website besuchen,

15
00:00:59,695 --> 00:01:02,774
können Sie um den Zugriff auf eine bestimmte Seite bitten.

16
00:01:02,774 --> 00:01:06,691
Sie werden beispielsweise eine Seite index.html anfordern,

17
00:01:06,691 --> 00:01:10,600
wenn Sie zur Website navigieren,

18
00:01:10,600 --> 00:01:12,879
indem Sie entweder auf einen Link klicken

19
00:01:12,879 --> 00:01:19,855
oder die Adresse der Website in die Adressleiste Ihres Browsers eingeben. In der

20
00:01:19,855 --> 00:01:23,950
Regel ist die Seite index.html die erste

21
00:01:23,950 --> 00:01:27,140
, die Sie abrufen, wenn Sie eine Website besuchen.

22
00:01:27,140 --> 00:01:30,894
Und wenn die Seite vom Server in Ihren Browser heruntergeladen wird -

23
00:01:30,894 --> 00:01:33,989
und dann wird dies in Ihrem Browser angezeigt.

24
00:01:33,989 --> 00:01:39,109
Dies kann nun nicht nur die Seite index.html enthalten, sondern auch andere Ressourcen

25
00:01:39,109 --> 00:01:44,224
, die möglicherweise heruntergeladen werden müssen, um die Seite index.html zu erstellen.

26
00:01:44,224 --> 00:01:49,239
In diesem Fall erfordert die Seite index.html möglicherweise zusätzliche Ressourcen,

27
00:01:49,239 --> 00:01:57,935
wie Bilder oder Daten, heruntergeladen werden, bevor die Indexseite erstellt werden kann.

28
00:01:57,935 --> 00:02:02,980
Aber jetzt, später, wenn Sie zu einer anderen Seite auf Ihrer Website navigieren

29
00:02:02,980 --> 00:02:07,073
- zum Beispiel eine andere Seite wie contactus.html,

30
00:02:07,073 --> 00:02:14,259
wird dies dazu führen,

31
00:02:14,259 --> 00:02:16,930
dass Ihr Browser eine weitere Anfrage an den Server sendet, um diese zweite Seite zu holen.

32
00:02:16,930 --> 00:02:19,960
Es wird also eine ganze Anfrage an den Server initiieren

33
00:02:19,960 --> 00:02:22,479
und alle Ressourcen, die für

34
00:02:22,479 --> 00:02:27,560
die Erstellung der zweiten Seite benötigt werden, müssen vom Server heruntergeladen werden.

35
00:02:27,560 --> 00:02:30,745
Wenn Sie also von einer Seite zu einer anderen Seite wechseln,

36
00:02:30,745 --> 00:02:34,819
wird jede neue Seite vom Server geladen werden,

37
00:02:34,819 --> 00:02:37,705
und dies würde eine Roundtrip-Zeit zum Server beinhalten,

38
00:02:37,705 --> 00:02:42,099
um alle Ressourcen zu holen, die für die Erstellung dieser Seiten erforderlich sind.

39
00:02:42,099 --> 00:02:45,025
Stellen Sie sich nun vor, dass Ihre Website viele Seiten hat.

40
00:02:45,025 --> 00:02:48,310
Dann erfordert natürlich jedes einzelne Stück, das Ihre

41
00:02:48,310 --> 00:02:54,025
Webseite für das Rendern benötigt, eine vollständige Round-Trip-Zeit zu den Servern.

42
00:02:54,025 --> 00:02:58,685
Was Sie beachten würden, ist - oft ist, dass viele dieser Seiten viel gemeinsam haben.

43
00:02:58,685 --> 00:03:00,444
Vielleicht sind zum Beispiel die Kopf-

44
00:03:00,444 --> 00:03:05,275
und Fußzeile und einige andere Informationen alle auf all diesen Seiten üblich.

45
00:03:05,275 --> 00:03:09,875
Dennoch erfordert jede einzelne neue Seitenanforderung, dass Sie

46
00:03:09,875 --> 00:03:15,051
die gesamte Seite vom Server abrufen müssen.

47
00:03:15,051 --> 00:03:22,150
Jetzt können Sie mit der Verwendung von Caching auf der Browser-Site einige dieser Probleme beheben,

48
00:03:22,150 --> 00:03:28,740
indem Sie die bereits abgerufenen Ressourcen aus Ihrem Cache wiederverwenden. Dennoch

49
00:03:28,740 --> 00:03:33,189
erfordert jede neue Seite, zu der Sie navigieren, eine ganze Seite

50
00:03:33,189 --> 00:03:35,830
von der Server-Site neu geladen werden.

51
00:03:35,830 --> 00:03:40,240
Single Page Applications nähern sich diesem Problem auf eine andere Art und Weise.

52
00:03:40,240 --> 00:03:44,289
In einer Single Page Application haben wir in der Regel eine Webanwendung entwickelt.

53
00:03:44,289 --> 00:03:49,955
Wenn der Browser zur Website navigiert,

54
00:03:49,955 --> 00:03:55,384
wird dies für die Webanwendung von der Server-Site heruntergeladen werden.

55
00:03:55,384 --> 00:03:59,472
Dies wird beispielsweise in einer Masterseite wie index.html enthalten sein,

56
00:03:59,472 --> 00:04:02,860
die einen ganzen Satz von Assets auslöst,

57
00:04:02,860 --> 00:04:09,553
die zum Rendern Ihrer Web-App auf Ihre Client-Site heruntergeladen werden müssen.

58
00:04:09,553 --> 00:04:14,199
Wie diese Assets gepackt werden, hängt davon ab, wie Sie Ihre Webanwendung entwerfen

59
00:04:14,199 --> 00:04:18,439
und welches Framework Sie verwenden, um Ihre Webanwendung zu entwerfen.

60
00:04:18,439 --> 00:04:26,805
Trotzdem haben Sie einen einzigen großen Download zu Beginn Ihrer Webanwendung.

61
00:04:26,805 --> 00:04:32,020
Nachfolgende Änderungen an der Client-Site, z. B. durch einen Klick auf einen Link

62
00:04:32,020 --> 00:04:36,160
initiiert, führen zu einer neuen Anforderung an die Server-Site. In diesem Fall laden

63
00:04:36,160 --> 00:04:42,550
Sie jedoch häufig nur einige Daten, möglicherweise in Form von JSON-Daten,

64
00:04:42,550 --> 00:04:45,745
von der Server-Site herunter.

65
00:04:45,745 --> 00:04:52,060
In diesem Fall erfordert jeder von ihnen möglicherweise nur Zugriff auf den Server

66
00:04:52,060 --> 00:04:54,839
, nur um die JSON-Daten herunterzuladen,

67
00:04:54,839 --> 00:05:00,009
wodurch Sie dann möglicherweise die neue Ansicht

68
00:05:00,009 --> 00:05:03,240
in Ihrer Single Page Application vollständig rendern können.

69
00:05:03,240 --> 00:05:07,329
Der anfängliche Download der Seite, der anfängliche Download der Anwendung,

70
00:05:07,329 --> 00:05:11,218
ist natürlich immer da, aber die meisten nachfolgenden Interaktionen mit dem Server

71
00:05:11,218 --> 00:05:17,050
sind einfach zum Herunterladen von Daten, in der Regel in Form von JSON oder XML,

72
00:05:17,050 --> 00:05:20,930
abhängig davon, wie Sie Ihr Datenformat entwerfen.

73
00:05:20,930 --> 00:05:22,720
Sobald die Daten heruntergeladen wurden,

74
00:05:22,720 --> 00:05:27,865
können diese Daten dann verwendet werden, um die neue Ansicht in Ihrer Anwendung zu rendern.

75
00:05:27,865 --> 00:05:29,259
Unter diesen Umständen

76
00:05:29,259 --> 00:05:33,870
sparen Sie eine Menge Roundtrip-Zeit zum Server, um viele Assets herunterzuladen.

77
00:05:33,870 --> 00:05:38,680
Natürlich erfordert das anfängliche Laden der Seite eine gewisse Menge an Arbeit,

78
00:05:38,680 --> 00:05:44,394
aber die nachfolgenden Anfragen können für sehr kleine Datenmengen sein.

79
00:05:44,394 --> 00:05:52,037
Und das ist in der Tat das bedeutende Merkmal von Single Page Applications.

80
00:05:52,037 --> 00:05:58,310
Jetzt

81
00:05:58,310 --> 00:06:05,925
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.

82
00:06:05,925 --> 00:06:07,730
So

83
00:06:07,730 --> 00:06:13,853
können Sie auch Angular zum Beispiel einen Teil Ihrer ersten Ansicht auf der Server-Site vorrendern,

84
00:06:13,853 --> 00:06:20,783
um die Anzeige von Informationen auf dem Client schnell zu ermöglichen,

85
00:06:20,783 --> 00:06:26,995
während der Rest der Webanwendung von Ihrem Browser heruntergeladen wird.

86
00:06:26,995 --> 00:06:31,314
So können wir zusammenfassen, dass Single Page Applications

87
00:06:31,314 --> 00:06:35,060
als Webanwendung auf einer Website, die in eine einzelne Seite passt - wieder,

88
00:06:35,060 --> 00:06:40,805
geben oder nehmen - Sie - Sie wissen, interpretieren Sie es nicht zu wörtlich.

89
00:06:40,805 --> 00:06:44,389
Sie müssen also keine ganze Seite erneut laden.

90
00:06:44,389 --> 00:06:49,620
Das ist also das bedeutende Merkmal einer Single-Page-Anwendung. Mit

91
00:06:49,620 --> 00:06:54,139
Einzelseitenanwendungen können Sie außerdem eine Benutzererfahrung bereitstellen

92
00:06:54,139 --> 00:06:59,435
, die näher an der Arbeit ist, die sie mit Desktopanwendungen sehen.

93
00:06:59,435 --> 00:07:02,930
Sobald die ursprüngliche Web-App heruntergeladen wurde; danach

94
00:07:02,930 --> 00:07:11,475
scheinen die meisten anderen Interaktionen so zu sein, als würden Sie mit einer Desktop-Anwendung interagieren.

95
00:07:11,475 --> 00:07:15,959
Um zusammenzufassen, was wir gerade gelernt haben, was ist eine Single Page Application?

96
00:07:15,959 --> 00:07:21,069
Eine Single Page Application ist eine Webanwendung oder eine Website, die in eine einzelne Seite passt.

97
00:07:21,069 --> 00:07:26,670
Sie müssen die gesamte Seite nicht jedes Mal neu laden, wenn ein Benutzer

98
00:07:26,670 --> 00:07:28,362
mit der Anwendung interagiert.

99
00:07:28,362 --> 00:07:34,574
Die UX ist eher wie ein Desktop oder eine native Anwendung.

100
00:07:34,574 --> 00:07:37,199
Die meisten Ressourcen, die für Ihre Anwendung benötigt

101
00:07:37,199 --> 00:07:42,699
werden, werden bei der ersten Instanz selbst heruntergeladen, wobei die erste Seite geladen wird.

102
00:07:42,699 --> 00:07:45,720
Danach werden nur Teile der Seite neu gezeichnet,

103
00:07:45,720 --> 00:07:53,540
je nachdem, wie die Benutzerinteraktion stattfindet, ohne dass ein vollständiger Server-Rundtrip erforderlich ist,

104
00:07:53,540 --> 00:07:58,889
um alle benötigten Ressourcen abzurufen.

105
00:07:58,889 --> 00:08:04,644
Natürlich kommt dies nicht ohne eine eigene Reihe von Fragen, die angegangen werden müssen.

106
00:08:04,644 --> 00:08:11,609
Wenn Sie also Single Page Applications entwerfen,

107
00:08:11,609 --> 00:08:14,444
ist eines der ersten Dinge, die Menschen oft über Single Page Applications in Frage stellen, dass sie nicht für Suchmaschinen optimiert sind.

108
00:08:14,444 --> 00:08:19,225
Suchmaschinenoptimierung ist also ein wichtiger Teil, der angegangen werden muss.

109
00:08:19,225 --> 00:08:20,579
Wenn Sie also Suchmaschinen haben

110
00:08:20,579 --> 00:08:24,795
, die Ihre Website crawlen, um Daten zu extrahieren und Indexinformationen zu extrahieren,

111
00:08:24,795 --> 00:08:28,889
dann sind Single Page Applications in diesem Fall möglicherweise nicht unbedingt kooperativ.

112
00:08:28,889 --> 00:08:33,230
Aber auch Suchmaschinenoptimierung mit den aktuellen Datenrahmen,

113
00:08:33,230 --> 00:08:40,680
wie Angular, sind weit auf den Weg gekommen, dass sogar mit Single Page Application,

114
00:08:40,680 --> 00:08:47,940
Suchmaschinen können im Wesentlichen eine Menge der Informationen

115
00:08:47,940 --> 00:08:50,621
, die Ihre Web-Anwendung dient indizieren.

116
00:08:50,621 --> 00:08:59,009
Das zweite Problem, das behoben werden soll, ist, wie viel der Webaufbau

117
00:08:59,009 --> 00:09:02,750
auf die Client-Site ausgelagert werden soll, im Gegensatz zur Server-Site.

118
00:09:02,750 --> 00:09:07,500
So fungiert der Server so ziemlich als Datenquelle in Single Page Applications

119
00:09:07,500 --> 00:09:10,644
und ein Großteil der Arbeit wird auf die Client-Site verschoben.

120
00:09:10,644 --> 00:09:11,840
Aus einer Perspektive

121
00:09:11,840 --> 00:09:18,782
bietet Ihnen dies eine wesentlich skalierbarere Möglichkeit, Ihre Webanwendung

122
00:09:18,782 --> 00:09:24,037
an Ihre Client-Site bereitzustellen, da ein Großteil der Rendering-Arbeit auf der Client-Site erledigt wird.

123
00:09:24,037 --> 00:09:31,649
Jetzt können Sie dies zu einem gewissen Grad optimieren, um den anfänglichen Download

124
00:09:31,649 --> 00:09:34,399
der Webanwendung von der Server-Site auszugleichen,

125
00:09:34,399 --> 00:09:37,034
indem Sie einen Teil des Renderings auf der Server-Site durchführen.

126
00:09:37,034 --> 00:09:40,559
Wie ich bereits erwähnt habe, bietet Angular Ihnen die Möglichkeit,

127
00:09:40,559 --> 00:09:45,120
dies mit teilweisem Server-Site-Rendering

128
00:09:45,120 --> 00:09:48,889
Ihrer ursprünglichen Ansicht Ihrer Anwendung zu tun.

129
00:09:48,889 --> 00:09:53,460
Der dritte Aspekt ist, wie man den Verlauf pflegt, wenn man also auf eine Zurück-

130
00:09:53,460 --> 00:09:56,789
oder eine Vorwärtsschaltfläche klickt, wohin würdest du den Benutzer bringen?

131
00:09:56,789 --> 00:09:59,759
Speichern Sie genügend Informationen

132
00:09:59,759 --> 00:10:06,083
, damit Sie zwischen den verschiedenen Ansichten Ihrer Anwendung navigieren können usw.?

133
00:10:06,083 --> 00:10:08,985
Das ist also eine Sache, die Sie im Hinterkopf behalten müssen.

134
00:10:08,985 --> 00:10:16,975
Natürlich, weil der Angular Router die fünfseitige HTML History API nutzt,

135
00:10:16,975 --> 00:10:21,649
so dass er in der Lage ist, dieses Problem zu einem großen Teil zu beheben.

136
00:10:21,649 --> 00:10:25,139
Die letzte Frage, die wir haben, ist die Analyse.

137
00:10:25,139 --> 00:10:29,804
Wie unterstützen Sie Analytics auf Ihrer Webseite?

138
00:10:29,804 --> 00:10:33,850
Wie erfassen Sie die Analysedaten und so weiter?

139
00:10:33,850 --> 00:10:39,235
Und auch, wie ich bereits erwähnt habe,

140
00:10:39,235 --> 00:10:44,924
ist die Beschleunigung des anfänglichen Seitenladens etwas, das beim Entwerfen Ihrer Webanwendung von Bedeutung ist.

141
00:10:44,924 --> 00:10:46,764
Jetzt mit Angular, wie gesagt,

142
00:10:46,764 --> 00:10:52,449
beschleunigt das partielle Rendern auf der Serverseite das anfängliche Laden der Seite

143
00:10:52,449 --> 00:10:57,610
auf Ihrer Client-Site, während der Rest der Webanwendung

144
00:10:57,610 --> 00:11:00,735
auf die Client-Site heruntergeladen wird.

145
00:11:00,735 --> 00:11:07,120
So können Sie ein wenig von der anfänglichen Downloadzeit für die Webanwendung maskieren,

146
00:11:07,120 --> 00:11:13,701
indem Sie partielles Rendern von der Server-Site selbst durchführen.

147
00:11:13,701 --> 00:11:19,120
Lassen Sie uns nun mit diesen grundlegenden Ideen erkunden, wie Angular Single Page Applications unterstützt.

148
00:11:19,120 --> 00:11:22,450
Wir haben den Angular-Router bereits

149
00:11:22,450 --> 00:11:25,375
in der vorherigen Übung in unsere Angular-Anwendung integriert.

150
00:11:25,375 --> 00:11:28,879
In den nachfolgenden Übungen in dieser Lektion

151
00:11:28,879 --> 00:11:34,315
und Aufgabe werden wir die Entwicklung der Single Page Application abschließen

152
00:11:34,315 --> 00:11:41,139
, an der wir bisher in diesem Kurs gearbeitet haben.