1
00:00:03,609 --> 00:00:09,108
Let me now give you a brief overview of Single Page Applications.

2
00:00:09,108 --> 00:00:11,415
What are Single Page Applications?

3
00:00:11,415 --> 00:00:16,080
How are they different from the websites that you might have developed earlier?

4
00:00:16,080 --> 00:00:21,405
For example, the website that you developed in the previous course of this specialization,

5
00:00:21,405 --> 00:00:26,854
where you had multiple pages - why are Single Page Applications interesting

6
00:00:26,854 --> 00:00:29,300
and what is it that you need to be aware of

7
00:00:29,300 --> 00:00:32,548
when you're designing Single Page Applications?

8
00:00:32,548 --> 00:00:37,606
This lecture is not intended to be an entire treatise on Single Page Applications,

9
00:00:37,606 --> 00:00:40,159
but really, give you enough introduction

10
00:00:40,159 --> 00:00:44,375
to get you started on thinking about Single Page Applications,

11
00:00:44,375 --> 00:00:47,509
especially in the context of Angular.

12
00:00:47,509 --> 00:00:53,409
Before we understand Single Page Applications, let's take a step back

13
00:00:53,409 --> 00:00:56,335
and look at how traditional websites work.

14
00:00:56,335 --> 00:00:59,695
In traditional websites, so far - if you visit a website,

15
00:00:59,695 --> 00:01:02,774
you may be requesting for access to a particular page.

16
00:01:02,774 --> 00:01:06,691
For example, you will be requesting for an index.html page

17
00:01:06,691 --> 00:01:10,600
when you navigate to the website,

18
00:01:10,600 --> 00:01:12,879
either by clicking on a link

19
00:01:12,879 --> 00:01:19,855
or by typing the address of the website into the address bar of your browser.

20
00:01:19,855 --> 00:01:23,950
So typically, the index.html page is the first one

21
00:01:23,950 --> 00:01:27,140
that you fetch when you visit a website.

22
00:01:27,140 --> 00:01:30,894
And when the page is downloaded from the server to your browser -

23
00:01:30,894 --> 00:01:33,989
and then this will be displayed in your browser.

24
00:01:33,989 --> 00:01:39,109
Now this may include not just the index.html page, but also other resources

25
00:01:39,109 --> 00:01:44,224
that may be needed to be downloaded in order to construct the index.html page.

26
00:01:44,224 --> 00:01:49,239
In this case, the index.html page may require additional resources,

27
00:01:49,239 --> 00:01:57,935
like images or data, to be downloaded before the index page can be constructed.

28
00:01:57,935 --> 00:02:02,980
But now, subsequently, if you navigate to another page in your website

29
00:02:02,980 --> 00:02:07,073
- say, for example, another page like contactus.html,

30
00:02:07,073 --> 00:02:14,259
this will result in your browser sending another request to the server

31
00:02:14,259 --> 00:02:16,930
to fetch that second page.

32
00:02:16,930 --> 00:02:19,960
So it will initiate an entire request to the server

33
00:02:19,960 --> 00:02:22,479
and all the resources needed for constructing

34
00:02:22,479 --> 00:02:27,560
the second page will have to be downloaded from the server.

35
00:02:27,560 --> 00:02:30,745
So as you move from one page to another page,

36
00:02:30,745 --> 00:02:34,819
it will involve every new page to be loaded from the server

37
00:02:34,819 --> 00:02:37,705
and this would involve a round trip time to the server

38
00:02:37,705 --> 00:02:42,099
to fetch all the resources required for constructing those pages.

39
00:02:42,099 --> 00:02:45,025
Now imagine that your website has many pages.

40
00:02:45,025 --> 00:02:48,310
Then obviously, every single piece that your web

41
00:02:48,310 --> 00:02:54,025
page requires for rendering will require a full round trip time to the servers.

42
00:02:54,025 --> 00:02:58,685
What you would note is - often is that many of these pages have a lot in common.

43
00:02:58,685 --> 00:03:00,444
Perhaps, for example, the header

44
00:03:00,444 --> 00:03:05,275
and the footer and some other piece of information are all common in all these pages.

45
00:03:05,275 --> 00:03:09,875
But still, every single new page request will require you to

46
00:03:09,875 --> 00:03:15,051
- to go and fetch the entire page from the server.

47
00:03:15,051 --> 00:03:22,150
Now with the use of caching on the browser site, you can mitigate some of this problems

48
00:03:22,150 --> 00:03:28,740
by reusing the already fetched resources from your cache; but still,

49
00:03:28,740 --> 00:03:33,189
every new page that you navigate to will require an entire page

50
00:03:33,189 --> 00:03:35,830
to be reloaded from the server site.

51
00:03:35,830 --> 00:03:40,240
Single Page Applications approach this problem in a different way.

52
00:03:40,240 --> 00:03:44,289
In a Single Page Application, typically we have developed a web application

