1
00:00:02,020 --> 00:00:05,260
Now, why do we need Frontend UI Frameworks?

2
00:00:05,260 --> 00:00:07,600
I answered it in the last lecture already,

3
00:00:07,600 --> 00:00:09,720
I just wanna summarize it here.

4
00:00:09,720 --> 00:00:12,205
Building complex frontend interfaces,

5
00:00:12,205 --> 00:00:16,270
which are powered by a browser side to JavaScript code,

6
00:00:16,270 --> 00:00:19,490
since it's stat code that allows us to change

7
00:00:19,490 --> 00:00:21,120
and manipulate the DOM,

8
00:00:21,120 --> 00:00:25,050
can become very difficult error-prone and cumbersome

9
00:00:25,050 --> 00:00:28,390
as your interface becomes more complex.

10
00:00:28,390 --> 00:00:30,400
Now, the reasons for that in the end are

11
00:00:30,400 --> 00:00:33,970
that you have to select and store all the DOM elements

12
00:00:33,970 --> 00:00:37,080
with which you want to interact, like for example here

13
00:00:37,080 --> 00:00:39,880
in the example from the last course section

14
00:00:39,880 --> 00:00:43,610
where I need to get access to my forum and the to-do list,

15
00:00:43,610 --> 00:00:45,710
and then in various functions,

16
00:00:45,710 --> 00:00:48,920
I also have to get access to other elements,

17
00:00:48,920 --> 00:00:51,580
like for example here in deleteTodo

18
00:00:51,580 --> 00:00:54,300
where I get access to the button that was clicked

19
00:00:54,300 --> 00:00:56,900
so that I can then get access to the list item

20
00:00:56,900 --> 00:00:58,440
that contains the button.

21
00:00:58,440 --> 00:01:00,510
This is all very cumbersome,

22
00:01:00,510 --> 00:01:04,870
and we always have to look at the HTML code to find out

23
00:01:04,870 --> 00:01:08,360
that if we want to get hold of a certain element,

24
00:01:08,360 --> 00:01:10,430
which ID it has and so on.

25
00:01:10,430 --> 00:01:12,980
So that is all pretty annoying.

26
00:01:12,980 --> 00:01:16,930
And it's not even all because as soon as we got hold of

27
00:01:16,930 --> 00:01:19,683
certain elements and we fixed this problem,

28
00:01:19,683 --> 00:01:23,390
we now often want to add event listeners,

29
00:01:23,390 --> 00:01:25,830
or we want to store some data,

30
00:01:25,830 --> 00:01:27,750
which we need in different parts

31
00:01:27,750 --> 00:01:30,720
of our front end user interface.

32
00:01:30,720 --> 00:01:31,960
For example, in this code,

33
00:01:31,960 --> 00:01:34,950
of course we add event listeners here at the bottom

34
00:01:34,950 --> 00:01:37,550
or one event listener to be precise,

35
00:01:37,550 --> 00:01:41,300
but I also then add event listeners to the buttons of a new

36
00:01:41,300 --> 00:01:45,260
list item element, as I create those buttons.

37
00:01:45,260 --> 00:01:47,280
And I do need to manage data,

38
00:01:47,280 --> 00:01:50,510
which is needed in different parts of this interface.

39
00:01:50,510 --> 00:01:55,160
I store my edited to do element as soon as we start editing.

40
00:01:55,160 --> 00:01:58,040
So as soon as we clicked the edit button,

41
00:01:58,040 --> 00:02:01,760
because I need this edited to do element in different other

42
00:02:01,760 --> 00:02:05,090
functions, because it's this edited to do element,

43
00:02:05,090 --> 00:02:09,752
which has to do ID stored with such a data dash attribute.

44
00:02:10,650 --> 00:02:13,304
And whilst we can use these data dash attributes,

45
00:02:13,304 --> 00:02:16,410
we again have to remember that we add them

46
00:02:16,410 --> 00:02:18,430
to the elements in the first place.

