1
00:00:03,609 --> 00:00:09,108
Позвольте мне теперь дать вам краткий обзор одностраничных приложений.

2
00:00:09,108 --> 00:00:11,415
Что такое однострочные приложения?

3
00:00:11,415 --> 00:00:16,080
Чем они отличаются от сайтов, которые вы могли разработать раньше?

4
00:00:16,080 --> 00:00:21,405
Например, сайт, который вы разработали в предыдущем курсе этой специализации,

5
00:00:21,405 --> 00:00:26,854
, где у вас было несколько страниц - почему одностраничные приложения интересны

6
00:00:26,854 --> 00:00:29,300
и что это такое, что вам нужно знать

7
00:00:29,300 --> 00:00:32,548
, когда вы разрабатываете одностраничные приложения?

8
00:00:32,548 --> 00:00:37,606
Эта лекция не предназначена для того, чтобы быть целым трактатом о одностраничных приложениях,

9
00:00:37,606 --> 00:00:40,159
, но на самом деле, дать вам достаточно введение

10
00:00:40,159 --> 00:00:44,375
, чтобы вы начали думать о одностраничных приложений,

11
00:00:44,375 --> 00:00:47,509
особенно в контексте Angular.

12
00:00:47,509 --> 00:00:53,409
Прежде чем мы поймем одностраничные приложения, давайте сделаем шаг назад

13
00:00:53,409 --> 00:00:56,335
и посмотрим, как работают традиционные веб-сайты.

14
00:00:56,335 --> 00:00:59,695
В традиционных веб-сайтах, пока - если вы посещаете сайт,

15
00:00:59,695 --> 00:01:02,774
вы можете запросить доступ к определенной странице.

16
00:01:02,774 --> 00:01:06,691
Например, вы будете запрашивать страницу index.html

17
00:01:06,691 --> 00:01:10,600
при переходе на сайт,

18
00:01:10,600 --> 00:01:12,879
либо нажав на ссылку

19
00:01:12,879 --> 00:01:19,855
, либо введя адрес веб-сайта в адресную строку браузера.

20
00:01:19,855 --> 00:01:23,950
Таким образом, как правило, страница index.html является первой

21
00:01:23,950 --> 00:01:27,140
, которую вы получаете при посещении веб-сайта.

22
00:01:27,140 --> 00:01:30,894
А когда страница загружается с сервера в ваш браузер -

23
00:01:30,894 --> 00:01:33,989
и тогда это будет отображаться в вашем браузере.

24
00:01:33,989 --> 00:01:39,109
Теперь это может включать не только страницу index.html, но и другие ресурсы

25
00:01:39,109 --> 00:01:44,224
, которые могут понадобиться для того, чтобы построить страницу index.html.

26
00:01:44,224 --> 00:01:49,239
В этом случае страница index.html может потребовать дополнительных ресурсов, как изображения или данные

27
00:01:49,239 --> 00:01:57,935
, для загрузки до того, как будет создана индексная страница.

28
00:01:57,935 --> 00:02:02,980
Но теперь, впоследствии, если вы перейдете на другую страницу на своем сайте

29
00:02:02,980 --> 00:02:07,073
- скажем, например, другую страницу типа contactus.html,

30
00:02:07,073 --> 00:02:14,259
, это приведет к тому, что ваш браузер отправит еще один запрос на сервер

31
00:02:14,259 --> 00:02:16,930
для получения этой второй страницы.

32
00:02:16,930 --> 00:02:19,960
Таким образом, он инициирует весь запрос на сервер

33
00:02:19,960 --> 00:02:22,479
и все ресурсы, необходимые для построения

34
00:02:22,479 --> 00:02:27,560
второй страницы, должны быть загружены с сервера.

35
00:02:27,560 --> 00:02:30,745
Таким образом, когда вы переходите с одной страницы на другую страницу,

36
00:02:30,745 --> 00:02:34,819
это будет включать каждую новую страницу, которая будет загружена с сервера

37
00:02:34,819 --> 00:02:37,705
, и это будет включать время поездки туда и обратно на сервер

38
00:02:37,705 --> 00:02:42,099
, чтобы получить все ресурсы, необходимые для построения этих страниц.

39
00:02:42,099 --> 00:02:45,025
Теперь представьте, что на вашем сайте много страниц.

40
00:02:45,025 --> 00:02:48,310
Тогда очевидно, что каждая отдельная часть, которую требуется для рендеринга вашей веб-