53
00:03:44,289 --> 00:03:49,955
so when the browser navigates to the website,

54
00:03:49,955 --> 00:03:55,384
then this will request for the web application to be downloaded from the server site.

55
00:03:55,384 --> 00:03:59,472
So this will be, for example, contained in a master page like index.html,

56
00:03:59,472 --> 00:04:02,860
which will trigger an entire set of assets

57
00:04:02,860 --> 00:04:09,553
that are required for rendering your web app to be downloaded to your client site.

58
00:04:09,553 --> 00:04:14,199
Now how these assets are packaged depends upon how you design your web application

59
00:04:14,199 --> 00:04:18,439
and also what framework you use to design your web application.

60
00:04:18,439 --> 00:04:26,805
But nevertheless, you have one single large download at the start of your web application.

61
00:04:26,805 --> 00:04:32,020
Subsequent changes to the client site, for example, initiated by a click on a link,

62
00:04:32,020 --> 00:04:36,160
will initiate a new request to the server site; but in this case,

63
00:04:36,160 --> 00:04:42,550
very often, you're only downloading some data, perhaps in the form of JSON data,

64
00:04:42,550 --> 00:04:45,745
from the server site.

65
00:04:45,745 --> 00:04:52,060
So in this case, each of these may require only access to the server

66
00:04:52,060 --> 00:04:54,839
just to download the JSON data, for example,

67
00:04:54,839 --> 00:05:00,009
which then may enable you to completely render the new view

68
00:05:00,009 --> 00:05:03,240
in your Single Page Application.

69
00:05:03,240 --> 00:05:07,329
So the initial page download, the initial application download, of course,

70
00:05:07,329 --> 00:05:11,218
is always there, but most subsequent interactions with the server

71
00:05:11,218 --> 00:05:17,050
will be simply for downloading data, typically in the form of JSON or XML,

72
00:05:17,050 --> 00:05:20,930
depending on how you design your data format.

73
00:05:20,930 --> 00:05:22,720
And once the data is downloaded,

74
00:05:22,720 --> 00:05:27,865
those data can be then used to render the new view within your application.

75
00:05:27,865 --> 00:05:29,259
So in these circumstances,

76
00:05:29,259 --> 00:05:33,870
you will save a lot of round trip time to the server for downloading a lot of assets.

77
00:05:33,870 --> 00:05:38,680
Of course, the initial page load requires some amount of work to be done,

78
00:05:38,680 --> 00:05:44,394
but the subsequent requests may be for very small amounts of data.

79
00:05:44,394 --> 00:05:52,037
And that, indeed, is the significant feature of Single Page Applications.

80
00:05:52,037 --> 00:05:58,310
Now with pre-rendering of some of their views on the server site itself,

81
00:05:58,310 --> 00:06:05,925
you can even mitigate some of the initial downloading time for your web application.

82
00:06:05,925 --> 00:06:07,730
So even Angular, for example,

83
00:06:07,730 --> 00:06:13,853
enables you to pre-render part of your first view on the server site

84
00:06:13,853 --> 00:06:20,783
to enable the display of information to the client quickly,

85
00:06:20,783 --> 00:06:26,995
while the rest of the web application is being downloaded by your browser.

86
00:06:26,995 --> 00:06:31,314
So we can summarize that Single Page Applications

87
00:06:31,314 --> 00:06:35,060
as a web application on a website that fits into a single page - again,

88
00:06:35,060 --> 00:06:40,805
give or take - you - you know, don't interpret it too literally.

89
00:06:40,805 --> 00:06:44,389
So you don't need to reload an entire page again.

90
00:06:44,389 --> 00:06:49,620
So that is the significant feature of a Single Page Application.

91
00:06:49,620 --> 00:06:54,139
Also, Single Page Applications enable you to deliver a user experience

92
00:06:54,139 --> 00:06:59,435
that is more closer to work they see with desktop applications.

93
00:06:59,435 --> 00:07:02,930
Once the initial web app is downloaded; thereafter,

94
00:07:02,930 --> 00:07:11,475
most other interactions would seem like you are interacting with a desktop application.

95
00:07:11,475 --> 00:07:15,959
So to summarize what we have just learnt, what is a Single Page Application?

96
00:07:15,959 --> 00:07:21,069
A Single Page Application is a web application or a website that fits into a single page.

97
00:07:21,069 --> 00:07:26,670
You don't need to reload the entire page every single time a user interacts

98
00:07:26,670 --> 00:07:28,362
with the application.

99
00:07:28,362 --> 00:07:34,574
The UX is more like a desktop or a native application.

100
00:07:34,574 --> 00:07:37,199
Most of the resources required for your application

101
00:07:37,199 --> 00:07:42,699
are downloaded at the first instance itself, with the first page load.

102
00:07:42,699 --> 00:07:45,720
Thereafter, only parts of the page are redrawn,

