1
00:00:03,609 --> 00:00:09,108
Permettez-moi maintenant de vous donner un bref aperçu des applications d'une seule page.

2
00:00:09,108 --> 00:00:11,415
Que sont les applications d'une seule page ?

3
00:00:11,415 --> 00:00:16,080
En quoi sont-ils différents des sites Web que vous auriez peut-être développés plus tôt ?

4
00:00:16,080 --> 00:00:21,405
Par exemple, le site Web que vous avez développé dans le cours précédent de cette spécialisation,

5
00:00:21,405 --> 00:00:26,854
où vous aviez plusieurs pages - pourquoi les applications d'une seule page sont-elles intéressantes

6
00:00:26,854 --> 00:00:29,300
et qu'est-ce que vous devez être conscient de

7
00:00:29,300 --> 00:00:32,548
lorsque vous concevez des applications d'une seule page ?

8
00:00:32,548 --> 00:00:37,606
Cette conférence n'est pas destinée à être un traité entier sur les applications d'une seule page,

9
00:00:37,606 --> 00:00:40,159
mais vraiment, vous donner assez d'introduction

10
00:00:40,159 --> 00:00:44,375
pour vous faire commencer à penser aux applications d'une seule page,

11
00:00:44,375 --> 00:00:47,509
en particulier dans le contexte d'Angular.

12
00:00:47,509 --> 00:00:53,409
Avant de comprendre les applications d'une seule page, prenons un peu de recul

13
00:00:53,409 --> 00:00:56,335
et regardons comment fonctionnent les sites Web traditionnels.

14
00:00:56,335 --> 00:00:59,695
Dans les sites Web traditionnels, jusqu'à présent - si vous visitez un site Web,

15
00:00:59,695 --> 00:01:02,774
vous pouvez demander l'accès à une page particulière.

16
00:01:02,774 --> 00:01:06,691
Par exemple, vous demanderez une page index.html

17
00:01:06,691 --> 00:01:10,600
lorsque vous naviguerez sur le site Web,

18
00:01:10,600 --> 00:01:12,879
soit en cliquant sur un lien

19
00:01:12,879 --> 00:01:19,855
, soit en tapant l'adresse du site Web dans la barre d'adresse de votre navigateur.

20
00:01:19,855 --> 00:01:23,950
Donc typiquement, la page index.html est la première

21
00:01:23,950 --> 00:01:27,140
que vous récupérez lorsque vous visitez un site Web.

22
00:01:27,140 --> 00:01:30,894
Et quand la page est téléchargée depuis le serveur vers votre navigateur -

23
00:01:30,894 --> 00:01:33,989
et alors cela sera affiché dans votre navigateur.

24
00:01:33,989 --> 00:01:39,109
Maintenant, cela peut inclure non seulement la page index.html, mais aussi d'autres ressources

25
00:01:39,109 --> 00:01:44,224
qui peuvent être téléchargées pour construire la page index.html.

26
00:01:44,224 --> 00:01:49,239
Dans ce cas, la page index.html peut nécessiter des ressources supplémentaires,

27
00:01:49,239 --> 00:01:57,935
comme des images ou des données, à télécharger avant que la page d'index puisse être construite.

28
00:01:57,935 --> 00:02:02,980
Mais maintenant, par la suite, si vous naviguez vers une autre page de votre site

29
00:02:02,980 --> 00:02:07,073
- disons, par exemple, une autre page comme contactus.html,

30
00:02:07,073 --> 00:02:14,259
cela entraînera votre navigateur envoyer une autre demande au serveur

31
00:02:14,259 --> 00:02:16,930
pour récupérer cette deuxième page.

32
00:02:16,930 --> 00:02:19,960
Donc, il lancera une requête entière au serveur

33
00:02:19,960 --> 00:02:22,479
et toutes les ressources nécessaires pour construire

34
00:02:22,479 --> 00:02:27,560
la deuxième page devront être téléchargées à partir du serveur.

35
00:02:27,560 --> 00:02:30,745
Ainsi, lorsque vous passez d'une page à une autre,

36
00:02:30,745 --> 00:02:34,819
cela impliquera chaque nouvelle page à charger à partir du serveur

37
00:02:34,819 --> 00:02:37,705
et cela impliquerait un temps aller-retour au serveur

38
00:02:37,705 --> 00:02:42,099
pour récupérer toutes les ressources nécessaires à la construction de ces pages.

39
00:02:42,099 --> 00:02:45,025
Maintenant, imaginez que votre site Web a beaucoup de pages.

40
00:02:45,025 --> 00:02:48,310
Alors évidemment, chaque pièce que votre page web