41
00:02:48,310 --> 00:02:54,025
, потребует полного времени поездки на серверы.

42
00:02:54,025 --> 00:02:58,685
То, что вы бы отметили, - часто это то, что многие из этих страниц имеют много общего.

43
00:02:58,685 --> 00:03:00,444
Возможно, например, заголовок

44
00:03:00,444 --> 00:03:05,275
и нижний колонтитул и какая-то другая информация являются общими на всех этих страницах.

45
00:03:05,275 --> 00:03:09,875
Но все же, каждый новый запрос страницы потребует от вас

46
00:03:09,875 --> 00:03:15,051
- пойти и получить всю страницу с сервера.

47
00:03:15,051 --> 00:03:22,150
Теперь с использованием кэширования на сайте браузера, вы можете смягчить некоторые из этих проблем

48
00:03:22,150 --> 00:03:28,740
, повторно используя уже полученные ресурсы из кэша; но все же,

49
00:03:28,740 --> 00:03:33,189
каждая новая страница, на которую вы переходите, потребует перезагрузки всей страницы

50
00:03:33,189 --> 00:03:35,830
с сайта сервера.

51
00:03:35,830 --> 00:03:40,240
Одностраничные приложения подходят к этой проблеме по-другому.

52
00:03:40,240 --> 00:03:44,289
В одностраничном приложении, как правило, мы разработали веб-приложение

53
00:03:44,289 --> 00:03:49,955
, поэтому, когда браузер переходит на веб-сайт,

54
00:03:49,955 --> 00:03:55,384
, тогда это будет запрашивать веб-приложение для загрузки с сайта сервера.

55
00:03:55,384 --> 00:03:59,472
Таким образом, это будет, например, содержаться в главной странице, такой как index.html,

56
00:03:59,472 --> 00:04:02,860
, которая вызовет весь набор активов

57
00:04:02,860 --> 00:04:09,553
, которые необходимы для рендеринга вашего веб-приложения для загрузки на ваш клиентский сайт.

58
00:04:09,553 --> 00:04:14,199
Теперь, как эти активы упакованы, зависит от того, как вы разрабатываете веб-приложение

59
00:04:14,199 --> 00:04:18,439
, а также от того, какую структуру вы используете для разработки вашего веб-приложения.

60
00:04:18,439 --> 00:04:26,805
Но, тем не менее, у вас есть одна большая загрузка в начале вашего веб-приложения.

61
00:04:26,805 --> 00:04:32,020
Последующие изменения на клиентском сайте, например, инициированные кликом по ссылке,

62
00:04:32,020 --> 00:04:36,160
инициирует новый запрос на сайт сервера; но в этом случае

63
00:04:36,160 --> 00:04:42,550
очень часто вы загружаете только некоторые данные, возможно, в виде данных JSON,

64
00:04:42,550 --> 00:04:45,745
с сайта сервера.

65
00:04:45,745 --> 00:04:52,060
Таким образом, в этом случае для каждого из них может потребоваться только доступ к серверу

66
00:04:52,060 --> 00:04:54,839
только для загрузки данных JSON, например

67
00:04:54,839 --> 00:05:00,009
, который затем может позволить вам полностью отобразить новое представление

68
00:05:00,009 --> 00:05:03,240
в вашем приложении Single Page.

69
00:05:03,240 --> 00:05:07,329
Так что начальная загрузка страницы, начальная загрузка приложения, конечно,

70
00:05:07,329 --> 00:05:11,218
всегда есть, но большинство последующих взаимодействий с сервером

71
00:05:11,218 --> 00:05:17,050
будет просто для загрузки данных, как правило, в виде JSON или XML,

72
00:05:17,050 --> 00:05:20,930
в зависимости от того, как вы создаете свой формат данных.

73
00:05:20,930 --> 00:05:22,720
И как только данные будут загружены,

74
00:05:22,720 --> 00:05:27,865
эти данные могут быть использованы для рендеринга нового представления в вашем приложении.

75
00:05:27,865 --> 00:05:29,259
Так что в этих обстоятельствах

76
00:05:29,259 --> 00:05:33,870
вы сэкономите много времени на поездку на сервер для скачивания большого количества активов.

77
00:05:33,870 --> 00:05:38,680
Конечно, начальная загрузка страницы требует некоторого объема работы,

78
00:05:38,680 --> 00:05:44,394
, но последующие запросы могут быть очень маленькими объемами данных.

