Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,090 --> 00:00:02,170 In this lecture, 2 2 00:00:02,170 --> 00:00:05,980 we will develop an algorithm which will update the DOM 3 3 00:00:05,980 --> 00:00:08,833 only in places where it actually changed. 4 4 00:00:10,660 --> 00:00:14,590 And remember that, that is necessary because right now, 5 5 00:00:14,590 --> 00:00:17,090 as we update the servings here, 6 6 00:00:17,090 --> 00:00:20,680 then that will always basically re-render 7 7 00:00:20,680 --> 00:00:24,080 the entire recipe view here. 8 8 00:00:24,080 --> 00:00:28,920 Right, and so we can see some flickering around the page. 9 9 00:00:28,920 --> 00:00:33,270 Right now, it's not really happening for some reason, 10 10 00:00:33,270 --> 00:00:35,440 but you saw that in the pervious video 11 11 00:00:35,440 --> 00:00:38,680 where every time that I would update the servings, 12 12 00:00:38,680 --> 00:00:42,160 it would then basically re-load this image, 13 13 00:00:42,160 --> 00:00:45,460 which would then cause a short flicker. 14 14 00:00:45,460 --> 00:00:48,990 And having to re-render the entire view, 15 15 00:00:48,990 --> 00:00:51,650 so all of these HTML elements, 16 16 00:00:51,650 --> 00:00:54,170 is actually a bit overkill 17 17 00:00:54,170 --> 00:00:57,620 and it will put too much strain on the browser. 18 18 00:00:57,620 --> 00:01:00,380 So it will create unnecessary work, 19 19 00:01:00,380 --> 00:01:03,930 and so therefore, let's now create an update method 20 20 00:01:03,930 --> 00:01:07,543 that we can use in this situation, all right. 21 21 00:01:09,890 --> 00:01:14,400 So, again, here instead of calling the render method, 22 22 00:01:14,400 --> 00:01:18,540 we actually want to be able to call an update method. 23 23 00:01:18,540 --> 00:01:21,070 So let's duplicate this line here, 24 24 00:01:21,070 --> 00:01:25,777 or comment it, and so here we want to call update. 25 25 00:01:27,740 --> 00:01:31,810 And of course the update will still need all the data 26 26 00:01:31,810 --> 00:01:33,680 just like the render method, 27 27 00:01:33,680 --> 00:01:36,890 but again the difference between update and render 28 28 00:01:36,890 --> 00:01:40,620 is that the update method will basically only update 29 29 00:01:40,620 --> 00:01:43,330 text and attributes in the DOM, 30 30 00:01:43,330 --> 00:01:46,613 so without having to re-render the entire view. 31 31 00:01:47,550 --> 00:01:50,010 And so let's now go to the view here, 32 32 00:01:50,010 --> 00:01:52,920 because we will want this update method 33 33 00:01:52,920 --> 00:01:55,370 to be available on all the views 34 34 00:01:56,770 --> 00:01:58,870 because actually we will use this 35 35 00:01:58,870 --> 00:02:01,800 in multiple situations in this project. 36 36 00:02:01,800 --> 00:02:05,273 So actually not just here, we're updating the servings. 37 37 00:02:07,360 --> 00:02:10,370 But anyway, this is called update, 38 38 00:02:10,370 --> 00:02:13,490 and it receives also some data. 39 39 00:02:13,490 --> 00:02:18,470 Here then, let's get the same check here 40 40 00:02:18,470 --> 00:02:21,823 and also we will want to do these two parts. 41 41 00:02:23,010 --> 00:02:27,460 And that is because, well once we update the data, 42 42 00:02:27,460 --> 00:02:31,950 we then want the viewers data to become that new data. 43 43 00:02:31,950 --> 00:02:35,750 And we also want to generate some new markup. 44 44 00:02:35,750 --> 00:02:40,450 So let's actually call this here, the new markup 45 45 00:02:40,450 --> 00:02:43,220 and this will basically be the entire markup 46 46 00:02:43,220 --> 00:02:47,010 as if we wanted to render a new view. 47 47 00:02:47,010 --> 00:02:50,650 But again, here we are just going to update the markup. 48 48 00:02:50,650 --> 00:02:54,300 But for doing that, we still need the entire markup 49 49 00:02:54,300 --> 00:02:58,593 so that we can then compare it to the old markup, basically. 50 50 00:02:59,510 --> 00:03:01,870 So again, what we will do here, 51 51 00:03:01,870 --> 00:03:05,010 in this method, is to create new markup, 52 52 00:03:05,010 --> 00:03:07,010 but to not render it. 53 53 00:03:07,010 --> 00:03:09,170 So instead, all that we're gonna do 54 54 00:03:09,170 --> 00:03:12,220 is to generate this markup and then compare 55 55 00:03:12,220 --> 00:03:15,690 that new HTML to the current HTML, 56 56 00:03:15,690 --> 00:03:18,790 and then only change text and attributes 57 57 00:03:18,790 --> 00:03:21,650 that actually have changed from the old version 58 58 00:03:21,650 --> 00:03:24,380 to the new version, okay. 59 59 00:03:24,380 --> 00:03:28,850 So here, we now have the markup, but that is just a string 60 60 00:03:28,850 --> 00:03:31,970 and so that is gonna be very difficult to compare 61 61 00:03:31,970 --> 00:03:35,740 to the DOM elements that we currently have on the page. 62 62 00:03:35,740 --> 00:03:37,560 And so to fix that problem, 63 63 00:03:37,560 --> 00:03:39,950 we can actually use a nice trick 64 64 00:03:39,950 --> 00:03:43,750 which is to basically convert this markup string 65 65 00:03:43,750 --> 00:03:47,320 to a DOM object that's living in the memory 66 66 00:03:47,320 --> 00:03:49,620 and that we can then use to compare 67 67 00:03:49,620 --> 00:03:51,943 with the actual DOM that's on the page. 68 68 00:03:53,010 --> 00:03:56,143 So let's do that and create new DOM. 69 69 00:03:58,370 --> 00:04:02,640 And so document, and then we need to call 70 70 00:04:02,640 --> 00:04:06,553 a function called create range, okay. 71 71 00:04:11,450 --> 00:04:13,960 So this will create something called a range 72 72 00:04:13,960 --> 00:04:17,090 and on the range, we can then call yet another method 73 73 00:04:17,090 --> 00:04:22,090 which is called create contextual fragment. 74 74 00:04:23,980 --> 00:04:28,720 And so this is where we then pass in the string of markup, 75 75 00:04:28,720 --> 00:04:30,563 so like a string of HTML. 76 76 00:04:31,800 --> 00:04:33,790 And so as I said before, 77 77 00:04:33,790 --> 00:04:36,470 this method will then convert that string 78 78 00:04:36,470 --> 00:04:39,240 into real DOM node objects. 79 79 00:04:39,240 --> 00:04:43,690 So basically new DOM here will become like a big object 80 80 00:04:43,690 --> 00:04:46,420 which is like a virtual DOM. 81 81 00:04:46,420 --> 00:04:49,690 So a DOM that is not really living on the page 82 82 00:04:49,690 --> 00:04:51,890 but which lives in our memory. 83 83 00:04:51,890 --> 00:04:53,980 And so we can now use that DOM 84 84 00:04:53,980 --> 00:04:57,260 as if it was the real DOM on our page. 85 85 00:04:57,260 --> 00:04:59,453 And so we can do something like this. 86 86 00:05:00,320 --> 00:05:05,320 We can say new elements and then we can take that new DOM 87 87 00:05:08,640 --> 00:05:13,080 and then on that, we can call query selector all 88 88 00:05:14,020 --> 00:05:16,293 and select all the elements in there. 89 89 00:05:17,460 --> 00:05:19,560 And so if we now log this through console, 90 90 00:05:21,750 --> 00:05:24,550 then we will basically see all of the elements 91 91 00:05:24,550 --> 00:05:28,230 that will be contained inside of this new DOM element 92 92 00:05:28,230 --> 00:05:32,010 that we basically created from generating the new markup 93 93 00:05:32,010 --> 00:05:35,073 for the updated data, okay. 94 94 00:05:36,290 --> 00:05:38,403 So that sounds confusing, I'm sure, 95 95 00:05:40,280 --> 00:05:43,660 but we will see it in practice really soon. 96 96 00:05:43,660 --> 00:05:45,370 So we are calling update here 97 97 00:05:45,370 --> 00:05:48,010 and so that will then trigger all of this 98 98 00:05:48,010 --> 00:05:50,460 and so let's now see in the console what happens. 99 99 00:05:54,000 --> 00:05:56,803 So just to make sure everything works here. 100 100 00:06:00,230 --> 00:06:01,720 So as we're clicking here, 101 101 00:06:01,720 --> 00:06:06,210 it will of course now no longer update the values here 102 102 00:06:06,210 --> 00:06:10,150 in the DOM, because we are now using the update method 103 103 00:06:10,150 --> 00:06:12,093 which for now, doesn't do that. 104 104 00:06:13,580 --> 00:06:18,380 Okay, but what we did get, was the entire list 105 105 00:06:18,380 --> 00:06:20,963 of all the elements in the new DOM. 106 106 00:06:22,160 --> 00:06:26,793 So in this so to say, virtual DOM, okay. 107 107 00:06:27,800 --> 00:06:30,330 So if we check now this element, 108 108 00:06:30,330 --> 00:06:33,020 so this is the element that contains the number, 109 109 00:06:33,020 --> 00:06:34,713 that should now contain five. 110 110 00:06:36,380 --> 00:06:39,563 So let's see the text content property, 111 111 00:06:40,640 --> 00:06:43,010 or inner HTML is the same, 112 112 00:06:43,010 --> 00:06:45,603 and so indeed, here we have five now. 113 113 00:06:46,470 --> 00:06:48,840 And so again, the reason for that, 114 114 00:06:48,840 --> 00:06:52,170 is that this here is now basically the DOM 115 115 00:06:52,170 --> 00:06:54,620 that would be rendered on the page 116 116 00:06:54,620 --> 00:06:58,343 if we simply used the render method from before, okay. 117 117 00:07:00,810 --> 00:07:04,280 And so now with this, we can compare this DOM 118 118 00:07:04,280 --> 00:07:07,120 that we have here, which is a little bit like a. 10434