41
00:02:48,310 --> 00:02:54,025
nécessite pour le rendu nécessitera un temps aller-retour complet vers les serveurs.

42
00:02:54,025 --> 00:02:58,685
Ce que vous remarquerez, c'est souvent que beaucoup de ces pages ont beaucoup en commun.

43
00:02:58,685 --> 00:03:00,444
Peut-être, par exemple, l'en-tête

44
00:03:00,444 --> 00:03:05,275
et le pied de page et d'autres informations sont tous communs dans toutes ces pages.

45
00:03:05,275 --> 00:03:09,875
Mais quand même, chaque nouvelle demande de page vous demandera de

46
00:03:09,875 --> 00:03:15,051
- pour aller chercher la page entière du serveur.

47
00:03:15,051 --> 00:03:22,150
Maintenant, avec l'utilisation de la mise en cache sur le site du navigateur, vous pouvez atténuer certains de ces problèmes

48
00:03:22,150 --> 00:03:28,740
en réutilisant les ressources déjà récupérées de votre cache ; cependant,

49
00:03:28,740 --> 00:03:33,189
chaque nouvelle page vers laquelle vous naviguez nécessitera une page entière

50
00:03:33,189 --> 00:03:35,830
pour être rechargée à partir du site du serveur.

51
00:03:35,830 --> 00:03:40,240
Les applications d'une seule page abordent ce problème d'une manière différente.

52
00:03:40,240 --> 00:03:44,289
Dans une application d'une seule page, nous avons généralement développé une application Web

53
00:03:44,289 --> 00:03:49,955
de sorte que lorsque le navigateur navigue sur le site Web,

54
00:03:49,955 --> 00:03:55,384
alors cela demandera que l'application Web soit téléchargée à partir du site du serveur.

55
00:03:55,384 --> 00:03:59,472
Donc, cela sera, par exemple, contenu dans une page maître comme index.html,

56
00:03:59,472 --> 00:04:02,860
qui déclenchera tout un ensemble d'actifs

57
00:04:02,860 --> 00:04:09,553
qui sont nécessaires pour rendre votre application web à télécharger sur votre site client.

58
00:04:09,553 --> 00:04:14,199
Maintenant, la façon dont ces actifs sont empaquetés dépend de la façon dont vous concevez votre application Web

59
00:04:14,199 --> 00:04:18,439
et du framework que vous utilisez pour concevoir votre application Web.

60
00:04:18,439 --> 00:04:26,805
Mais néanmoins, vous avez un seul grand téléchargement au début de votre application web.

61
00:04:26,805 --> 00:04:32,020
Changements ultérieurs sur le site client, par exemple, initiés par un clic sur un lien,

62
00:04:32,020 --> 00:04:36,160
lancera une nouvelle demande sur le site serveur ; mais dans ce cas,

63
00:04:36,160 --> 00:04:42,550
très souvent, vous ne téléchargez que quelques données, peut-être sous la forme de données JSON,

64
00:04:42,550 --> 00:04:45,745
à partir du site serveur.

65
00:04:45,745 --> 00:04:52,060
Donc, dans ce cas, chacun d'entre eux peut nécessiter seulement l'accès au serveur

66
00:04:52,060 --> 00:04:54,839
juste pour télécharger les données JSON, par exemple,

67
00:04:54,839 --> 00:05:00,009
qui peut alors vous permettre de rendre complètement la nouvelle vue

68
00:05:00,009 --> 00:05:03,240
dans votre application Single Page.

69
00:05:03,240 --> 00:05:07,329
Donc, le téléchargement initial de la page, le téléchargement initial de l'application, bien sûr,

70
00:05:07,329 --> 00:05:11,218
est toujours là, mais la plupart des interactions ultérieures avec le serveur

71
00:05:11,218 --> 00:05:17,050
seront simplement pour télécharger des données, généralement sous la forme de JSON ou XML,

72
00:05:17,050 --> 00:05:20,930
selon la façon dont vous concevez votre format de données.

73
00:05:20,930 --> 00:05:22,720
Et une fois les données téléchargées,

74
00:05:22,720 --> 00:05:27,865
ces données peuvent ensuite être utilisées pour rendre la nouvelle vue dans votre application.

75
00:05:27,865 --> 00:05:29,259
Donc, dans ces circonstances,

76
00:05:29,259 --> 00:05:33,870
vous économiserez beaucoup de temps aller-retour sur le serveur pour télécharger beaucoup d'actifs.

77
00:05:33,870 --> 00:05:38,680
Bien sûr, le chargement initial de la page nécessite une certaine quantité de travail à faire,