79
00:05:44,394 --> 00:05:52,037
И это, действительно, является важной особенностью одностраничных приложений.

80
00:05:52,037 --> 00:05:58,310
Теперь с предварительной рендерингом некоторых из своих просмотров на самом сервере,

81
00:05:58,310 --> 00:06:05,925
вы даже можете уменьшить некоторое время начальной загрузки для вашего веб-приложения.

82
00:06:05,925 --> 00:06:07,730
Так даже Angular, например,

83
00:06:07,730 --> 00:06:13,853
позволяет предварительно визуализировать часть вашего первого представления на сайте сервера

84
00:06:13,853 --> 00:06:20,783
, чтобы включить отображение информации клиенту быстро,

85
00:06:20,783 --> 00:06:26,995
в то время как остальная часть веб-приложения загружается вашим браузером.

86
00:06:26,995 --> 00:06:31,314
Таким образом, мы можем резюмировать, что Single Page Applications

87
00:06:31,314 --> 00:06:35,060
как веб-приложение на веб-сайте, который вписывается в одну страницу - опять же,

88
00:06:35,060 --> 00:06:40,805
дают или берут - вы - знаете, не интерпретируйте это слишком буквально.

89
00:06:40,805 --> 00:06:44,389
Таким образом, вам не нужно перезагружать всю страницу снова.

90
00:06:44,389 --> 00:06:49,620
Так что это важная особенность одностраничного приложения.

91
00:06:49,620 --> 00:06:54,139
Кроме того, одностраничные приложения позволяют предоставлять пользовательский интерфейс

92
00:06:54,139 --> 00:06:59,435
, который ближе к работе с настольными приложениями.

93
00:06:59,435 --> 00:07:02,930
После загрузки исходного веб-приложения; затем

94
00:07:02,930 --> 00:07:11,475
большинство других взаимодействий будет казаться, что вы взаимодействуете с настольным приложением.

95
00:07:11,475 --> 00:07:15,959
Итак, чтобы обобщить то, что мы только что узнали, что такое одностраничное приложение?

96
00:07:15,959 --> 00:07:21,069
Одностраничное приложение представляет собой веб-приложение или веб-сайт, который помещается в одну страницу.

97
00:07:21,069 --> 00:07:26,670
Вам не нужно перезагружать всю страницу каждый раз, когда пользователь взаимодействует

98
00:07:26,670 --> 00:07:28,362
с приложением.

99
00:07:28,362 --> 00:07:34,574
UX больше похож на рабочий стол или собственное приложение.

100
00:07:34,574 --> 00:07:37,199
Большая часть ресурсов, необходимых для вашего приложения

101
00:07:37,199 --> 00:07:42,699
, загружается в самом первом экземпляре с первой загрузкой страницы.

102
00:07:42,699 --> 00:07:45,720
После этого перерисовываются только части страницы,

103
00:07:45,720 --> 00:07:53,540
в зависимости от того, как происходит взаимодействие с пользователем без необходимости полного обхода сервера,

104
00:07:53,540 --> 00:07:58,889
для получения всех необходимых ресурсов.

105
00:07:58,889 --> 00:08:04,644
Конечно, это не происходит без собственного набора вопросов, которые необходимо решить.

106
00:08:04,644 --> 00:08:07,740
Таким образом, когда вы разрабатываете одностраничные приложения, одна из первых вещей

107
00:08:07,740 --> 00:08:11,609
, что люди часто задают вопрос о одностраничных приложениях

108
00:08:11,609 --> 00:08:14,444
заключается в том, что они не оптимизированы для поисковых систем.

109
00:08:14,444 --> 00:08:19,225
Таким образом, оптимизация поисковых систем является важной частью, которая должна быть решена.

110
00:08:19,225 --> 00:08:20,579
Таким образом, если у вас есть поисковые системы

111
00:08:20,579 --> 00:08:24,795
, которые сканировать ваш сайт для извлечения данных и индексации информации,

112
00:08:24,795 --> 00:08:28,889
, тогда одностраничные приложения могут не обязательно сотрудничать в этом случае.

113
00:08:28,889 --> 00:08:33,230
Но даже поисковая оптимизация с текущими фреймворками данных,

114
00:08:33,230 --> 00:08:40,680
как Angular, пошли далеко по пути, что даже с Single Page Application,

115
00:08:40,680 --> 00:08:47,940
поисковые системы могут по существу индексировать много информации