103
00:07:45,720 --> 00:07:53,540
based upon how the user interaction happens without requiring a full server round trip,

104
00:07:53,540 --> 00:07:58,889
for fetching all the resources that you need.

105
00:07:58,889 --> 00:08:04,644
Of course, this doesn't come without its own set of issues that need to be addressed.

106
00:08:04,644 --> 00:08:07,740
So when you design Single Page Applications, one of the first things

107
00:08:07,740 --> 00:08:11,609
that people often question about Single Page Applications

108
00:08:11,609 --> 00:08:14,444
is that they are not optimized for search engines.

109
00:08:14,444 --> 00:08:19,225
So search engine optimization is an important part that needs to be addressed.

110
00:08:19,225 --> 00:08:20,579
So if you have search engines

111
00:08:20,579 --> 00:08:24,795
that crawl your website to extract data and index information,

112
00:08:24,795 --> 00:08:28,889
then Single Page Applications may not necessarily be cooperative in this case.

113
00:08:28,889 --> 00:08:33,230
But even search engine optimization with the current data frameworks,

114
00:08:33,230 --> 00:08:40,680
like Angular, have come far down the road that even with Single Page Application,

115
00:08:40,680 --> 00:08:47,940
search engines can essentially index a lot of the information

116
00:08:47,940 --> 00:08:50,621
that your web application serves up.

117
00:08:50,621 --> 00:08:59,009
The second issue to be addressed is how much of the web construction should be offloaded

118
00:08:59,009 --> 00:09:02,750
to the client site as opposed to the server site.

119
00:09:02,750 --> 00:09:07,500
So the server is pretty much acting as a data source in Single Page Applications

120
00:09:07,500 --> 00:09:10,644
and much of the work is offloaded to the client site.

121
00:09:10,644 --> 00:09:11,840
From one perspective,

122
00:09:11,840 --> 00:09:18,782
this gives you much more scalable way of delivering your web application

123
00:09:18,782 --> 00:09:24,037
to your client site, because much of the rendering work is done on the client site.

124
00:09:24,037 --> 00:09:31,649
Now you can optimize this to some extent to offset the initial download

125
00:09:31,649 --> 00:09:34,399
of the web application from the server site

126
00:09:34,399 --> 00:09:37,034
by doing part of the rendering on the server site.

127
00:09:37,034 --> 00:09:40,559
As I mentioned, Angular does provide you with an opportunity

128
00:09:40,559 --> 00:09:45,120
for doing that with partial server site rendering

129
00:09:45,120 --> 00:09:48,889
of your initial view of your application.

130
00:09:48,889 --> 00:09:53,460
The third aspect is how to maintain history so when you click on a back button

131
00:09:53,460 --> 00:09:56,789
or a forward button, where would you take the user to?

132
00:09:56,789 --> 00:09:59,759
Do you save enough information

133
00:09:59,759 --> 00:10:06,083
that you will be able to navigate among the different views of your application and so on?

134
00:10:06,083 --> 00:10:08,985
So that is one thing that you need to keep in mind.

135
00:10:08,985 --> 00:10:16,975
Of course, because the Angular router leverages the html five-page history API,

136
00:10:16,975 --> 00:10:21,649
so it is able to address this issue to a large extent.

137
00:10:21,649 --> 00:10:25,139
The final question that we have is analytics.

138
00:10:25,139 --> 00:10:29,804
How do you support analytics on your web page?

139
00:10:29,804 --> 00:10:33,850
How do you collect the analytics data and so on?

140
00:10:33,850 --> 00:10:39,235
And also, as I have mentioned earlier, speeding up the initial page load

141
00:10:39,235 --> 00:10:44,924
is something that is of concern when you are designing your web application.

142
00:10:44,924 --> 00:10:46,764
Now with Angular, as I said,

143
00:10:46,764 --> 00:10:52,449
doing partial rendering on the server side will speed up the initial page load

144
00:10:52,449 --> 00:10:57,610
on your client site while the rest of the web application

145
00:10:57,610 --> 00:11:00,735
is being downloaded to the client site.

146
00:11:00,735 --> 00:11:07,120
So you can mask a little bit of the initial download time for the web application

147
00:11:07,120 --> 00:11:10,730
by doing partial rendering from the server site itself.

148
00:11:10,730 --> 00:11:13,701
With these basic ideas in mind,

149
00:11:13,701 --> 00:11:19,120
let's now go and explore how Angular supports Single Page Applications.

150
00:11:19,120 --> 00:11:22,450
We have already incorporated the Angular router

151
00:11:22,450 --> 00:11:25,375
into our Angular application in the previous exercise.

152
00:11:25,375 --> 00:11:28,879
In the subsequent exercises in this lesson

153
00:11:28,879 --> 00:11:34,315
and assignment, we will complete the development of the Single Page Application

154
00:11:34,315 --> 00:11:41,139
that we have been working on so far in this course.