1
00:00:00,000 --> 00:00:04,322
[MUSIC]

2
00:00:04,322 --> 00:00:09,700
Before we get started examining Angular
in more detail, let's ask ourselves

3
00:00:09,700 --> 00:00:14,681
the fundamental question,
why do we need this JavaScript frameworks?

4
00:00:14,681 --> 00:00:18,348
What exactly are they,
and what do they help us

5
00:00:18,348 --> 00:00:23,160
accomplish that we cannot do
by using Standard JavaScript?

6
00:00:24,330 --> 00:00:28,610
Let's examine some of these questions
in a little bit detail in this lecture.

7
00:00:30,690 --> 00:00:33,950
First, why JavaScript frameworks?

8
00:00:33,950 --> 00:00:38,470
Obviously, from your prior
experience with JavaScript and

9
00:00:38,470 --> 00:00:44,440
also perhaps experience with web UI
based frameworks like Bootstrap and

10
00:00:44,440 --> 00:00:48,780
the use of jQuery, you more or
less figured that you can

11
00:00:48,780 --> 00:00:53,800
get most of the things that you want
to done on a website accomplished,

12
00:00:53,800 --> 00:00:57,560
using all these tools and
techniques that you already have on hand.

13
00:00:58,700 --> 00:01:03,940
Indeed, many successful websites
can be implemented by using

14
00:01:03,940 --> 00:01:07,980
these simple techniques and tools.

15
00:01:07,980 --> 00:01:12,840
But as the complexity of
your application grows,

16
00:01:12,840 --> 00:01:19,010
the amount of DOM manipulation that
needs to be done and the amount of

17
00:01:19,010 --> 00:01:23,950
data updates that need to handled manually
becomes significantly complicated.

18
00:01:25,770 --> 00:01:30,770
The simple approaches like
using the jQuery Library may

19
00:01:30,770 --> 00:01:36,200
not sufficiently address
the needs that you have on hand.

20
00:01:36,200 --> 00:01:41,160
This is where the availability
of well structured frameworks

21
00:01:41,160 --> 00:01:45,380
like Angular which rely on standard,

22
00:01:46,610 --> 00:01:51,820
software engineering paradigms or software
engineering patterns like the model view

23
00:01:51,820 --> 00:01:57,820
controller or the model view view model or
the model view whatever, helps us to

24
00:01:57,820 --> 00:02:03,430
implement these web applications
effectively and scalably.

25
00:02:03,430 --> 00:02:07,440
Now in this context, we're going to could
talk about this in a little more detail

26
00:02:07,440 --> 00:02:09,430
as we go along in this course.

27
00:02:09,430 --> 00:02:14,870
We'll also talk about how we
bind the model to a view and

28
00:02:14,870 --> 00:02:19,550
the use of controllers and the view
models to accomplish these things.

29
00:02:19,550 --> 00:02:24,320
Will be discussed in a little more detail
as we examine Angular in this course.

30
00:02:25,500 --> 00:02:30,900
Let me quickly remind you of
what a software library is,

31
00:02:30,900 --> 00:02:35,240
a software library is a collection
of implementations of

32
00:02:35,240 --> 00:02:40,070
behaviors that you repeatedly
use within your applications.

33
00:02:40,070 --> 00:02:44,775
So these behaviors can be implemented
by using functions with well-defined

34
00:02:44,775 --> 00:02:45,643
interfaces so

35
00:02:45,643 --> 00:02:51,480
that making use of them in implementing
your application becomes straightforward.

36
00:02:51,480 --> 00:02:56,610
If you have done programming in
any language, you would often

37
00:02:56,610 --> 00:03:01,780
see that many of the standard
functionality that is supported

38
00:03:01,780 --> 00:03:07,038
in these languages are implemented
through libraries that you make use of.

39
00:03:07,038 --> 00:03:11,775
For example, the input output
libraries and perhaps even

40
00:03:11,775 --> 00:03:17,875
the GUI libraries that many standard
programming languages support.

41
00:03:17,875 --> 00:03:22,377
This is where the concept of
reuse of behavior is very,

42
00:03:22,377 --> 00:03:27,847
very effective because we are able to
implement it once in a library and

43
00:03:27,847 --> 00:03:33,847
then reuse that behavior wherever we
need within our software application.

44
00:03:33,847 --> 00:03:40,477
This also brings in modularity to
the way our application is implemented.

45
00:03:40,477 --> 00:03:46,500
A good example of a software library
that is used in the web world is jQuery.

46
00:03:47,540 --> 00:03:50,150
If you had taken the previous
Bootstrap course,