116
00:08:47,940 --> 00:08:50,621
, что ваше веб-приложение обслуживает.

117
00:08:50,621 --> 00:08:59,009
Второй вопрос, который необходимо решить, заключается в том, какая часть веб-конструкции должна быть выгружена

118
00:08:59,009 --> 00:09:02,750
на клиентский сайт, а не на серверный сайт.

119
00:09:02,750 --> 00:09:07,500
Таким образом, сервер в значительной степени выступает в качестве источника данных в Single Page Applications

120
00:09:07,500 --> 00:09:10,644
и большая часть работы выгружается на клиентский сайт.

121
00:09:10,644 --> 00:09:11,840
С одной стороны,

122
00:09:11,840 --> 00:09:18,782
это дает вам гораздо более масштабируемый способ доставки вашего веб-приложения

123
00:09:18,782 --> 00:09:24,037
на ваш клиентский сайт, потому что большая часть работы рендеринга выполняется на клиентском сайте.

124
00:09:24,037 --> 00:09:31,649
Теперь вы можете оптимизировать это в некоторой степени, чтобы компенсировать начальную загрузку

125
00:09:31,649 --> 00:09:34,399
веб-приложения с сайта сервера

126
00:09:34,399 --> 00:09:37,034
, выполнив часть рендеринга на сайте сервера.

127
00:09:37,034 --> 00:09:40,559
Как я уже упоминал, Angular предоставляет вам возможность

128
00:09:40,559 --> 00:09:45,120
для этого с частичным рендерингом сайта

129
00:09:45,120 --> 00:09:48,889
вашего первоначального представления вашего приложения.

130
00:09:48,889 --> 00:09:53,460
Третий аспект - как сохранить историю, поэтому, когда вы нажимаете на кнопку Назад

131
00:09:53,460 --> 00:09:56,789
или кнопку вперед, куда бы вы взяли пользователя?

132
00:09:56,789 --> 00:09:59,759
Вы сохраняете достаточно информации

133
00:09:59,759 --> 00:10:06,083
, чтобы вы могли перемещаться между различными представлениями вашего приложения и так далее?

134
00:10:06,083 --> 00:10:08,985
Так что это одна вещь, которую вы должны иметь в виду.

135
00:10:08,985 --> 00:10:16,975
Конечно, потому что угловой маршрутизатор использует html-пятистраничный API истории,

136
00:10:16,975 --> 00:10:21,649
, поэтому он способен решить эту проблему в значительной степени.

137
00:10:21,649 --> 00:10:25,139
Последний вопрос, который у нас есть, это аналитика.

138
00:10:25,139 --> 00:10:29,804
Как вы поддерживаете аналитику на своей веб-странице?

139
00:10:29,804 --> 00:10:33,850
Как вы собираете аналитические данные и так далее?

140
00:10:33,850 --> 00:10:39,235
А также, как я уже упоминал ранее, ускорение начальной загрузки страницы

141
00:10:39,235 --> 00:10:44,924
- это то, что вызывает озабоченность, когда вы разрабатываете свое веб-приложение.

142
00:10:44,924 --> 00:10:46,764
Теперь с Angular, как я уже сказал,

143
00:10:46,764 --> 00:10:52,449
выполнение частичного рендеринга на стороне сервера ускорит начальную загрузку страницы

144
00:10:52,449 --> 00:10:57,610
на вашем клиентском сайте, в то время как остальная часть веб-приложения

145
00:10:57,610 --> 00:11:00,735
загружается на клиентский сайт.

146
00:11:00,735 --> 00:11:07,120
Таким образом, вы можете маскировать немного времени начальной загрузки веб-приложения

147
00:11:07,120 --> 00:11:10,730
, выполнив частичный рендеринг с самого сайта сервера.

148
00:11:10,730 --> 00:11:13,701
Имея в виду эти основные идеи,

149
00:11:13,701 --> 00:11:19,120
давайте теперь пойдем и изучим, как Angular поддерживает одностраничные приложения.

150
00:11:19,120 --> 00:11:22,450
В предыдущем упражнении мы уже включили угловой маршрутизатор

151
00:11:22,450 --> 00:11:25,375
в наше угловое приложение.

152
00:11:25,375 --> 00:11:28,879
В последующих упражнениях в этом уроке

153
00:11:28,879 --> 00:11:34,315
и задании мы завершаем разработку приложения на одной странице

154
00:11:34,315 --> 00:11:41,139
, над которым мы работали до сих пор в этом курсе.