78
00:05:38,680 --> 00:05:44,394
mais les demandes suivantes peuvent porter sur de très petites quantités de données.

79
00:05:44,394 --> 00:05:52,037
Et c'est, en effet, la caractéristique importante des applications d'une seule page.

80
00:05:52,037 --> 00:05:58,310
Maintenant, avec le pré-rendu de certaines de leurs vues sur le site du serveur lui-même,

81
00:05:58,310 --> 00:06:05,925
vous pouvez même atténuer une partie du temps de téléchargement initial de votre application Web.

82
00:06:05,925 --> 00:06:07,730
Ainsi même Angular, par exemple,

83
00:06:07,730 --> 00:06:13,853
vous permet de pré-rendre une partie de votre première vue sur le site du serveur

84
00:06:13,853 --> 00:06:20,783
pour permettre l'affichage des informations au client rapidement,

85
00:06:20,783 --> 00:06:26,995
pendant que le reste de l'application web est téléchargé par votre navigateur.

86
00:06:26,995 --> 00:06:31,314
Donc, nous pouvons résumer que les Applications Single Page

87
00:06:31,314 --> 00:06:35,060
comme une application web sur un site Web qui s'insère dans une seule page - encore une fois,

88
00:06:35,060 --> 00:06:40,805
donner ou prendre - vous - vous savez, ne l'interprétez pas trop littéralement.

89
00:06:40,805 --> 00:06:44,389
Donc, vous n'avez pas besoin de recharger une page entière à nouveau.

90
00:06:44,389 --> 00:06:49,620
C'est donc la caractéristique importante d'une application d'une seule page.

91
00:06:49,620 --> 00:06:54,139
De plus, les applications d'une seule page vous permettent d'offrir une expérience utilisateur

92
00:06:54,139 --> 00:06:59,435
plus proche du travail qu'elles voient avec les applications de bureau.

93
00:06:59,435 --> 00:07:02,930
Une fois l'application web initiale téléchargée ; par la suite,

94
00:07:02,930 --> 00:07:11,475
la plupart des autres interactions semblent avoir l'impression que vous interagissez avec une application de bureau.

95
00:07:11,475 --> 00:07:15,959
Donc, pour résumer ce que nous venons d'apprendre, qu'est-ce qu'une application d'une seule page ?

96
00:07:15,959 --> 00:07:21,069
Une application d'une seule page est une application Web ou un site Web qui s'insère dans une seule page.

97
00:07:21,069 --> 00:07:26,670
Vous n'avez pas besoin de recharger la page entière chaque fois qu'un utilisateur interagit

98
00:07:26,670 --> 00:07:28,362
avec l'application.

99
00:07:28,362 --> 00:07:34,574
L'UX est plus comme un bureau ou une application native.

100
00:07:34,574 --> 00:07:37,199
La plupart des ressources requises pour votre application

101
00:07:37,199 --> 00:07:42,699
sont téléchargées à la première instance elle-même, avec le chargement de la première page.

102
00:07:42,699 --> 00:07:45,720
Par la suite, seules des parties de la page sont redessinées,

103
00:07:45,720 --> 00:07:53,540
en fonction de la façon dont l'interaction de l'utilisateur se produit sans nécessiter un aller-retour complet du serveur,

104
00:07:53,540 --> 00:07:58,889
pour récupérer toutes les ressources dont vous avez besoin.

105
00:07:58,889 --> 00:08:04,644
Bien sûr, cela ne vient pas sans son propre ensemble de questions qui doivent être abordées.

106
00:08:04,644 --> 00:08:07,740
Donc, lorsque vous concevez des applications à page unique, l'une des premières choses

107
00:08:07,740 --> 00:08:11,609
que les gens interrogent souvent sur les applications à page unique

108
00:08:11,609 --> 00:08:14,444
est qu'elles ne sont pas optimisées pour les moteurs de recherche.

109
00:08:14,444 --> 00:08:19,225
Donc, l'optimisation des moteurs de recherche est une partie importante qui doit être abordée.

110
00:08:19,225 --> 00:08:20,579
Donc, si vous avez des moteurs de recherche

111
00:08:20,579 --> 00:08:24,795
qui explorent votre site Web pour extraire des données et indexer des informations,

112
00:08:24,795 --> 00:08:28,889
alors les applications de page unique peuvent ne pas être nécessairement coopératives dans ce cas.

113
00:08:28,889 --> 00:08:33,230
Mais même l'optimisation des moteurs de recherche avec les frameworks de données actuels,

114
00:08:33,230 --> 00:08:40,680
comme Angular, sont venus loin de la route que même avec l'application Single Page,