47
00:03:50,150 --> 00:03:55,130
you would have seen some elements
of jQuery in that course.

48
00:03:55,130 --> 00:03:56,360
In this context,

49
00:03:56,360 --> 00:04:02,720
let me also differentiate a software
library from a software framework.

50
00:04:02,720 --> 00:04:05,980
A software framework is an abstraction

51
00:04:05,980 --> 00:04:10,770
in which the software provides
such generic functionality and

52
00:04:10,770 --> 00:04:15,960
then provides you with the ability of
customizing that functionality for

53
00:04:15,960 --> 00:04:19,550
implementing the solutions for
your specific application.

54
00:04:19,550 --> 00:04:25,200
So you will augment the software
framework with your own code

55
00:04:25,200 --> 00:04:29,490
in order to accomplish whatever
that you are trying to accomplish.

56
00:04:29,490 --> 00:04:33,540
So this is a different way
of thinking about how you

57
00:04:33,540 --> 00:04:38,180
attempt to solve the problem as
opposed to using a software library.

58
00:04:38,180 --> 00:04:45,190
Now, this software framework provides
a universal, reusable environment

59
00:04:45,190 --> 00:04:52,090
with certain functionality that is
part of a larger software platform.

60
00:04:52,090 --> 00:04:57,770
We'll look at Angular as an example of
how this is accomplished in more detail.

61
00:04:57,770 --> 00:05:02,100
There are several other such software
frameworks that are used in the web world

62
00:05:02,100 --> 00:05:06,400
including Ember, Backbone,
and many others.

63
00:05:06,400 --> 00:05:10,380
Now here,
you might obviously think of the question.

64
00:05:10,380 --> 00:05:13,670
How do you distinguish
a library from a framework?

65
00:05:13,670 --> 00:05:17,070
What are the salient
characteristics of each and

66
00:05:17,070 --> 00:05:22,070
why would you classify one as a library
and another one as a framework?

67
00:05:22,070 --> 00:05:25,040
Where do you draw
the distinction between the two?

68
00:05:25,040 --> 00:05:26,687
Now this I should say,

69
00:05:26,687 --> 00:05:31,033
there is a fine line separating
a library from a framework.

70
00:05:31,033 --> 00:05:34,883
Depending on how you approach this,
you may view one or

71
00:05:34,883 --> 00:05:38,480
the other as either a library,
or a framework, and

72
00:05:38,480 --> 00:05:43,000
depending on who you ask,
some people may classify a particular

73
00:05:43,000 --> 00:05:47,796
approach as a library approach as
opposed to a framework approach.

74
00:05:47,796 --> 00:05:52,258
Again, let's not split our
hairs about trying to exactly

75
00:05:52,258 --> 00:05:56,300
classify things into a library or
a framework.

76
00:05:56,300 --> 00:06:00,330
From our perspective,
if something helps us accomplish our task,

77
00:06:00,330 --> 00:06:03,670
then we are satisfied with that approach.

78
00:06:03,670 --> 00:06:08,570
Again, having said that,
let's distinguish between a library and

79
00:06:08,570 --> 00:06:10,400
a framework in a bit more detail.

80
00:06:10,400 --> 00:06:13,510
In order to understand how you approach

81
00:06:13,510 --> 00:06:17,680
that entire way of
writing your application.

82
00:06:17,680 --> 00:06:22,300
When you use a library as
opposed to using a framework.

83
00:06:23,820 --> 00:06:28,250
So in this context the following
definition that I have borrowed

84
00:06:28,250 --> 00:06:33,520
from AngularJS documentation sort of,
I feel

85
00:06:33,520 --> 00:06:38,800
gives a bit more clearer distinction
between a library and a framework.

86
00:06:38,800 --> 00:06:44,720
So, this definition says that
a library is a collection of functions

87
00:06:44,720 --> 00:06:50,740
which are useful for writing web
applications, jQuery being an example.

88
00:06:50,740 --> 00:06:54,270
So this is a set of functions
that are available to you.

89
00:06:54,270 --> 00:06:59,380
You make use of this functions
when you implement your software

90
00:06:59,380 --> 00:07:01,710
solution to your problem.

91
00:07:03,150 --> 00:07:08,370
When you use this approach, it is you
the programmer that is always in control

92
00:07:08,370 --> 00:07:13,340
of how you leverage
the functions that are provided

93
00:07:13,340 --> 00:07:17,290
by the library to accomplish
whatever that you are trying to do.

94
00:07:18,630 --> 00:07:23,540
A framework on the other hand
is a specific implementation or

95
00:07:23,540 --> 00:07:27,047
particular implementation
of a web application,

