1
00:00:02,190 --> 00:00:06,510
So let's start with what exactly a framework is. Now

2
00:00:06,630 --> 00:00:08,210
I'll be very honest here,

3
00:00:08,280 --> 00:00:14,790
you can fight a religious war over this and there are people out there to whom it's very important to

4
00:00:14,790 --> 00:00:18,900
differentiate what a library is and what a framework is,

5
00:00:18,900 --> 00:00:25,140
I'm not one of them. Still I'll give you the common differentiation and explain why we differentiate it

6
00:00:25,200 --> 00:00:28,020
or why that is so important to some people.

7
00:00:28,170 --> 00:00:33,270
So we get Javascript libraries and frameworks and a Javascript library in the end is a third-party package,

8
00:00:33,450 --> 00:00:34,350
doesn't have to be,

9
00:00:34,410 --> 00:00:38,310
you could also write it yourself and and just share it across multiple projects

10
00:00:38,310 --> 00:00:44,370
but in the end it's a package which you bring into your project that adds certain functionalities. JQuery

11
00:00:44,390 --> 00:00:51,690
helps us with querying the DOM, Lodash added a couple of utility functions and axios helps us with

12
00:00:51,690 --> 00:00:53,430
sending HttpRequests.

13
00:00:53,880 --> 00:01:00,290
So libraries typically are focused on one or a few core tasks and they help you with that,

14
00:01:00,300 --> 00:01:02,550
so I already named these examples.

15
00:01:02,820 --> 00:01:07,320
Now frameworks on the other hand also are third-party packages,

16
00:01:07,320 --> 00:01:14,280
they also add functionalities but typically they add more functionalities, also from different areas and

17
00:01:14,670 --> 00:01:21,720
they typically also give you certain rules or certain structure on how you should build your Javascript

18
00:01:21,750 --> 00:01:26,580
driven application and therefore they force you into a certain rule set

19
00:01:26,580 --> 00:01:32,730
but at the same time by doing that, they often make it easier for you to build an application and make

20
00:01:32,730 --> 00:01:40,500
it easier for you to focus on your core business logic and spend less time on all the nitty-gritty details.

21
00:01:41,430 --> 00:01:46,050
So they typically provide a complete structure for building Javascript applications

22
00:01:46,050 --> 00:01:52,860
and the big examples we got there, not the only ones but the big examples we got are Angular, Vue.js

23
00:01:52,980 --> 00:01:58,620
and React.js, though as I mentioned React.js is kind of an edge case, it's actually a library but

24
00:01:58,620 --> 00:02:05,520
a pretty big one with a bunch of different features built in and it spawned a huge ecosystem that effectively

25
00:02:05,550 --> 00:02:07,290
together forms a framework

26
00:02:07,290 --> 00:02:10,910
you could say. So let's have a look at these three here.

27
00:02:11,040 --> 00:02:18,630
We got Angular, we got React and got Vue.js, all these libraries here or all these things here are Javascript

28
00:02:18,840 --> 00:02:24,590
libraries or frameworks, React is called a library and Vue.js and Angular would be called frameworks

29
00:02:24,600 --> 00:02:30,660
and as I mentioned, to some people that's really important, that help us with building Javascript projects.

30
00:02:30,720 --> 00:02:35,730
Now it's important to realize that you will still be working with Javascript and you can do the things

31
00:02:35,730 --> 00:02:38,780
with Javascript that you learned about in this course

32
00:02:38,910 --> 00:02:46,560
but these frameworks and libraries will help you do that, will allow you to focus on your business logic

33
00:02:46,560 --> 00:02:49,500
and spend less time on the details,

34
00:02:49,560 --> 00:02:54,430
for example when you typically need to select a button and add an event listener and so on,

35
00:02:54,510 --> 00:03:00,150
these frameworks take such work away from you by giving you a totally different way of thinking about

36
00:03:00,150 --> 00:03:01,300
your project.

37
00:03:01,340 --> 00:03:03,840
Now these are not the only Javascript frameworks we have,

38
00:03:03,840 --> 00:03:09,600
they are particularly useful for building powerful user interfaces but we've also got other frameworks

39
00:03:09,600 --> 00:03:12,810
that would help us with building online shops and so on and

40
00:03:12,810 --> 00:03:15,930
we also got not just frameworks for the frontend,

41
00:03:15,960 --> 00:03:21,570
so for the code that runs in the browser, we also got frameworks that run on the server side if we use

42
00:03:21,570 --> 00:03:27,720
Javascript there, for example for Node.js which we'll have a look at later in a separate module,

43
00:03:27,720 --> 00:03:33,880
there would be a framework called Express.js but we'll focus on that later when we talk about Node.js,

44
00:03:33,900 --> 00:03:38,280
for now let's stick to these client side, browser side frameworks here.

45
00:03:38,280 --> 00:03:45,210
Now if we quickly have a look at them, then Angular for example introduces a new language or uses a new

46
00:03:45,210 --> 00:03:51,510
language, Typescript, which actually builds up on Javascript and which as part of your development build