115
00:08:40,680 --> 00:08:47,940
moteurs de recherche peuvent essentiellement indexer beaucoup d'informations

116
00:08:47,940 --> 00:08:50,621
que votre application web sert.

117
00:08:50,621 --> 00:08:59,009
Le deuxième problème à résoudre est la quantité de construction Web qui doit être déchargée

118
00:08:59,009 --> 00:09:02,750
sur le site client par opposition au site serveur.

119
00:09:02,750 --> 00:09:07,500
Donc, le serveur agit à peu près comme une source de données dans les applications à page unique

120
00:09:07,500 --> 00:09:10,644
et une grande partie du travail est déchargée sur le site client.

121
00:09:10,644 --> 00:09:11,840
D'un point de vue,

122
00:09:11,840 --> 00:09:18,782
cela vous donne une façon beaucoup plus évolutive de livrer votre application web

123
00:09:18,782 --> 00:09:24,037
à votre site client, car une grande partie du travail de rendu est effectuée sur le site client.

124
00:09:24,037 --> 00:09:31,649
Maintenant, vous pouvez optimiser cela dans une certaine mesure pour compenser le téléchargement initial

125
00:09:31,649 --> 00:09:34,399
de l'application web à partir du site serveur

126
00:09:34,399 --> 00:09:37,034
en faisant une partie du rendu sur le site serveur.

127
00:09:37,034 --> 00:09:40,559
Comme je l'ai mentionné, Angular vous fournit une opportunité

128
00:09:40,559 --> 00:09:45,120
pour le faire avec un rendu partiel du site serveur

129
00:09:45,120 --> 00:09:48,889
de votre vue initiale de votre application.

130
00:09:48,889 --> 00:09:53,460
Le troisième aspect est comment maintenir l'historique alors quand vous cliquez sur un bouton de retour

131
00:09:53,460 --> 00:09:56,789
ou un bouton de transfert, où emmeneriez-vous l'utilisateur ?

132
00:09:56,789 --> 00:09:59,759
Enregistrez-vous suffisamment d'informations

133
00:09:59,759 --> 00:10:06,083
pour pouvoir naviguer parmi les différentes vues de votre application et ainsi de suite ?

134
00:10:06,083 --> 00:10:08,985
C'est donc une chose que vous devez garder à l'esprit.

135
00:10:08,985 --> 00:10:16,975
Bien sûr, parce que le routeur angulaire tire parti de l'API d'historique html de cinq pages,

136
00:10:16,975 --> 00:10:21,649
donc il est capable de résoudre ce problème dans une large mesure.

137
00:10:21,649 --> 00:10:25,139
La dernière question que nous avons est l'analyse.

138
00:10:25,139 --> 00:10:29,804
Comment prendre en charge les analyses sur votre page Web ?

139
00:10:29,804 --> 00:10:33,850
Comment collectez-vous les données analytiques et ainsi de suite ?

140
00:10:33,850 --> 00:10:39,235
Et aussi, comme je l'ai mentionné plus tôt, accélérer le chargement initial de la page

141
00:10:39,235 --> 00:10:44,924
est quelque chose qui est préoccupant lorsque vous concevez votre application web.

142
00:10:44,924 --> 00:10:46,764
Maintenant, avec Angular, comme je l'ai dit,

143
00:10:46,764 --> 00:10:52,449
faisant un rendu partiel du côté serveur accélérera le chargement initial de la page

144
00:10:52,449 --> 00:10:57,610
sur votre site client pendant que le reste de l'application web

145
00:10:57,610 --> 00:11:00,735
est téléchargé sur le site client.

146
00:11:00,735 --> 00:11:07,120
Ainsi, vous pouvez masquer un peu le temps de téléchargement initial de l'application web

147
00:11:07,120 --> 00:11:10,730
en effectuant un rendu partiel à partir du site du serveur lui-même.

148
00:11:10,730 --> 00:11:13,701
Avec ces idées de base à l'esprit,

149
00:11:13,701 --> 00:11:19,120
allons maintenant explorer comment Angular prend en charge les applications d'une seule page.

150
00:11:19,120 --> 00:11:22,450
Nous avons déjà intégré le routeur Angular

151
00:11:22,450 --> 00:11:25,375
dans notre application Angular dans l'exercice précédent.

152
00:11:25,375 --> 00:11:28,879
Dans les exercices suivants de cette leçon

153
00:11:28,879 --> 00:11:34,315
et de cette affectation, nous allons terminer le développement de l'Application Single Page

154
00:11:34,315 --> 00:11:41,139
sur laquelle nous avons travaillé jusqu'à présent dans ce cours.