96
00:07:27,047 --> 00:07:31,650
where the framework itself gives
a broad generic structure for

97
00:07:31,650 --> 00:07:35,470
your application and
then you are asked to fill in the details.

98
00:07:36,570 --> 00:07:41,680
The details that are necessary
to customize that application

99
00:07:41,680 --> 00:07:46,030
to solve the specific problem
that you're trying to address.

100
00:07:46,030 --> 00:07:52,040
So here, the framework takes complete
control over how this applications run and

101
00:07:52,040 --> 00:08:00,870
then it'll call in to your user supplied
code that helps it to get the work done.

102
00:08:00,870 --> 00:08:04,620
The app specific code is
something that you will write and

103
00:08:04,620 --> 00:08:09,830
supply it and that'll becomes
part of the entire application,

104
00:08:09,830 --> 00:08:14,510
together with the framework, and
it helps to accomplish your task.

105
00:08:14,510 --> 00:08:17,861
Again, this may not completely,
clearly enable you to

106
00:08:17,861 --> 00:08:21,722
understand the distinction between
a framework and a library.

107
00:08:21,722 --> 00:08:23,155
Let's again, as I said,

108
00:08:23,155 --> 00:08:26,878
let's not spread our hairs trying
to figure out all these details.

109
00:08:26,878 --> 00:08:31,815
What we need to understand is Angular
is an example of a framework and

110
00:08:31,815 --> 00:08:37,187
when you write applications in Angular,
the framework takes control and

111
00:08:37,187 --> 00:08:42,212
you basically supply the missing
pieces of the code that are required

112
00:08:42,212 --> 00:08:47,610
to customize the framework to implement
your specific web application.

113
00:08:49,070 --> 00:08:52,440
Examining the word framework
in a bit more detail.

114
00:08:52,440 --> 00:08:58,000
When we talk about a framework, one of the
important aspects about how a framework

115
00:08:58,000 --> 00:09:04,040
operates is summarized by this term
called as the Hollywood Principle.

116
00:09:04,040 --> 00:09:06,600
What exactly do I mean by
the Hollywood Principle?

117
00:09:06,600 --> 00:09:11,870
Now, if you sort of know how a Hollywood
agent works, when an actor or

118
00:09:11,870 --> 00:09:17,100
an actress wants to
find work in Hollywood,

119
00:09:17,100 --> 00:09:21,550
they would approach an agent and
the agent usually will tell you,

120
00:09:21,550 --> 00:09:25,150
we'll call you back when
we have some work for you.

121
00:09:25,150 --> 00:09:27,400
Don’t call us, we'll call you back.

122
00:09:27,400 --> 00:09:30,860
So, essentially a framework is
reflecting the same kind of principle.

123
00:09:30,860 --> 00:09:35,440
The framework says,
you supply whatever you can do and

124
00:09:35,440 --> 00:09:41,000
the framework will call your supplied
code whenever it needs to do something.

125
00:09:42,470 --> 00:09:48,442
That's the reason why we use this term
Hollywood Principle in the software world.

126
00:09:49,540 --> 00:09:54,575
This can also be summarized
by using this other

127
00:09:54,575 --> 00:09:57,685
expression called Inversion of Control.

128
00:09:57,685 --> 00:10:01,715
When you use a library, you,
the programmer is in control, and

129
00:10:01,715 --> 00:10:07,435
you dictate how the code functions and
how the code executes.

130
00:10:08,752 --> 00:10:10,092
When you use a framework,

131
00:10:10,092 --> 00:10:14,712
you are essentially surrendering
your privilege to the framework and

132
00:10:14,712 --> 00:10:21,360
lets that framework take charge and
then dictate how the application is run.

133
00:10:21,360 --> 00:10:28,000
Now while you may seem that this is
like surrendering your independence,

134
00:10:28,000 --> 00:10:32,920
certainly that is not the case, if
framework has a certain reason for taking

135
00:10:32,920 --> 00:10:40,040
up the responsibility of accomplishing
whatever it needs to do on your behalf.

136
00:10:40,040 --> 00:10:45,050
So this is a place where we
would make a distinction between

137
00:10:45,050 --> 00:10:47,750
two approaches to writing programs.

138
00:10:47,750 --> 00:10:51,320
One called as the imperative
way of writing programs, and

139
00:10:51,320 --> 00:10:54,910
the second one called as a declarative
way of writing programs.

140
00:10:54,910 --> 00:10:57,550
If you have done any
programming languages course,

141
00:10:57,550 --> 00:11:01,780
you'll have seen that programming
languages are usually using one or

