Original subtitles

1 1

In this lecture, 2

2

we will develop an algorithm which will update the DOM 3

3

only in places where it actually changed. 4

4

And remember that, that is necessary because right now, 5

5

as we update the servings here, 6

6

then that will always basically re-render 7

7

the entire recipe view here. 8

8

Right, and so we can see some flickering around the page. 9

9

Right now, it's not really happening for some reason, 10

10

but you saw that in the pervious video 11

11

where every time that I would update the servings, 12

12

it would then basically re-load this image, 13

13

which would then cause a short flicker. 14

14

And having to re-render the entire view, 15

15

so all of these HTML elements, 16

16

is actually a bit overkill 17

17

and it will put too much strain on the browser. 18

18

So it will create unnecessary work, 19

19

and so therefore, let's now create an update method 20

20

that we can use in this situation, all right. 21

21

So, again, here instead of calling the render method, 22

22

we actually want to be able to call an update method. 23

23

So let's duplicate this line here, 24

24

or comment it, and so here we want to call update. 25

25

And of course the update will still need all the data 26

26

just like the render method, 27

27

but again the difference between update and render 28

28

is that the update method will basically only update 29

29

text and attributes in the DOM, 30

30

so without having to re-render the entire view. 31

31

And so let's now go to the view here, 32

32

because we will want this update method 33

33

to be available on all the views 34

34

because actually we will use this 35

35

in multiple situations in this project. 36

36

So actually not just here, we're updating the servings. 37

37

But anyway, this is called update, 38

38

and it receives also some data. 39

39

Here then, let's get the same check here 40

40

and also we will want to do these two parts. 41

41

And that is because, well once we update the data, 42

42

we then want the viewers data to become that new data. 43

43

And we also want to generate some new markup. 44

44

So let's actually call this here, the new markup 45

45

and this will basically be the entire markup 46

46

as if we wanted to render a new view. 47

47

But again, here we are just going to update the markup. 48

48

But for doing that, we still need the entire markup 49

49

so that we can then compare it to the old markup, basically. 50

50

So again, what we will do here, 51

51

in this method, is to create new markup, 52

52

but to not render it. 53

53

So instead, all that we're gonna do 54

54

is to generate this markup and then compare 55

55

that new HTML to the current HTML, 56

56

and then only change text and attributes 57

57

that actually have changed from the old version 58

58

to the new version, okay. 59

59

So here, we now have the markup, but that is just a string 60

60

and so that is gonna be very difficult to compare 61

61

to the DOM elements that we currently have on the page. 62

62

And so to fix that problem, 63

63

we can actually use a nice trick 64

64

which is to basically convert this markup string 65

65

to a DOM object that's living in the memory 66

66

and that we can then use to compare 67

67

with the actual DOM that's on the page. 68

68

So let's do that and create new DOM. 69

69

And so document, and then we need to call 70

70

a function called create range, okay. 71

71

So this will create something called a range 72

72

and on the range, we can then call yet another method 73

73

which is called create contextual fragment. 74

74

And so this is where we then pass in the string of markup, 75

75

so like a string of HTML. 76

76

And so as I said before, 77

77

this method will then convert that string 78

78

into real DOM node objects. 79

79

So basically new DOM here will become like a big object 80

80

which is like a virtual DOM. 81

81

So a DOM that is not really living on the page 82

82

but which lives in our memory. 83

83

And so we can now use that DOM 84

84

as if it was the real DOM on our page. 85

85

And so we can do something like this. 86

86

We can say new elements and then we can take that new DOM 87

87

and then on that, we can call query selector all 88

88

and select all the elements in there. 89

89

And so if we now log this through console, 90

90

then we will basically see all of the elements 91

91

that will be contained inside of this new DOM element 92

92

that we basically created from generating the new markup 93

93

for the updated data, okay. 94

94

So that sounds confusing, I'm sure, 95

95

but we will see it in practice really soon. 96

96

So we are calling update here 97

97

and so that will then trigger all of this 98

98

and so let's now see in the console what happens. 99

99

So just to make sure everything works here. 100

100

So as we're clicking here, 101

101

it will of course now no longer update the values here 102

102

in the DOM, because we are now using the update method 103

103

which for now, doesn't do that. 104

104

Okay, but what we did get, was the entire list 105

105

of all the elements in the new DOM. 106

106

So in this so to say, virtual DOM, okay. 107

107

So if we check now this element, 108

108

so this is the element that contains the number, 109

109

that should now contain five. 110

110

So let's see the text content property, 111

111

or inner HTML is the same, 112

112

and so indeed, here we have five now. 113

113

And so again, the reason for that, 114

114

is that this here is now basically the DOM 115

115

that would be rendered on the page 116

116

if we simply used the render method from before, okay. 117

117

And so now with this, we can compare this DOM 118

118

that we have here, which is a little bit like a.