1 00:00:01,110 --> 00:00:03,600 ‫Now, before we start learning about React, 2 00:00:03,600 --> 00:00:07,620 ‫let's actually ask ourselves one very important question. 3 00:00:07,620 --> 00:00:10,380 ‫Why do front end frameworks, like React, 4 00:00:10,380 --> 00:00:12,990 ‫actually exist in the first place? 5 00:00:12,990 --> 00:00:17,160 ‫Why not simply use Vanilla JavaScript to build our apps? 6 00:00:17,160 --> 00:00:20,553 ‫Well, let's answer that question in this lecture. 7 00:00:21,900 --> 00:00:24,180 ‫And we're gonna start at the very beginning 8 00:00:24,180 --> 00:00:27,990 ‫by reviewing how website used to be built in the past, 9 00:00:27,990 --> 00:00:30,210 ‫how we transitioned to a new way 10 00:00:30,210 --> 00:00:34,530 ‫and how that lead to the rise of front end frameworks. 11 00:00:34,530 --> 00:00:38,610 ‫So back in the day, before around 2010, 12 00:00:38,610 --> 00:00:42,360 ‫all websites were always rendered on the server. 13 00:00:42,360 --> 00:00:44,130 ‫So in server side rendering 14 00:00:44,130 --> 00:00:47,580 ‫a website is basically assembled on the backend. 15 00:00:47,580 --> 00:00:52,020 ‫So on a web server, based on data and templates. 16 00:00:52,020 --> 00:00:55,530 ‫The resulting HTML, CSS and JavaScript code 17 00:00:55,530 --> 00:00:59,430 ‫is then sent to the client side, so to the web browser 18 00:00:59,430 --> 00:01:01,620 ‫that requested the page. 19 00:01:01,620 --> 00:01:04,530 ‫The browser then simply takes this code 20 00:01:04,530 --> 00:01:07,590 ‫and basically paints it onto the screen. 21 00:01:07,590 --> 00:01:10,830 ‫And a typical example of server side rendered websites 22 00:01:10,830 --> 00:01:14,400 ‫are all websites built with WordPress. 23 00:01:14,400 --> 00:01:16,950 ‫Now, the JavaScript that used to be included 24 00:01:16,950 --> 00:01:19,710 ‫in these websites was initially only to 25 00:01:19,710 --> 00:01:22,290 ‫add some simple dynamics to the page, 26 00:01:22,290 --> 00:01:24,960 ‫like simple animations, hover effects, 27 00:01:24,960 --> 00:01:26,970 ‫and other stuff like that. 28 00:01:26,970 --> 00:01:29,070 ‫And usually a very popular library 29 00:01:29,070 --> 00:01:32,550 ‫at the time called jQuery was used for this 30 00:01:32,550 --> 00:01:35,760 ‫because it made JavaScript work the exact same way 31 00:01:35,760 --> 00:01:38,640 ‫across all browsers back then. 32 00:01:38,640 --> 00:01:42,180 ‫However, over time, developers started writing more 33 00:01:42,180 --> 00:01:45,480 ‫and more JavaScript code to be executed by the browser, 34 00:01:45,480 --> 00:01:47,370 ‫until at some point these 35 00:01:47,370 --> 00:01:50,550 ‫became fully fledged web applications, 36 00:01:50,550 --> 00:01:52,590 ‫which then led to the rise 37 00:01:52,590 --> 00:01:56,100 ‫of so-called single page applications. 38 00:01:56,100 --> 00:01:58,680 ‫So these are basically webpages that are rendered 39 00:01:58,680 --> 00:02:01,710 ‫on the client, not on the server. 40 00:02:01,710 --> 00:02:04,710 ‫So in client side rendering, basically the work 41 00:02:04,710 --> 00:02:07,140 ‫of rendering a webpage is shifted 42 00:02:07,140 --> 00:02:09,990 ‫from the server to the client. 43 00:02:09,990 --> 00:02:13,200 ‫And so now we don't call these webpages anymore 44 00:02:13,200 --> 00:02:15,480 ‫but web applications. 45 00:02:15,480 --> 00:02:19,500 ‫Now a web application still needs data, which usually comes 46 00:02:19,500 --> 00:02:22,950 ‫from the backend in the form of an API. 47 00:02:22,950 --> 00:02:24,750 ‫And I'm sure you have already worked 48 00:02:24,750 --> 00:02:27,780 ‫with APIs like that, right? 49 00:02:27,780 --> 00:02:31,350 ‫So the application consumes this API data 50 00:02:31,350 --> 00:02:35,250 ‫and renders a screen for each view of the application. 51 00:02:35,250 --> 00:02:38,820 ‫And these single page applications essentially feel as 52 00:02:38,820 --> 00:02:42,900 ‫if you were using a native desktop or phone application. 53 00:02:42,900 --> 00:02:45,840 ‫So you can click on links or submit forms 54 00:02:45,840 --> 00:02:48,360 ‫without the page ever reloading. 55 00:02:48,360 --> 00:02:50,790 ‫So you're technically always on the same page 56 00:02:50,790 --> 00:02:53,313 ‫and therefore the name single page app. 57 00:02:54,150 --> 00:02:56,580 ‫Now, just before leaving this slide, 58 00:02:56,580 --> 00:02:59,520 ‫I want to quickly mention that server side rendering 59 00:02:59,520 --> 00:03:02,280 ‫is actually making a comeback right now. 60 00:03:02,280 --> 00:03:04,560 ‫So it's slowly getting modern, again, 61 00:03:04,560 --> 00:03:07,740 ‫driven by frameworks that are built on top 62 00:03:07,740 --> 00:03:10,500 ‫of modern client side rendering frameworks 63 00:03:10,500 --> 00:03:14,730 ‫such as Next.js, Remix and many others. 64 00:03:14,730 --> 00:03:17,700 ‫But in either case, we still need to learn how 65 00:03:17,700 --> 00:03:20,790 ‫to build single page applications of course, 66 00:03:20,790 --> 00:03:24,063 ‫but do we want to do so with Vanilla JavaScript? 67 00:03:25,020 --> 00:03:28,470 ‫Well, actually no, we do not want that 68 00:03:28,470 --> 00:03:31,080 ‫because there are actually several problems 69 00:03:31,080 --> 00:03:32,940 ‫with using Vanilla JavaScript 70 00:03:32,940 --> 00:03:35,280 ‫to build large scale applications, 71 00:03:35,280 --> 00:03:37,410 ‫as we will see in a moment. 72 00:03:37,410 --> 00:03:39,840 ‫But first, let's establish that building 73 00:03:39,840 --> 00:03:44,310 ‫any front end application is really all about handling data 74 00:03:44,310 --> 00:03:48,750 ‫and then displaying that data in a nice user interface. 75 00:03:48,750 --> 00:03:51,450 ‫That's basically all a web application does, 76 00:03:51,450 --> 00:03:52,980 ‫if you think about it. 77 00:03:52,980 --> 00:03:54,540 ‫So it receives data, 78 00:03:54,540 --> 00:03:57,630 ‫changes the data as the user uses the app, 79 00:03:57,630 --> 00:04:01,200 ‫and it always displays the current data on the screen. 80 00:04:01,200 --> 00:04:03,900 ‫What this means is that the most important task 81 00:04:03,900 --> 00:04:07,710 ‫of a single page app and really of any application 82 00:04:07,710 --> 00:04:10,830 ‫and website is to keep the user interface 83 00:04:10,830 --> 00:04:15,330 ‫in sync with the data, or in other words, is to make sure 84 00:04:15,330 --> 00:04:20,070 ‫that the UI always displays the current state of the data. 85 00:04:20,070 --> 00:04:23,460 ‫Now, as it turns out, displaying the correct data 86 00:04:23,460 --> 00:04:26,160 ‫and making sure that it stays correct 87 00:04:26,160 --> 00:04:30,810 ‫over time is actually a really hard problem to solve. 88 00:04:30,810 --> 00:04:32,610 ‫And to understand why that is 89 00:04:32,610 --> 00:04:36,540 ‫let's take a look at this Airbnb application. 90 00:04:36,540 --> 00:04:41,370 ‫So in this interface, we can identify a few pieces of data. 91 00:04:41,370 --> 00:04:44,640 ‫First, we have this list of apartment, 92 00:04:44,640 --> 00:04:46,830 ‫then we have a search bar. 93 00:04:46,830 --> 00:04:50,760 ‫We have some data about the filters that are being applied. 94 00:04:50,760 --> 00:04:53,310 ‫And we also have this piece of data here, 95 00:04:53,310 --> 00:04:56,400 ‫which indicates whether the search should be updated 96 00:04:56,400 --> 00:04:58,620 ‫as the user removes the map. 97 00:04:58,620 --> 00:05:03,240 ‫And all this is data that up depends on, right? 98 00:05:03,240 --> 00:05:06,900 ‫And actually in the real world Airbnb application 99 00:05:06,900 --> 00:05:09,450 ‫there is just so much data. 100 00:05:09,450 --> 00:05:13,110 ‫So this list here is not even all of it. 101 00:05:13,110 --> 00:05:17,760 ‫But anyway, as we know, all of this data needs to be always 102 00:05:17,760 --> 00:05:20,490 ‫kept in sync with the user interface 103 00:05:20,490 --> 00:05:23,160 ‫and also with the other pieces of data, 104 00:05:23,160 --> 00:05:26,700 ‫because they're all kind of interconnected. 105 00:05:26,700 --> 00:05:29,700 ‫For example, when we change the data about location 106 00:05:29,700 --> 00:05:33,960 ‫or dates, then the UI needs to show those new dates 107 00:05:33,960 --> 00:05:37,710 ‫and also the list of apartments needs to be updated. 108 00:05:37,710 --> 00:05:41,280 ‫Or another example, the map needs to show the location 109 00:05:41,280 --> 00:05:42,630 ‫of the apartments. 110 00:05:42,630 --> 00:05:44,970 ‫And so therefore, when the apartments change 111 00:05:44,970 --> 00:05:47,100 ‫the map must also change. 112 00:05:47,100 --> 00:05:49,710 ‫And the same thing should happen the other way around. 113 00:05:49,710 --> 00:05:52,560 ‫So when the map is moved, the list of apartments 114 00:05:52,560 --> 00:05:56,670 ‫should change as well, but only when the user has 115 00:05:56,670 --> 00:05:59,940 ‫previously clicked on the green checkbox. 116 00:05:59,940 --> 00:06:03,540 ‫So these pieces of data here are even more interconnected 117 00:06:03,540 --> 00:06:06,120 ‫and it can become a real mess. 118 00:06:06,120 --> 00:06:09,510 ‫Now, just as a side note, in a real world app, 119 00:06:09,510 --> 00:06:14,280 ‫we call each of these pieces of data a piece of state. 120 00:06:14,280 --> 00:06:16,980 ‫So based on these examples I showed you 121 00:06:16,980 --> 00:06:19,410 ‫I would say that without a framework 122 00:06:19,410 --> 00:06:22,050 ‫it would be virtually impossible to keep 123 00:06:22,050 --> 00:06:27,050 ‫this huge amount of data in sync with this super complex UI. 124 00:06:27,480 --> 00:06:30,600 ‫But still, you might be wondering, why? 125 00:06:30,600 --> 00:06:32,880 ‫Why would it be so hard to build something 126 00:06:32,880 --> 00:06:35,133 ‫like this with Vanilla JavaScript? 127 00:06:36,840 --> 00:06:40,620 ‫Well, it comes down to two big aspects. 128 00:06:40,620 --> 00:06:43,350 ‫The first is that building a complex front end 129 00:06:43,350 --> 00:06:46,980 ‫with vanilla JavaScript alone requires large amounts 130 00:06:46,980 --> 00:06:50,460 ‫of direct DOM traversing and manipulation. 131 00:06:50,460 --> 00:06:53,010 ‫Like in this code right here, where we have 132 00:06:53,010 --> 00:06:57,870 ‫manual element selection, class toggling, DOM traversing 133 00:06:57,870 --> 00:07:01,860 ‫and even manipulation of text and CSS styles 134 00:07:01,860 --> 00:07:05,760 ‫and this is guaranteed to become an absolute nightmare 135 00:07:05,760 --> 00:07:08,280 ‫in a complex app like Airbnb, 136 00:07:08,280 --> 00:07:11,520 ‫because our code would be extremely complex 137 00:07:11,520 --> 00:07:15,240 ‫and really hard to understand, and we will probably just end 138 00:07:15,240 --> 00:07:19,053 ‫up with a huge mess of entangled spaghetti code. 139 00:07:19,890 --> 00:07:22,830 ‫So this is the first problem. 140 00:07:22,830 --> 00:07:24,210 ‫The second big problem is 141 00:07:24,210 --> 00:07:27,300 ‫that in typical Vanilla JavaScript apps, 142 00:07:27,300 --> 00:07:30,690 ‫state such as simple text or numbers 143 00:07:30,690 --> 00:07:34,410 ‫are oftentimes simply stored right in the DOM. 144 00:07:34,410 --> 00:07:37,620 ‫So right in the HTML elements themselves, 145 00:07:37,620 --> 00:07:41,280 ‫rather than in a central place in the application. 146 00:07:41,280 --> 00:07:44,160 ‫The result is that we end up with many parts 147 00:07:44,160 --> 00:07:48,240 ‫of the app accessing and changing that DOM state directly, 148 00:07:48,240 --> 00:07:51,900 ‫which makes the spaghetti code even harder to understand. 149 00:07:51,900 --> 00:07:56,280 ‫And even worse, it'll most certainly introduce many bugs 150 00:07:56,280 --> 00:07:57,753 ‫into our application. 151 00:07:58,963 --> 00:08:01,053 ‫And no one wants bugs, right? 152 00:08:02,070 --> 00:08:05,040 ‫Now, of course, you could try to solve these problems 153 00:08:05,040 --> 00:08:08,100 ‫on your own, but then you will just end up creating 154 00:08:08,100 --> 00:08:11,550 ‫your own framework, which will most likely 155 00:08:11,550 --> 00:08:14,580 ‫be way worse than all the well established frameworks 156 00:08:14,580 --> 00:08:16,590 ‫that already exist. 157 00:08:16,590 --> 00:08:19,450 ‫So at this point, you might as well just use 158 00:08:20,379 --> 00:08:22,860 ‫a battle tested framework like React. 159 00:08:22,860 --> 00:08:26,670 ‫Now, right, so now that we know why it's so hard to write 160 00:08:26,670 --> 00:08:29,790 ‫a single page app with just JavaScript, 161 00:08:29,790 --> 00:08:32,130 ‫we can answer the fundamental question 162 00:08:32,130 --> 00:08:34,740 ‫that we asked in the beginning. 163 00:08:34,740 --> 00:08:39,240 ‫So why do front end frameworks actually exist? 164 00:08:39,240 --> 00:08:42,090 ‫Well, we kind of already answered that question 165 00:08:42,090 --> 00:08:44,700 ‫over the course of this lecture. 166 00:08:44,700 --> 00:08:48,930 ‫So the big fundamental reason why these frameworks exist is 167 00:08:48,930 --> 00:08:51,030 ‫because keeping a user interface 168 00:08:51,030 --> 00:08:54,300 ‫in sync with data is really hard, 169 00:08:54,300 --> 00:08:56,640 ‫and it's a lot of work too. 170 00:08:56,640 --> 00:09:01,260 ‫So basically frameworks like Angular, React or View 171 00:09:01,260 --> 00:09:04,290 ‫take this hard work of synchronizing data 172 00:09:04,290 --> 00:09:08,220 ‫with the user interface away from us developers. 173 00:09:08,220 --> 00:09:10,770 ‫So they solve this really hard problem 174 00:09:10,770 --> 00:09:14,280 ‫so that we developers can focus only on the data 175 00:09:14,280 --> 00:09:18,060 ‫and on building our user interfaces themselves. 176 00:09:18,060 --> 00:09:20,640 ‫Now, different frameworks have different approaches 177 00:09:20,640 --> 00:09:22,950 ‫to doing this, but they are all similar 178 00:09:22,950 --> 00:09:27,750 ‫in the fact that they keep UI and data in sync over time. 179 00:09:27,750 --> 00:09:31,020 ‫Now, another extremely valuable thing that frameworks 180 00:09:31,020 --> 00:09:34,620 ‫give us, is the fact that they basically enforce 181 00:09:34,620 --> 00:09:38,880 ‫a correct way of structuring and writing code. 182 00:09:38,880 --> 00:09:42,870 ‫So essentially, the authors of each of these frameworks 183 00:09:42,870 --> 00:09:46,500 ‫came up with a good way of structuring applications, 184 00:09:46,500 --> 00:09:49,260 ‫so that other developers can then follow these 185 00:09:49,260 --> 00:09:52,590 ‫conventions as well, to build better applications 186 00:09:52,590 --> 00:09:56,760 ‫with hopefully a lot less spaghetti code. 187 00:09:56,760 --> 00:10:01,170 ‫Finally, frameworks give developers, and especially teams 188 00:10:01,170 --> 00:10:04,680 ‫a consistent way of building web applications. 189 00:10:04,680 --> 00:10:08,370 ‫This way, everyone on the team will build their part 190 00:10:08,370 --> 00:10:12,000 ‫of the app in the same style as everyone else, 191 00:10:12,000 --> 00:10:13,800 ‫which will in the end create 192 00:10:13,800 --> 00:10:17,370 ‫a more consistent code base and product. 193 00:10:17,370 --> 00:10:18,840 ‫And there you go, 194 00:10:18,840 --> 00:10:21,630 ‫this is why modern web development is all 195 00:10:21,630 --> 00:10:23,583 ‫about JavaScript frameworks.