142
00:11:01,780 --> 00:11:08,380
the other approach that this
support in writing programs.

143
00:11:08,380 --> 00:11:10,120
In imperative programming,

144
00:11:10,120 --> 00:11:15,480
you are going to specify the of program
functions in a step by step manner.

145
00:11:15,480 --> 00:11:18,020
So you are completely and control and

146
00:11:18,020 --> 00:11:22,830
then you are essentially saying, this is
how you have to accomplished the task and

147
00:11:22,830 --> 00:11:27,190
then you'll write down step by step
way of accomplishing the task.

148
00:11:27,190 --> 00:11:32,520
So you as a programmer is completely
in control in specifying exact steps

149
00:11:32,520 --> 00:11:33,720
to solve the problem.

150
00:11:34,750 --> 00:11:37,550
In declarative programming
on the other hand,

151
00:11:37,550 --> 00:11:42,210
which is effectively used
by frameworks like Angular.

152
00:11:42,210 --> 00:11:47,560
You are essentially saying this is
what I want to get accomplished, and

153
00:11:47,560 --> 00:11:52,130
this is how I customized what
specifically I want to get accomplished.

154
00:11:52,130 --> 00:11:55,420
How it is done is not of concern to me.

155
00:11:55,420 --> 00:11:59,580
But I will hand over that
responsibility to the framework.

156
00:11:59,580 --> 00:12:04,239
So, essentially, you're supplying your
user supply code to the framework and

157
00:12:04,239 --> 00:12:09,470
saying, now this is what I want you to do,
you take charge and make this happen.

158
00:12:09,470 --> 00:12:13,920
So that way in declarative programming,
you're only declaring what is your

159
00:12:13,920 --> 00:12:18,379
intention and let the framework decide
how that is going to be accomplished.

160
00:12:18,379 --> 00:12:24,675
Two different ways of thinking about
how you approach solving your problem.

161
00:12:24,675 --> 00:12:29,268
This is something that you have to
get your head around when you learn

162
00:12:29,268 --> 00:12:34,346
Angular because if you are coming from
the imperative programming world,

163
00:12:34,346 --> 00:12:38,214
your general tendency would
be to control everything and

164
00:12:38,214 --> 00:12:42,188
dictate step by step how
you want to accomplish.

165
00:12:42,188 --> 00:12:47,370
So it takes some time to wrap your
head around this concept that you

166
00:12:47,370 --> 00:12:49,570
don't necessarily control every step.

167
00:12:49,570 --> 00:12:54,550
Instead, you tell the framework what
you want to become, to be accomplished.

168
00:12:54,550 --> 00:12:59,120
And give the responsibility to
the framework to accomplish

169
00:12:59,120 --> 00:13:01,640
the task on your behalf.

170
00:13:01,640 --> 00:13:07,880
Again, don't worry too much about it, and
don't read too much into this definitions.

171
00:13:07,880 --> 00:13:13,640
These are from an academic interest,
these are base of identifying different

172
00:13:13,640 --> 00:13:19,080
patterns of behaviors from the perspective
of a web application developer.

173
00:13:19,080 --> 00:13:21,890
All you care about is
how you get your work

174
00:13:21,890 --> 00:13:27,398
done using Angular as the web
application framework.

175
00:13:27,398 --> 00:13:30,370
Coming to the JavaScript frameworks world,

176
00:13:30,370 --> 00:13:35,140
you will hear a lot of terms being
used with JavaScript frameworks.

177
00:13:35,140 --> 00:13:39,134
You'll often hear people talking
about something called single pPage

178
00:13:39,134 --> 00:13:45,110
application or a allied term
called rich internet application.

179
00:13:45,110 --> 00:13:48,980
Again, we will examine what
this means in one of the later

180
00:13:50,030 --> 00:13:54,570
lessons in this course in
the context of Angular.

181
00:13:54,570 --> 00:13:58,685
Similarly, you will also hear people
talking about Model-View-Controller,

182
00:13:58,685 --> 00:14:01,920
Model-View-ViewModel, Model-View-Whatever,
and so on.

183
00:14:02,930 --> 00:14:07,550
Again, this is as I said,
a software architecture paradigm

184
00:14:07,550 --> 00:14:11,950
that we use for
developing software applications.

185
00:14:11,950 --> 00:14:16,190
We'll talk a little bit more detail
about this in the context of Angular,

186
00:14:16,190 --> 00:14:18,540
in one of the later lessons.

187
00:14:18,540 --> 00:14:23,945
And in this context, you would hear
in Angular, things like data binding,