47
00:02:18,430 --> 00:02:21,520
We have to remember their names and we have to manage them

48
00:02:21,520 --> 00:02:23,860
in different parts of our code.

49
00:02:23,860 --> 00:02:26,520
And this can also become annoying.

50
00:02:26,520 --> 00:02:29,200
And then last, but definitely not least.

51
00:02:29,200 --> 00:02:32,530
We of course also have to update the DOM.

52
00:02:32,530 --> 00:02:36,080
When things change. When we add a new to-do, for example,

53
00:02:36,080 --> 00:02:38,710
we have to insert this new to-do item,

54
00:02:38,710 --> 00:02:43,010
DOM element into our DOM, into this list of elements.

55
00:02:43,010 --> 00:02:44,600
And as you can see in this code,

56
00:02:44,600 --> 00:02:46,350
I showed you in the last section,

57
00:02:46,350 --> 00:02:49,180
it can be a lot of code to add a simple,

58
00:02:49,180 --> 00:02:52,410
to do element with two buttons into the DOM.

59
00:02:52,410 --> 00:02:54,280
And again, here, it's a lot of code.

60
00:02:54,280 --> 00:02:56,504
You have to write a lot of code, you have to maintain,

61
00:02:56,504 --> 00:03:00,580
and a lot of possibilities to mess something up.

62
00:03:00,580 --> 00:03:02,210
Because the more code you have to write

63
00:03:02,210 --> 00:03:05,421
and the more nitty-gritty details you have to take care of,

64
00:03:05,421 --> 00:03:09,150
the easier it is to introduce an error.

65
00:03:09,150 --> 00:03:11,880
So working with JavaScript code

66
00:03:11,880 --> 00:03:13,370
in this case on the frontend,

67
00:03:13,370 --> 00:03:16,160
as shown to you, can be very annoying.

68
00:03:16,160 --> 00:03:18,760
And we can sum up this overall problem,

69
00:03:18,760 --> 00:03:20,710
which we're facing here.

70
00:03:20,710 --> 00:03:23,478
We are writing this browser side JavaScript code for

71
00:03:23,478 --> 00:03:28,119
interacting with our interface in an imperative way.

72
00:03:28,119 --> 00:03:30,550
Now, what does this mean?

73
00:03:30,550 --> 00:03:33,630
Imperative simply means that in the end we write

74
00:03:33,630 --> 00:03:35,320
step by step instructions.

75
00:03:35,320 --> 00:03:38,893
We first write the code to select an element.

76
00:03:38,893 --> 00:03:42,530
Then we write the code to add an event listener.

77
00:03:42,530 --> 00:03:45,410
Then we add all those functions. And in those functions,

78
00:03:45,410 --> 00:03:47,960
we also have step-by-step instructions.

79
00:03:47,960 --> 00:03:50,260
We first create the list item element.

80
00:03:50,260 --> 00:03:52,580
Then we set the, to do ID on it,

81
00:03:52,580 --> 00:03:55,030
on this data dash attribute.

82
00:03:55,030 --> 00:03:56,940
Then we add a paragraph.

83
00:03:56,940 --> 00:04:00,630
Then we set the text of this paragraph and so on.

84
00:04:00,630 --> 00:04:04,190
And of course programming is about executing code

85
00:04:04,190 --> 00:04:06,420
step-by-step after each other.

86
00:04:06,420 --> 00:04:09,400
But if we are talking about the user interface,

87
00:04:09,400 --> 00:04:12,560
it can be very annoying and cumbersome and error prone

88
00:04:12,560 --> 00:04:16,100
if we have to describe the interface and the changes that

89
00:04:16,100 --> 00:04:18,430
should be performed on that interface

90
00:04:18,430 --> 00:04:21,000
in such a step-by-step manner,

91
00:04:21,000 --> 00:04:24,920
because it's easy to forget a step or to mix up steps.

92
00:04:24,920 --> 00:04:27,885
And just to bring this back to memory and be clear here,

