1
00:00:02,070 --> 00:00:04,360
In the previous course section,

2
00:00:04,360 --> 00:00:07,130
you learned about building custom APIs

3
00:00:07,130 --> 00:00:09,360
and you also saw an example

4
00:00:09,360 --> 00:00:13,830
where I provided a decoupled front end website to you,

5
00:00:13,830 --> 00:00:15,710
and we connected this website

6
00:00:15,710 --> 00:00:20,710
to this API by sending such JavaScript-driven HTTP requests

7
00:00:21,430 --> 00:00:26,260
from inside the browser with browser-side JavaScript code.

8
00:00:26,260 --> 00:00:28,260
And we learned about cores

9
00:00:28,260 --> 00:00:32,330
and how we do send those requests successfully there.

10
00:00:32,330 --> 00:00:34,900
Now, in that last course section,

11
00:00:34,900 --> 00:00:39,110
I provided this finished front end project to you

12
00:00:39,110 --> 00:00:42,230
because in the end, there is nothing new in there.

13
00:00:42,230 --> 00:00:44,840
It's some basic HTML code,

14
00:00:44,840 --> 00:00:48,580
basic styles and a lot of JavaScript code,

15
00:00:48,580 --> 00:00:50,720
which also doesn't do anything

16
00:00:50,720 --> 00:00:52,853
which we wouldn't have seen before though.

17
00:00:53,710 --> 00:00:56,670
Nonetheless, if you took the time to go

18
00:00:56,670 --> 00:00:58,730
through this JavaScript code,

19
00:00:58,730 --> 00:01:01,070
you will see that it's quite a lot of code

20
00:01:01,070 --> 00:01:03,120
with some complexity

21
00:01:03,120 --> 00:01:05,250
and definitely a couple of things

22
00:01:05,250 --> 00:01:06,760
that you could mess up

23
00:01:06,760 --> 00:01:09,480
for a very simple result in the end.

24
00:01:09,480 --> 00:01:12,260
All we're building is a basic to-dos app

25
00:01:12,260 --> 00:01:15,010
and we needed a lot of code for that.

26
00:01:15,010 --> 00:01:18,670
And if you recall earlier course sections,

27
00:01:18,670 --> 00:01:21,620
you also might remember this tic-tac-toe game,

28
00:01:21,620 --> 00:01:24,170
which was also not too fancy,

29
00:01:24,170 --> 00:01:26,070
nothing too special in there,

30
00:01:26,070 --> 00:01:29,820
and yet we needed to write a lot of JavaScript code

31
00:01:29,820 --> 00:01:33,183
to build this user interface and this game.

32
00:01:34,310 --> 00:01:38,720
And that's a general problem in modern web development.

33
00:01:38,720 --> 00:01:40,300
If you're building websites

34
00:01:40,300 --> 00:01:42,630
that don't have a lot of JavaScript code

35
00:01:42,630 --> 00:01:45,420
in the browser, everything is fine.

36
00:01:45,420 --> 00:01:47,660
But as soon as you start building

37
00:01:47,660 --> 00:01:50,350
more complex user interfaces

38
00:01:50,350 --> 00:01:53,760
where you use browser-side JavaScript code

39
00:01:53,760 --> 00:01:56,810
for changing what's visible on the screen

40
00:01:56,810 --> 00:02:00,690
for handling user input and for many other things as well,

41
00:02:00,690 --> 00:02:02,860
you often end up with a lot of code

42
00:02:02,860 --> 00:02:06,570
and it's, of course, super easy to forget a step there,

43
00:02:06,570 --> 00:02:08,460
to introduce a tiny error,

44
00:02:08,460 --> 00:02:11,400
and it's pretty hard to test this code.

45
00:02:11,400 --> 00:02:13,200
I mean, this is a simple to-do app.

46
00:02:13,200 --> 00:02:17,550
Imagine you're building a complex administration dashboard,

47
00:02:17,550 --> 00:02:21,380
which is entirely powered by front end JavaScript code.

48
00:02:21,380 --> 00:02:24,240
This could quickly become a mess.

49
00:02:24,240 --> 00:02:28,250
And that's where this course section will become important

50
00:02:28,250 --> 00:02:30,270
because in this course section,

51
00:02:30,270 --> 00:02:34,270
I'll introduce you to frontend JavaScript frameworks,

52
00:02:34,270 --> 00:02:37,650
to be precise, frontend JavaScript frameworks

53
00:02:37,650 --> 00:02:39,350
that helps us with building

54
00:02:39,350 --> 00:02:42,890
and managing complex web user interfaces,

55
00:02:42,890 --> 00:02:46,930
which are powered by browser-side JavaScript code

56
00:02:46,930 --> 00:02:50,220
so that we don't have to write all that nitty gritty code

57
00:02:50,220 --> 00:02:53,810
on our own but that we can instead leverage a framework

58
00:02:53,810 --> 00:02:57,623
to have an easier time building such user interfaces.

59
00:02:58,460 --> 00:02:59,710
As a side note,

60
00:02:59,710 --> 00:03:02,597
just as we have an easier time on the backend,

61
00:03:02,597 --> 00:03:06,260
if we use a framework like Express there.

62
00:03:06,260 --> 00:03:07,460
You might recall

63
00:03:07,460 --> 00:03:09,940
that when we started working on the backend,

64
00:03:09,940 --> 00:03:13,330
we started with just NodeJS.

65
00:03:13,330 --> 00:03:17,680
Just NodeJS, no extra framework or package.

66
00:03:17,680 --> 00:03:21,710
And there we then had to handle request parsing

67
00:03:21,710 --> 00:03:23,480
and finding out what the path

68
00:03:23,480 --> 00:03:26,940
or method of a request is on our own.

69
00:03:26,940 --> 00:03:29,640
As soon as we added Express.js,

70
00:03:29,640 --> 00:03:33,800
which is a backend JavaScript framework for NodeJS,

71
00:03:33,800 --> 00:03:35,610
this became much easier

72
00:03:35,610 --> 00:03:38,400
because Express.js helps us with the routing,

73
00:03:38,400 --> 00:03:42,080
with handling requests, with parsing request bodies

74
00:03:42,080 --> 00:03:44,750
and sending back responses.

75
00:03:44,750 --> 00:03:47,830
And it'll be the same idea in this course section

76
00:03:47,830 --> 00:03:51,960
where we will now dive into front end JavaScript frameworks

77
00:03:51,960 --> 00:03:54,970
that help us with building user interfaces.

78
00:03:54,970 --> 00:03:56,760
Now, therefore, in this course section,

79
00:03:56,760 --> 00:03:59,860
we basically already answered the why

80
00:03:59,860 --> 00:04:01,340
but I'll come back to what

81
00:04:01,340 --> 00:04:03,526
and which frameworks we have there.

82
00:04:03,526 --> 00:04:07,220
I'll then introduce you to the most important frameworks,

83
00:04:07,220 --> 00:04:09,340
Vue, React and Angular,

84
00:04:09,340 --> 00:04:11,990
and then throughout this course section,

85
00:04:11,990 --> 00:04:15,160
we're going to dive into the basics of Vue.js

86
00:04:15,160 --> 00:04:17,120
so that we can use this framework,

87
00:04:17,120 --> 00:04:18,899
which is one of the most popular

88
00:04:18,899 --> 00:04:21,200
front end user interface frameworks

89
00:04:21,200 --> 00:04:25,393
to build a JavaScript-driven interface with ease.