47
00:03:51,510 --> 00:03:54,510
process is compiled to Javascript.

48
00:03:54,570 --> 00:04:00,660
It's a bit like using next generation Javascript with Babel, just with even more features which don't

49
00:04:00,660 --> 00:04:03,970
even exist in the next Javascript generation.

50
00:04:03,990 --> 00:04:09,970
Now Typescript is a standalone project detached from Angular but Angular heavily uses it,

51
00:04:10,140 --> 00:04:15,140
if you want to learn more about Angular and Typescript, I got dedicated courses on that.

52
00:04:15,150 --> 00:04:18,600
Angular is extremely popular and it's a huge framework,

53
00:04:18,600 --> 00:04:20,310
it contains a lots of features,

54
00:04:20,400 --> 00:04:26,310
it contains features for rendering beautiful user interfaces, for animating stuff, for validating user

55
00:04:26,310 --> 00:04:27,130
input,

56
00:04:27,180 --> 00:04:33,030
it contains everything built into the framework for sending HttpRequests so that you don't need axios

57
00:04:33,390 --> 00:04:35,360
and much more.

58
00:04:35,610 --> 00:04:42,420
Now React is also a framework or a pretty rich library if you want to call it like this and it uses

59
00:04:42,480 --> 00:04:46,720
enhanced Javascript syntax as I like to call it here.

60
00:04:46,830 --> 00:04:54,210
It uses a feature which is called jsx and this allows you to add a certain syntax to your Javascript

61
00:04:54,210 --> 00:05:00,240
files which is not supported in vanilla Javascript, which you wouldn't run like this in the browser but

62
00:05:00,240 --> 00:05:07,090
which, just like Typescript, is compiled to regular Javascript instructions as part of your development

63
00:05:07,090 --> 00:05:13,510
process and you'll see that jsx thing in action later in the React example, it in the end helps us

64
00:05:13,510 --> 00:05:20,470
with building rich user interfaces with the help of React without having to write all the create element

65
00:05:20,530 --> 00:05:23,960
and append and remove child instructions on our own

66
00:05:24,100 --> 00:05:30,760
and that's by the way a general idea of all these frameworks, they take away the need for us to manually

67
00:05:30,850 --> 00:05:37,060
add elements to the DOM and remove them and so on and instead all these frameworks give us a way of defining

68
00:05:37,060 --> 00:05:38,640
the result we want to have,

69
00:05:38,740 --> 00:05:44,680
defining certain conditions when that result should change and then the frameworks will take care that

70
00:05:44,680 --> 00:05:49,510
changes are applied to the page the user sees when our conditions change

71
00:05:49,540 --> 00:05:55,860
but again you will see that in practice at the example of React a little bit later in this module.

72
00:05:56,050 --> 00:06:03,580
Now React itself is a library but it spawned a huge ecosystem which adds certain features around React

73
00:06:03,610 --> 00:06:10,070
so that even though React in its core is much leaner than Angular, it has no built in validation, no HTTP

74
00:06:10,170 --> 00:06:10,990
support,

75
00:06:10,990 --> 00:06:15,910
even without that we get a couple of other packages that we typically combine with React so that we

76
00:06:15,910 --> 00:06:20,930
can add such functionality and just like Angular, it's extremely popular.

77
00:06:21,050 --> 00:06:28,030
Well and the third big framework you have in Javascript land is Vue.js. It uses regular Javascript, you

78
00:06:28,030 --> 00:06:34,030
can use it with Typescript but you don't have to, for Angular you basically have to use Typescript and

79
00:06:34,270 --> 00:06:37,860
the good thing about Vue.js is of the three frameworks,

80
00:06:37,900 --> 00:06:39,250
it's the easiest to learn

81
00:06:39,250 --> 00:06:40,840
I'd argue. It's also popular,

82
00:06:40,840 --> 00:06:47,380
not quite as popular as the other two but still very popular and it, just like Angular, contains all important

83
00:06:47,380 --> 00:06:53,880
features. Angular ships even more than Vue.js, Angular has even more built-in features than Vue.js

84
00:06:54,160 --> 00:06:59,170
but Vue.js has more built-in features than React. So unlike React, you don't need to combine it with

85
00:06:59,200 --> 00:07:04,630
other libraries to get everything you need to build powerful applications, Vue.js got all that built

86
00:07:04,630 --> 00:07:05,250
in.

87
00:07:05,260 --> 00:07:06,990
Now that's the rough comparison,

88
00:07:07,000 --> 00:07:08,260
all three are great,

89
00:07:08,290 --> 00:07:12,970
I got courses on each of them so if you want to learn more about React, want to learn more about Vue

90
00:07:12,970 --> 00:07:19,690
or Angular, take my dedicated courses of course, I'd be more than happy to welcome you there and in addition,

91
00:07:20,200 --> 00:07:25,570
I also attached a link to a more detailed comparison which I created in case you want to find out which

92
00:07:25,570 --> 00:07:26,650
one is best for you.

93
00:07:27,520 --> 00:07:33,100
Now with that however, let's take a closer look at React and understand what that does for us.