93
00:04:27,885 --> 00:04:32,250
this is not how we normally write our interface code.

94
00:04:32,250 --> 00:04:35,560
Normally we write HTML code because there

95
00:04:35,560 --> 00:04:38,620
we don't have step-by-step instructions. Instead,

96
00:04:38,620 --> 00:04:41,688
we describe how our final interface should look like.

97
00:04:41,688 --> 00:04:46,430
We clearly say that we want to have two sections where in

98
00:04:46,430 --> 00:04:48,510
the first section, we want to have a forum.

99
00:04:48,510 --> 00:04:50,583
And in the second section and unordered list.

100
00:04:50,583 --> 00:04:55,171
With HTML code, we've got this easy to read markup code

101
00:04:55,171 --> 00:04:58,830
where the relations between different elements

102
00:04:58,830 --> 00:05:00,830
are easy to see.

103
00:05:00,830 --> 00:05:02,130
We are not saying,

104
00:05:02,130 --> 00:05:06,090
please create a section, now add a forum, now add a label.

105
00:05:06,090 --> 00:05:08,540
Instead, we just write the overall markup

106
00:05:08,540 --> 00:05:12,473
where we can see that a forum has a label and the input.

107
00:05:13,510 --> 00:05:15,900
And that's the key difference, with HTML code,

108
00:05:15,900 --> 00:05:20,170
we can see the final result here, the final structure of our

109
00:05:20,170 --> 00:05:23,370
document. With JavaScript code, we just have

110
00:05:23,370 --> 00:05:24,451
line after line,

111
00:05:24,451 --> 00:05:27,980
and it's not really easy to see how these elements will be

112
00:05:27,980 --> 00:05:30,616
related. We have to read all the code to understand it.

113
00:05:30,616 --> 00:05:34,423
And as mentioned, it's easy to mess something up there.

114
00:05:35,410 --> 00:05:38,840
So writing such a user interface related code in an

115
00:05:38,840 --> 00:05:42,610
imperative way is annoying and error prone.

116
00:05:42,610 --> 00:05:46,370
And that's where these front-end JavaScript UI frameworks

117
00:05:46,370 --> 00:05:50,190
help us because they solve this problem by giving us a

118
00:05:50,190 --> 00:05:54,310
declarative approach of defining our interface and the

119
00:05:54,310 --> 00:05:57,270
different states we want to have in that interface.

120
00:05:57,270 --> 00:06:00,750
And when these states should change and switch,

121
00:06:00,750 --> 00:06:03,128
and this sounds totally abstract right now,

122
00:06:03,128 --> 00:06:04,641
I'm fully aware of that,

123
00:06:04,641 --> 00:06:07,790
but that's exactly what we're going to learn in this course

124
00:06:07,790 --> 00:06:08,930
section.

125
00:06:08,930 --> 00:06:12,060
We're going to learn how we can use one of these frameworks

126
00:06:12,060 --> 00:06:15,560
to write our JavaScript code, our browser site

127
00:06:15,560 --> 00:06:19,160
JavaScript code in such a declarative approach to build a

128
00:06:19,160 --> 00:06:23,740
complex user interface in a way easier way.

129
00:06:23,740 --> 00:06:27,256
Because we will be able to just describe our desired

130
00:06:27,256 --> 00:06:29,970
end results and states.

131
00:06:29,970 --> 00:06:33,410
And it will then be up to the framework which we're using to

132
00:06:33,410 --> 00:06:36,550
figure out that the nitty-gritty details and take care about

133
00:06:36,550 --> 00:06:38,430
them behind the scenes.

134
00:06:38,430 --> 00:06:41,409
Just as we're using express on the backend so that we don't

135
00:06:41,409 --> 00:06:45,570
have to focus on the nitty-gritty details of finding out

136
00:06:45,570 --> 00:06:48,535
which path a request used or which method a request used

137
00:06:48,535 --> 00:06:50,123
there.