WEBVTT 1 00:00:01.190 --> 00:00:03.470 Now that we activated bundling 2 00:00:03.470 --> 00:00:05.991 it's time to configure Babel to transpile 3 00:00:05.991 --> 00:00:10.472 or super modern code back to ES5 code. 4 00:00:10.472 --> 00:00:14.382 And this is still important right now even many years 5 00:00:14.382 --> 00:00:19.250 after the new ES6 standard has been introduced. 6 00:00:19.250 --> 00:00:21.011 And the reason for that is simply 7 00:00:21.011 --> 00:00:24.040 that there are still many people out there 8 00:00:24.040 --> 00:00:26.901 who are stuck on like a windows XP 9 00:00:26.901 --> 00:00:28.929 or windows seven computer 10 00:00:28.929 --> 00:00:32.824 and two cannot upgrade their old internet explorers 11 00:00:32.824 --> 00:00:36.810 but we want our applications to work for everyone. 12 00:00:36.810 --> 00:00:39.023 And so we need to keep everyone in mind. 13 00:00:40.930 --> 00:00:42.450 Now, the good news is 14 00:00:42.450 --> 00:00:45.980 that parcel actually automatically uses Babel 15 00:00:45.980 --> 00:00:48.350 to transpile or code. 16 00:00:48.350 --> 00:00:51.602 And we can configure Babel a lot if we want to 17 00:00:51.602 --> 00:00:53.849 for example defining exactly 18 00:00:53.849 --> 00:00:57.300 what browsers should be supported 19 00:00:57.300 --> 00:01:00.420 but as always, that's a ton of work. 20 00:01:00.420 --> 00:01:02.330 And so we don't want that. 21 00:01:02.330 --> 00:01:04.770 And instead parcel makes 22 00:01:04.770 --> 00:01:07.020 some very good default decisions for us. 23 00:01:07.020 --> 00:01:12.020 And so we will simply mainly just go with these defaults. 24 00:01:12.220 --> 00:01:14.216 Now just so you get a very broad 25 00:01:14.216 --> 00:01:18.690 and very general overview of how Babel works. 26 00:01:18.690 --> 00:01:21.570 Let's just take a look at their website. 27 00:01:21.570 --> 00:01:24.334 So that's Babeljs.io 28 00:01:24.334 --> 00:01:27.132 and then here in the documentation 29 00:01:27.132 --> 00:01:31.163 let's take a look here at plugins. 30 00:01:32.290 --> 00:01:35.540 Okay. So basically Babel works 31 00:01:35.540 --> 00:01:37.720 with plugins and presets 32 00:01:37.720 --> 00:01:40.420 that can both be configured. 33 00:01:40.420 --> 00:01:43.210 Now a plugin is basically a specific 34 00:01:43.210 --> 00:01:46.820 JavaScript feature that we want to transpile. 35 00:01:46.820 --> 00:01:48.410 So to convert. 36 00:01:48.410 --> 00:01:50.950 So for example let's say we only wanted 37 00:01:50.950 --> 00:01:54.000 to convert arrow functions back to ES5 38 00:01:54.000 --> 00:01:56.850 but leave everything else in ES6 39 00:01:56.850 --> 00:02:00.070 for example, const and var declarations. 40 00:02:00.070 --> 00:02:02.920 Now usually that doesn't make a lot of sense 41 00:02:02.920 --> 00:02:05.825 because basically we will want to transpile 42 00:02:05.825 --> 00:02:08.170 everything at the same time. 43 00:02:08.170 --> 00:02:11.270 And so usually instead of using single plugins 44 00:02:11.270 --> 00:02:13.630 for each of these features, 45 00:02:13.630 --> 00:02:15.836 Babel actually uses presets. 46 00:02:15.836 --> 00:02:19.136 And so a preset is basically a bunch 47 00:02:19.136 --> 00:02:22.360 of plugins bundled together. 48 00:02:22.360 --> 00:02:26.285 And its by default parcel is going to use this preset 49 00:02:26.285 --> 00:02:28.035 and preset here. 50 00:02:28.035 --> 00:02:31.520 And this preset will automatically select 51 00:02:31.520 --> 00:02:34.650 which JavaScript features should be compiled 52 00:02:34.650 --> 00:02:36.970 based on browser support. 53 00:02:36.970 --> 00:02:39.578 And again that will all happen automatically 54 00:02:39.578 --> 00:02:41.290 and out of the box 55 00:02:41.290 --> 00:02:43.393 Babel will convert all features 56 00:02:43.393 --> 00:02:46.924 So only browsers that are barely used anymore 57 00:02:46.924 --> 00:02:51.463 with the market share of less than 0.25% 58 00:02:51.463 --> 00:02:53.530 are not going to be supported 59 00:02:53.530 --> 00:02:56.863 by the transpiling with this preset here. 60 00:02:58.180 --> 00:03:00.690 So, that's a very brief overview 61 00:03:00.690 --> 00:03:04.340 and we will come back here in a second 62 00:03:04.340 --> 00:03:09.336 but for now let's start on NPM run start script again 63 00:03:09.336 --> 00:03:14.336 just so we can take a look again at our final output. 64 00:03:15.780 --> 00:03:17.340 So the one we have right now 65 00:03:19.051 --> 00:03:21.050 or we had before was decompressed one 66 00:03:21.050 --> 00:03:23.003 which was not really helpful. 67 00:03:23.900 --> 00:03:28.423 And so now the script is ads, this one so F30. 68 00:03:30.120 --> 00:03:31.230 So this one 69 00:03:32.140 --> 00:03:36.860 and we can see right away that ES6 is no longer there. 70 00:03:36.860 --> 00:03:38.140 So here we have var 71 00:03:39.112 --> 00:03:41.383 instead of const that we had before. 72 00:03:42.580 --> 00:03:44.453 Let's see if we have something else. 73 00:03:45.620 --> 00:03:47.080 So here we used to have 74 00:03:47.080 --> 00:03:49.510 a template literal i believe 75 00:03:50.820 --> 00:03:53.550 and this was now converted to again 76 00:03:53.550 --> 00:03:58.270 regular ES5 code by using this concat method. 77 00:03:58.270 --> 00:04:01.860 So everything that we used from ES6 is now gone 78 00:04:03.220 --> 00:04:06.300 but now let me show you something important. 79 00:04:06.300 --> 00:04:08.210 So let's write some code here 80 00:04:08.210 --> 00:04:12.130 which is basically not part of this preset here 81 00:04:12.130 --> 00:04:14.060 because this preset ENF 82 00:04:14.060 --> 00:04:17.260 does actually only include final features. 83 00:04:17.260 --> 00:04:20.380 So features that are already part of the language 84 00:04:20.380 --> 00:04:24.340 after passing the four stages of the AGMA process. 85 00:04:24.340 --> 00:04:27.700 However, previously we used class fields 86 00:04:27.700 --> 00:04:31.620 which at the time of recording are only at stage three. 87 00:04:31.620 --> 00:04:33.480 And so let me show you how we could 88 00:04:34.390 --> 00:04:36.720 transpile a class fields as well. 89 00:04:36.720 --> 00:04:39.483 So let's just write a simple example here. 90 00:04:40.870 --> 00:04:44.860 And so here Iam going to use a field called greeting 91 00:04:44.860 --> 00:04:46.853 which I'm going to set to Hey, 92 00:04:48.640 --> 00:04:50.850 and then just a normal constructor 93 00:04:50.850 --> 00:04:55.253 which takes a name, this.name equals the name. 94 00:04:56.840 --> 00:04:59.500 And then as the constructor is run, 95 00:04:59.500 --> 00:05:01.760 it will simply log to the console 96 00:05:01.760 --> 00:05:05.270 this.greeting and then the name. 97 00:05:05.270 --> 00:05:07.423 So like, Hey Jonas. 98 00:05:09.070 --> 00:05:14.053 So const Jonas is a new person Jonas. 99 00:05:16.340 --> 00:05:19.130 But now let's see what happens here 100 00:05:19.130 --> 00:05:21.373 and we should get some kind of error. 101 00:05:22.600 --> 00:05:23.593 So let's see. 102 00:05:24.560 --> 00:05:28.160 Oh, and apparently it does work now 103 00:05:28.160 --> 00:05:31.680 when i last tested it, it didn't work 104 00:05:31.680 --> 00:05:33.090 so let's make this private 105 00:05:33.090 --> 00:05:36.290 maybe then we get the error i was expecting 106 00:05:37.360 --> 00:05:40.940 but actually no, everything is working great. 107 00:05:40.940 --> 00:05:45.520 Let me just search our code here for person. 108 00:05:45.520 --> 00:05:46.810 And so here you can see 109 00:05:46.810 --> 00:05:51.810 that the person class has nicely been converted to ES5. 110 00:05:52.910 --> 00:05:56.630 So the class keyword is nowhere to be found anymore. 111 00:05:56.630 --> 00:05:57.843 And then our entire code 112 00:05:57.843 --> 00:06:02.843 that we had here was basically converted to this, all right? 113 00:06:03.190 --> 00:06:05.996 And so therefore there's actually no more need 114 00:06:05.996 --> 00:06:08.140 for what I was going to show you 115 00:06:09.000 --> 00:06:10.660 which we had to do before 116 00:06:10.660 --> 00:06:11.980 which was to include 117 00:06:11.980 --> 00:06:16.980 this a plugin here for the class properties 118 00:06:18.580 --> 00:06:22.690 because this is still an experimental feature. 119 00:06:22.690 --> 00:06:27.690 And so yeah, we had to manually include this plugin here 120 00:06:27.730 --> 00:06:29.870 in order to make this code work 121 00:06:29.870 --> 00:06:32.150 but now that's no longer necessary. 122 00:06:32.150 --> 00:06:35.630 And so that makes this even more amazing 123 00:06:35.630 --> 00:06:38.150 but let's try another experimental one 124 00:06:38.150 --> 00:06:41.470 for example, this knowledge coalescing operator 125 00:06:41.470 --> 00:06:46.340 which is still also a bit more on the experimental side. 126 00:06:46.340 --> 00:06:51.340 So let's say Jonah's or null, let's say. 127 00:06:54.600 --> 00:06:57.300 And so that actually works as well. 128 00:06:57.300 --> 00:06:59.340 Okay great. 129 00:06:59.340 --> 00:07:01.290 Now there's still two more things 130 00:07:01.290 --> 00:07:03.810 that I need to show you here still. 131 00:07:03.810 --> 00:07:05.983 And so let's write some more code here. 132 00:07:07.190 --> 00:07:10.310 So what I will do now is to use the ES6 find method 133 00:07:10.310 --> 00:07:13.690 to find products in a cart 134 00:07:13.690 --> 00:07:17.060 that are edit more than twice. 135 00:07:17.060 --> 00:07:19.803 So that's I believe just cart. 136 00:07:20.780 --> 00:07:24.180 So cart.find 137 00:07:24.180 --> 00:07:26.970 because remember this is an ES6 method 138 00:07:29.330 --> 00:07:34.330 and then return.quantity where it's greater or equal to. 139 00:07:37.520 --> 00:07:39.833 And so that is only the pizza here. 140 00:07:41.190 --> 00:07:44.040 So you see, well 141 00:07:44.890 --> 00:07:49.743 maybe this isn't a cart, let's see what's happening. 142 00:07:52.020 --> 00:07:53.313 Oh but never mind. 143 00:07:54.530 --> 00:07:55.910 This is not filter. 144 00:07:55.910 --> 00:07:58.880 It is just find, so it will simply find 145 00:07:58.880 --> 00:08:01.340 the first element, right? 146 00:08:01.340 --> 00:08:02.730 And so this is the first element 147 00:08:02.730 --> 00:08:06.380 where the quantity is greater to. 148 00:08:06.380 --> 00:08:08.950 But anyway, what I want to show you here 149 00:08:08.950 --> 00:08:12.513 is that well let me show it to you actually first. 150 00:08:13.560 --> 00:08:16.720 So to find this code here in this other script 151 00:08:16.720 --> 00:08:21.040 I will copy this part and then put it here. 152 00:08:21.040 --> 00:08:25.500 And so you'll see that here is basically that same code. 153 00:08:25.500 --> 00:08:28.070 So the arrow function that we had is gone 154 00:08:28.070 --> 00:08:31.750 and it was replaced by this regular function. 155 00:08:31.750 --> 00:08:36.420 However, the ES6 method find is still here. 156 00:08:36.420 --> 00:08:39.313 So it has not been converted to ES5. 157 00:08:40.200 --> 00:08:43.200 Now the same is too for other things 158 00:08:43.200 --> 00:08:45.623 for example, let's try promises. 159 00:08:46.550 --> 00:08:50.290 So promise.resolve 160 00:08:50.290 --> 00:08:51.720 So we're creating an immediately 161 00:08:51.720 --> 00:08:56.073 resolved promise to make this really a quick example. 162 00:08:59.080 --> 00:09:01.520 And let's just log X to the console 163 00:09:02.410 --> 00:09:03.910 and so that works 164 00:09:03.910 --> 00:09:08.110 but it works because our browser understands ES6 165 00:09:09.100 --> 00:09:11.360 because if we take a look here now 166 00:09:11.360 --> 00:09:15.420 then promise is also not converted to ES5. 167 00:09:15.420 --> 00:09:18.700 So remember promise is an ES6 feature 168 00:09:18.700 --> 00:09:22.990 but again, it was not converted back to ES5 169 00:09:22.990 --> 00:09:24.680 and the reason for that is that 170 00:09:24.680 --> 00:09:29.330 Babel can actually only transpile ES6 Syntax. 171 00:09:29.330 --> 00:09:31.950 So data things like arrow functions, 172 00:09:31.950 --> 00:09:36.540 classes, const, or the spread operator. 173 00:09:36.540 --> 00:09:38.450 So these are basically things 174 00:09:38.450 --> 00:09:42.880 that have an equivalent way of writing them in ES5. 175 00:09:42.880 --> 00:09:45.100 So for example the arrow function, 176 00:09:45.100 --> 00:09:47.470 it is simply a different syntax. 177 00:09:47.470 --> 00:09:51.153 And so Babel can simply write function instead of data. 178 00:09:52.110 --> 00:09:54.730 And the same goes with const. 179 00:09:54.730 --> 00:09:57.970 So it's very easy to simply convert that to VAR 180 00:09:57.970 --> 00:10:01.400 but the same is not true for real new features 181 00:10:01.400 --> 00:10:03.280 that were added to the language 182 00:10:03.280 --> 00:10:05.720 like find and promise. 183 00:10:05.720 --> 00:10:08.410 So these new additions to the language 184 00:10:08.410 --> 00:10:12.740 so these new features, they can simply not be transpiled. 185 00:10:12.740 --> 00:10:14.730 It's simply not possible. 186 00:10:14.730 --> 00:10:19.470 Only syntax is easy to convert, so easy to compile. 187 00:10:19.470 --> 00:10:23.120 However, all hope is not lost. 188 00:10:23.120 --> 00:10:25.500 So for these added features 189 00:10:25.500 --> 00:10:29.060 again, such as promises or all the array methods 190 00:10:29.060 --> 00:10:32.870 like finds and really a bunch of other stuff, 191 00:10:32.870 --> 00:10:34.790 we can polyfill them. 192 00:10:34.790 --> 00:10:37.090 And so that's why since the beginning 193 00:10:37.090 --> 00:10:41.450 I've always been saying transpiling and polyfilling. 194 00:10:41.450 --> 00:10:44.923 So these new features, we have to polyfill them. 195 00:10:46.470 --> 00:10:48.620 Now Babel used to do polyfilling 196 00:10:48.620 --> 00:10:50.740 out of the box some time ago 197 00:10:50.740 --> 00:10:53.290 but recently they started to simply 198 00:10:53.290 --> 00:10:55.450 recommending another library. 199 00:10:55.450 --> 00:10:58.723 And so we now have to manually import data as well. 200 00:10:59.580 --> 00:11:04.580 So import Core-js so that's the name of the library. 201 00:11:06.240 --> 00:11:10.070 And then we usually only want to import a part 202 00:11:10.070 --> 00:11:13.880 of that library and that's called Stable. 203 00:11:13.880 --> 00:11:16.160 And so we can write this. 204 00:11:16.160 --> 00:11:17.540 Okay. 205 00:11:17.540 --> 00:11:20.490 Now usually we have to install 206 00:11:20.490 --> 00:11:22.280 all of the packages first 207 00:11:22.280 --> 00:11:24.330 but fortunately parcel is smart 208 00:11:24.330 --> 00:11:27.400 enough to install this automatically. 209 00:11:27.400 --> 00:11:29.963 Well at least that is how it should be. 210 00:11:31.510 --> 00:11:33.780 So maybe that doesn't work after all 211 00:11:34.780 --> 00:11:37.913 so let's manually install it, but that's weird. 212 00:11:39.780 --> 00:11:41.153 So core-js. 213 00:11:43.500 --> 00:11:44.563 So let's see. 214 00:11:46.600 --> 00:11:48.100 And so here we go. 215 00:11:48.100 --> 00:11:51.090 So let's re-save it. 216 00:11:51.090 --> 00:11:52.083 And so here we go. 217 00:11:53.440 --> 00:11:54.810 Okay. 218 00:11:54.810 --> 00:11:56.308 So you should probably 219 00:11:56.308 --> 00:11:59.460 also try to install core-js manually 220 00:11:59.460 --> 00:12:02.790 and then you will able to use it like this. 221 00:12:02.790 --> 00:12:04.630 So maybe you're starting to see 222 00:12:04.630 --> 00:12:07.920 that D things really change all the time. 223 00:12:07.920 --> 00:12:10.376 And so, hi, I'm even confused myself sometimes 224 00:12:10.376 --> 00:12:13.590 on why certain things used to work 225 00:12:13.590 --> 00:12:15.800 and now they work differently. 226 00:12:15.800 --> 00:12:16.910 But the good thing is 227 00:12:16.910 --> 00:12:20.160 that you don't really have to understand all this. 228 00:12:20.160 --> 00:12:22.860 So this is really more like a recipe 229 00:12:22.860 --> 00:12:24.200 that you just need to follow. 230 00:12:24.200 --> 00:12:28.260 And then with time it will all become like a routine 231 00:12:28.260 --> 00:12:30.190 and it will become simple. 232 00:12:30.190 --> 00:12:32.960 But anyway, let's go back to our code 233 00:12:32.960 --> 00:12:36.710 but you will notice that's the code we had before 234 00:12:36.710 --> 00:12:39.550 is actually still there. 235 00:12:39.550 --> 00:12:40.900 So it's still the same 236 00:12:40.900 --> 00:12:45.190 and promise and find have not been replaced. 237 00:12:45.190 --> 00:12:47.900 And that's because that's simply not the way 238 00:12:47.900 --> 00:12:49.770 it's supposed to work. 239 00:12:49.770 --> 00:12:52.430 So instead what polyfilling does 240 00:12:52.430 --> 00:12:55.730 is to basically recreate defined function 241 00:12:55.730 --> 00:12:58.100 and to make it available in this bundle 242 00:12:58.100 --> 00:13:00.103 so that the codes can then use it. 243 00:13:01.137 --> 00:13:05.338 `So let's search for array.prototype 244 00:13:05.338 --> 00:13:09.570 which remember, is where all the array methods are put. 245 00:13:09.570 --> 00:13:13.274 So array.prototype.find. 246 00:13:13.274 --> 00:13:17.223 And so, well here it is. 247 00:13:18.940 --> 00:13:22.810 So Babel then uses this weird create methods. 248 00:13:22.810 --> 00:13:24.530 But what matters here is that 249 00:13:24.530 --> 00:13:28.290 this will basically implement array prototype find 250 00:13:28.290 --> 00:13:30.270 and the same for find index, 251 00:13:30.270 --> 00:13:35.270 every some filter map and also for each 252 00:13:36.750 --> 00:13:40.010 even though these less ones here are not ES6 253 00:13:40.010 --> 00:13:42.973 but for some reason they are still polyfilled here. 254 00:13:44.706 --> 00:13:48.056 Oh right? And the same for promise, probably. 255 00:13:48.056 --> 00:13:50.683 Well not probably for sure. 256 00:13:51.980 --> 00:13:54.500 Otherwise this is not going to work 257 00:13:55.860 --> 00:13:58.660 and it's not easy to find it 258 00:13:58.660 --> 00:14:02.300 but well, here's the definition of promise 259 00:14:02.300 --> 00:14:04.800 which is going to be global promise 260 00:14:04.800 --> 00:14:08.240 but I'm not gonna dig even deeper into this. 261 00:14:08.240 --> 00:14:10.820 That's just not really necessary. 262 00:14:10.820 --> 00:14:13.050 However, as you just saw before 263 00:14:13.050 --> 00:14:16.600 the polyfilling is going to polyfill everything 264 00:14:16.600 --> 00:14:18.630 even if we don't need it. 265 00:14:18.630 --> 00:14:22.090 So we had to D find index method there as well. 266 00:14:22.090 --> 00:14:24.290 Let's actually go back there. 267 00:14:24.290 --> 00:14:27.157 So array.prototype.find 268 00:14:30.380 --> 00:14:35.050 So it also created find index and every, and some 269 00:14:35.050 --> 00:14:37.660 and so we are actually not even using these. 270 00:14:37.660 --> 00:14:38.970 And so if we wanted 271 00:14:38.970 --> 00:14:40.950 we could cherry pick basically 272 00:14:40.950 --> 00:14:44.410 just the features that we actually want to polyfill. 273 00:14:44.410 --> 00:14:46.800 Now that of course is a lot of work 274 00:14:46.800 --> 00:14:50.400 but it will also greatly reduce the bundle size. 275 00:14:50.400 --> 00:14:52.170 And so it might be worth it 276 00:14:52.170 --> 00:14:54.180 if that's really a concern. 277 00:14:54.180 --> 00:14:56.103 So we could instead of this. 278 00:14:56.990 --> 00:14:59.840 So instead of basically importing everything there is 279 00:15:00.790 --> 00:15:05.780 we can just say core-js stable and then only array 280 00:15:07.790 --> 00:15:10.513 and then find like this. 281 00:15:12.840 --> 00:15:14.810 So now if we go back here, 282 00:15:14.810 --> 00:15:19.528 then, well then only this one should be here. 283 00:15:19.528 --> 00:15:22.350 (indistinct) It looks different now. 284 00:15:22.350 --> 00:15:25.750 And so probably only this one was not polyfilled 285 00:15:26.869 --> 00:15:30.420 At the same you could do for a promise 286 00:15:31.503 --> 00:15:35.580 like this okay. 287 00:15:35.580 --> 00:15:37.150 So that's going to be a lot of work 288 00:15:37.150 --> 00:15:38.820 which we usually don't do 289 00:15:38.820 --> 00:15:41.930 but it is possible again if you are really worried 290 00:15:41.930 --> 00:15:43.393 about your bundle size. 291 00:15:44.680 --> 00:15:47.613 Finally, just to finish there is still one feature 292 00:15:47.613 --> 00:15:51.730 that is not polyfilled by this one here. 293 00:15:51.730 --> 00:15:55.020 And so we always need to install 294 00:15:55.020 --> 00:15:57.120 just one more package 295 00:15:57.120 --> 00:16:02.120 which is called NPM install regenerator-runtime. 296 00:16:04.530 --> 00:16:08.040 So regenerator.That's correct. 297 00:16:08.040 --> 00:16:13.040 So let's see, let's already include it here. 298 00:16:15.060 --> 00:16:20.060 So we need import, so regenerator-runtime/runtime like this. 299 00:16:22.820 --> 00:16:27.820 Alright? So this here is for polyfilling async functions. 300 00:16:31.100 --> 00:16:33.800 So again, it probably looks a bit confusing 301 00:16:33.800 --> 00:16:38.070 that we have to do all of this, but yeah, don't worry. 302 00:16:38.070 --> 00:16:41.080 It's just a recipe that you have to follow. 303 00:16:41.080 --> 00:16:43.550 Okay. And usually you would put 304 00:16:43.550 --> 00:16:46.890 these imports here right at the top of your file 305 00:16:46.890 --> 00:16:49.460 but in this case, we can just leave them here 306 00:16:49.460 --> 00:16:52.483 because they will be hosted anyway, right? 307 00:16:53.320 --> 00:16:56.420 Also keep in mind that all of this might change. 308 00:16:56.420 --> 00:16:58.220 And so if you're watching this video 309 00:16:58.220 --> 00:17:00.200 like in two years from now, 310 00:17:00.200 --> 00:17:02.150 then things might be different 311 00:17:02.150 --> 00:17:04.740 and things might not work the same. 312 00:17:04.740 --> 00:17:06.870 And so once again make sure 313 00:17:06.870 --> 00:17:08.410 that you then install 314 00:17:08.410 --> 00:17:11.220 exactly the same versions as I have here 315 00:17:11.220 --> 00:17:16.220 especially this core-js and regenerator-runtime. 316 00:17:16.640 --> 00:17:19.230 And of course, also parcel. 317 00:17:19.230 --> 00:17:22.343 So just as I told you in the last video. 318 00:17:24.110 --> 00:17:25.150 Now okay. 319 00:17:25.150 --> 00:17:28.270 And with this, we're actually done with this video 320 00:17:28.270 --> 00:17:33.090 and also with learning about Modern JavaScript Development. 321 00:17:33.090 --> 00:17:36.340 So basically with learning about Tooling, 322 00:17:36.340 --> 00:17:41.340 such as parcel and babel and also about modules. 323 00:17:41.400 --> 00:17:44.020 Now in the remainder of this section, 324 00:17:44.020 --> 00:17:45.680 so the next two videos 325 00:17:45.680 --> 00:17:47.700 we will just quickly also talk 326 00:17:47.700 --> 00:17:50.260 about modern JavaScript coding. 327 00:17:50.260 --> 00:17:53.800 So more on the actual programming side of things. 328 00:17:53.800 --> 00:17:57.640 And so there we will learn or actually more review 329 00:17:57.640 --> 00:18:00.703 how to write clean and modern JavaScript code.