188
00:14:23,945 --> 00:14:28,605
routing, one way and
two way data binding, and so on.

189
00:14:28,605 --> 00:14:34,170
Again, don't be thrown
off by all these terms.

190
00:14:34,170 --> 00:14:39,000
We will understand them as
we go along in this course.

191
00:14:39,000 --> 00:14:43,370
Similarly, you will often
hear about scalable,

192
00:14:43,370 --> 00:14:47,120
reusable, maintainable JavaScript code,
and so on.

193
00:14:47,120 --> 00:14:50,180
These are wonderful concepts or

194
00:14:50,180 --> 00:14:55,960
wonderful attributes that we want
to achieve with our application.

195
00:14:55,960 --> 00:15:02,650
We will see how Angular helps us to
do this in this particular course.

196
00:15:02,650 --> 00:15:06,760
And another term that you will
often hear people talking about is

197
00:15:06,760 --> 00:15:08,040
test driven development.

198
00:15:09,310 --> 00:15:13,880
Angular indeed support test driven
development, so even before you develop

199
00:15:13,880 --> 00:15:19,740
your application you will write the test
in order to ensure that the code

200
00:15:19,740 --> 00:15:24,040
that you implement actually accomplishes
what you're trying to accomplish.

201
00:15:24,040 --> 00:15:28,480
We will examine a little bit of test
driven development towards the later part

202
00:15:28,480 --> 00:15:30,250
of this course.

203
00:15:30,250 --> 00:15:35,080
Although, if you want to adopt this
test driven development approach for

204
00:15:35,080 --> 00:15:38,050
implementing applications,
that is a wonderful approach.

205
00:15:38,050 --> 00:15:41,232
But before we go to that point,
it is better for

206
00:15:41,232 --> 00:15:45,890
us to understand what the framework
itself helps us accomplished.

207
00:15:45,890 --> 00:15:50,680
So, in this course, I will briefly
deal with test driven development.

208
00:15:50,680 --> 00:15:55,725
But if you were implementing a real
Angular application, you would adopt

209
00:15:55,725 --> 00:16:01,335
a test driven development approach for
developing Angular applications.

210
00:16:02,565 --> 00:16:09,245
There are many, many JavaScript frameworks
that are available out in the real world.

211
00:16:09,245 --> 00:16:11,645
Angular being a start.

212
00:16:11,645 --> 00:16:14,115
Angular in its earlier incarnation

213
00:16:14,115 --> 00:16:19,170
as AngularJS has been one of the most
popular JavaScript frameworks.

214
00:16:19,170 --> 00:16:22,510
We'll look at Angular in
more detail as we go along.

215
00:16:22,510 --> 00:16:27,060
Similarly, if you look at
the JavaScript frameworks world,

216
00:16:27,060 --> 00:16:32,160
you will hear people talk about Ember,
Backbone, React.

217
00:16:32,160 --> 00:16:37,870
Although, some people classify React
as a library rather than a framework.

218
00:16:37,870 --> 00:16:40,130
Again, depending on who you asks,

219
00:16:40,130 --> 00:16:45,770
some people may say it is a framework and
some people may say it is just a library.

220
00:16:45,770 --> 00:16:50,960
Again, let's not worry too much about
what it is but it is available for

221
00:16:50,960 --> 00:16:55,898
us as an approach for
implementing complex web applications.

222
00:16:55,898 --> 00:17:02,880
Similarly, other smaller frameworks
like Aurelia, Meteor, Polymer,

223
00:17:02,880 --> 00:17:09,818
Google's Polymer which is an upcoming
framework, Knockout, Vue and many others.

224
00:17:09,818 --> 00:17:13,650
And there are more and
more being added to this every single day.

225
00:17:13,650 --> 00:17:17,320
What is the JavaScript
framework flavor of today?

226
00:17:17,320 --> 00:17:17,820
Angular.

227
00:17:18,880 --> 00:17:25,710
It just got out of the development
phase and out in to the real world.

228
00:17:25,710 --> 00:17:31,760
And people are scrambling to
develop applications using Angular.

229
00:17:31,760 --> 00:17:35,910
So that's why we are interested in
Angular in this particular course.

230
00:17:35,910 --> 00:17:38,450
Now once you learn one of them,

231
00:17:38,450 --> 00:17:42,860
you would begin to understand the gentle
approach that this frameworks use.

232
00:17:42,860 --> 00:17:47,172
You maybe able to pick up other
frameworks similarly using

233
00:17:47,172 --> 00:17:51,930
the general concepts that you
learn in this particular course.

234
00:17:51,930 --> 00:17:55,249
[MUSIC]