WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:00.276 --> 00:00:06.596 align:middle How many people have seen the SymfonyCasts videos? 00:00:07.086 --> 00:00:13.046 align:middle I was going to explain that this is really my voice and the miracles of editing. 00:00:13.256 --> 00:00:16.026 align:middle It's really incredible what we can with that audio. 00:00:17.006 --> 00:00:19.656 align:middle Okay. I am Ryan. 00:00:19.846 --> 00:00:21.136 align:middle Hello nice to meet you. 00:00:21.616 --> 00:00:24.306 align:middle I'm the the lead of the documentation team. 00:00:24.816 --> 00:00:28.076 align:middle Also, a writer for KnpUniversity... 00:00:28.076 --> 00:00:30.936 align:middle wait SymfonyCasts. 00:00:31.686 --> 00:00:38.956 align:middle Changing a domain is harder than you think. 00:00:38.956 --> 00:00:45.476 align:middle I'm basically, if you've been around Symfony for a while, you probably know me, 00:00:45.476 --> 00:00:47.706 align:middle I'm a Symfony evangelist / fanboy. 00:00:47.706 --> 00:00:53.916 align:middle The husband of the much more talented and much more popular at the Symfony conferences, Leanna. 00:00:54.406 --> 00:00:55.726 align:middle How many people have met Leanna? 00:00:56.896 --> 00:00:58.856 align:middle Okay, yeah, okay. 00:00:59.236 --> 00:01:04.216 align:middle That's so great, because that means, there's many of you have such a great opportunity today 00:01:04.846 --> 00:01:09.846 align:middle to meet Leanna, give her a jumping high-five, like this style. 00:01:10.446 --> 00:01:13.766 align:middle Leanna, can you raise your hand, just so everyone sees, right here? 00:01:14.416 --> 00:01:16.646 align:middle Yeah, so Leanna's right here, and you can find her afterwards. 00:01:16.896 --> 00:01:23.276 align:middle She's going to come up afterwards and wait for her high-fives. 00:01:23.276 --> 00:01:26.586 align:middle And the father to my much more handsome, charming son Beckett. 00:01:26.756 --> 00:01:31.176 align:middle So now, I have a kid, so now I get to show you pictures of my kid in the beginning. 00:01:31.426 --> 00:01:35.776 align:middle Whether you want to or not, so that's my son, Beckett. 00:01:35.776 --> 00:01:38.606 align:middle Okay, so let's talk about Webpack and Encore. 00:01:38.946 --> 00:01:42.666 align:middle We are going to do just a little bit of explanation in the beginning, 00:01:42.666 --> 00:01:47.576 align:middle then talk about some lessons that we've learned over the past year and a half. 00:01:47.796 --> 00:01:53.786 align:middle And also, some new features, because a new version of Encore came out, only one month ago, 00:01:54.056 --> 00:01:58.226 align:middle and there are actually some really exciting changes that we've made in that version. 00:01:58.916 --> 00:02:01.446 align:middle Okay so first of all, Webpack itself. 00:02:02.036 --> 00:02:02.746 align:middle What is Webpack? 00:02:02.826 --> 00:02:09.636 align:middle It's a very simple concept, it allows you to package all of your JavaScript 00:02:09.966 --> 00:02:12.246 align:middle and all of your CSS into one file each. 00:02:12.486 --> 00:02:18.786 align:middle And it works via require statements, so you can have one file app.js, require some other files, 00:02:19.696 --> 00:02:24.436 align:middle sort of like we used to do in PHP, require some other files, and that's it. 00:02:24.756 --> 00:02:29.226 align:middle It's just going to turn all of those into one app.js, and one app.css file. 00:02:29.226 --> 00:02:30.476 align:middle That's kind of cool. 00:02:31.936 --> 00:02:37.246 align:middle Or we can explain Webpack as a totally new way of programming. 00:02:37.676 --> 00:02:39.096 align:middle This is actually what makes it hard. 00:02:39.296 --> 00:02:45.486 align:middle You have to completely unlearn everything you've learned about doing frontend programming. 00:02:45.956 --> 00:02:52.106 align:middle Because we've spent 15 years learning how to program in JavaScript with global variables. 00:02:52.776 --> 00:02:54.226 align:middle That's insane. 00:02:54.916 --> 00:03:01.566 align:middle How many of you regularly use global variables in PHP? 00:03:01.566 --> 00:03:02.766 align:middle There's one brave hand. 00:03:03.046 --> 00:03:06.146 align:middle No, we don't program that way. 00:03:06.276 --> 00:03:07.686 align:middle How many of you do it in JavaScript? 00:03:07.686 --> 00:03:09.196 align:middle Everyone that does JavaScript, right? 00:03:09.196 --> 00:03:10.946 align:middle Because it wasn't possible before. 00:03:10.976 --> 00:03:12.556 align:middle You have to unlearn that. 00:03:12.556 --> 00:03:16.786 align:middle We basically have to retrain ourselves to program 00:03:16.786 --> 00:03:19.896 align:middle in JavaScript the same way that we program in PHP. 00:03:19.956 --> 00:03:22.236 align:middle Once you do it, it's an amazing experience. 00:03:22.676 --> 00:03:27.326 align:middle So, Encore is just a wrapper around Webpack. 00:03:27.326 --> 00:03:29.576 align:middle It's actually a Webpack configuration generator. 00:03:29.956 --> 00:03:35.496 align:middle It's a Node library, but we recommend installing it via a Composer package. 00:03:35.696 --> 00:03:37.136 align:middle I'll explain why later. 00:03:37.136 --> 00:03:40.436 align:middle There is a little bit of PHP in Encore, but it's mostly Node. 00:03:40.786 --> 00:03:44.656 align:middle Of course, it has a nice recipe when you install it: composer require encore. 00:03:45.286 --> 00:03:48.026 align:middle Oh, actually see, things changed. 00:03:48.326 --> 00:03:51.976 align:middle That's slightly out of date because we should not have the -- dev there anymore. 00:03:52.576 --> 00:03:53.616 align:middle I'll explain why later. 00:03:53.616 --> 00:03:57.306 align:middle There is a small bit of code that you do want to run at run-time now. 00:03:57.356 --> 00:04:00.416 align:middle composer require encore, okay, it downloads a few things. 00:04:00.416 --> 00:04:02.256 align:middle This is what it gives you. 00:04:02.256 --> 00:04:09.186 align:middle It gives you a package.json: that's the composer file basically for Node. 00:04:09.186 --> 00:04:12.866 align:middle Two files: a CSS file and a JavaScript file just to get you started. 00:04:13.206 --> 00:04:14.486 align:middle And that's basically it. 00:04:15.286 --> 00:04:17.266 align:middle So, here is what the package.json looks like. 00:04:17.266 --> 00:04:23.936 align:middle It just requires two packages: Encore and the webpack-notifier is just cool 00:04:23.936 --> 00:04:27.546 align:middle because it makes cool desktop notifications when your build finishes. 00:04:27.546 --> 00:04:29.996 align:middle It's like ding, your build is done! 00:04:29.996 --> 00:04:31.596 align:middle It just makes it more fun. 00:04:32.196 --> 00:04:33.226 align:middle That's it. 00:04:33.596 --> 00:04:38.286 align:middle The webpack.config.js file is where you configure Encore, 00:04:38.426 --> 00:04:40.686 align:middle how you tell Encore what you need. 00:04:41.126 --> 00:04:43.776 align:middle What you need is actually very simple. 00:04:43.776 --> 00:04:47.636 align:middle You just need to tell it where you want the output path, where you are going 00:04:47.636 --> 00:04:51.906 align:middle to put the final build files, and then you are going to point it, it's called an entry, 00:04:52.076 --> 00:04:54.386 align:middle you are going to point it to a single JavaScript file. 00:04:54.786 --> 00:04:57.016 align:middle I'm saying go read that . 00:04:57.086 --> 00:04:58.946 align:middle /assets/js/app.js file. 00:04:59.986 --> 00:05:01.476 align:middle The first key app? 00:05:01.616 --> 00:05:06.156 align:middle That could be anything: that will ultimately control the name of your output file. 00:05:06.156 --> 00:05:10.686 align:middle If that first key, that first argument was foo, we would end up with a foo.js file. 00:05:11.006 --> 00:05:14.946 align:middle But we're pointing it at app.js. 00:05:14.946 --> 00:05:16.576 align:middle What does app.js look like? 00:05:16.576 --> 00:05:17.986 align:middle Okay, here's a simple example. 00:05:18.536 --> 00:05:23.236 align:middle We can requires some JavaScript files, or we can even require CSS files. 00:05:24.506 --> 00:05:27.516 align:middle That's what we have here: we're actually requiring CSS from JavaScript. 00:05:27.516 --> 00:05:30.376 align:middle I'm going to talk about that in a little bit: that's very, very important. 00:05:30.956 --> 00:05:34.626 align:middle Then we actually need to install our dependencies. 00:05:34.626 --> 00:05:38.776 align:middle I really should have taken a screenshot of ... 00:05:39.036 --> 00:05:41.466 align:middle This is basically me running yarn install. 00:05:41.786 --> 00:05:45.596 align:middle Yarn is, there are two package managers in Node. 00:05:46.346 --> 00:05:48.046 align:middle Yarn is one of them. 00:05:48.046 --> 00:05:49.796 align:middle This is basically me running yarn install. 00:05:50.246 --> 00:05:53.146 align:middle For some reason, yarn lets you be so incredibly lazy 00:05:53.146 --> 00:05:55.766 align:middle that you can just say, yarn and it installs for you. 00:05:55.886 --> 00:05:58.646 align:middle This is me running yarn install and the end result is... 00:05:58.646 --> 00:06:01.776 align:middle boom! We end up with tons of files 00:06:01.996 --> 00:06:05.676 align:middle in a node_modules/ directory, which is the vendor/ directory. 00:06:05.876 --> 00:06:14.446 align:middle At this point, we have basically just required two packages from Node, and installed them. 00:06:14.576 --> 00:06:15.326 align:middle That's it. 00:06:15.976 --> 00:06:19.116 align:middle To actually run Encore, you're going to run yarn encore dev. 00:06:19.116 --> 00:06:24.426 align:middle There is also a yarn encore production you'll see later: that's the mode that minifies all 00:06:24.426 --> 00:06:26.686 align:middle of your files and does other optimizations. 00:06:26.686 --> 00:06:30.836 align:middle Of course, there is a -- watch so you don't have to run every time. 00:06:31.136 --> 00:06:34.356 align:middle Every time you modify file, this is going to re-output your files. 00:06:35.596 --> 00:06:39.746 align:middle The end result of this is that you get two files. 00:06:40.596 --> 00:06:43.836 align:middle Actually, you guys are probably good at counting, you get four files. 00:06:43.876 --> 00:06:48.136 align:middle The only important ones yet are the app.js and app.css. 00:06:48.136 --> 00:06:51.446 align:middle What happened was: we told the Webpack to look at our app.js file. 00:06:52.036 --> 00:06:55.486 align:middle It follows all of the require statements: all the JavaScript we required, 00:06:55.796 --> 00:07:00.606 align:middle all of the CSS we required, and got all of that JavaScript and CSS, 00:07:00.926 --> 00:07:04.646 align:middle and it finally writes one app.js, and one app.css file. 00:07:05.226 --> 00:07:09.266 align:middle Then we just need to include those in our template, completely like normal. 00:07:09.866 --> 00:07:20.226 align:middle In some ways, I want this to seem very underwhelming, very boring. 00:07:20.266 --> 00:07:23.346 align:middle Okay, cool, you pointed at this file, and it outputs these files. 00:07:23.656 --> 00:07:24.136 align:middle Excellent. 00:07:24.546 --> 00:07:26.346 align:middle But this is massively important. 00:07:26.636 --> 00:07:31.546 align:middle We could stop the presentation right now, because this gives you the ability 00:07:31.866 --> 00:07:34.286 align:middle to have require statements in your JavaScript! 00:07:35.046 --> 00:07:39.396 align:middle Which means if you have a file and you want to maybe split it into two pieces, 00:07:39.966 --> 00:07:44.636 align:middle re-factor your code like we would do in PHP, before, we would maybe not do that. 00:07:45.226 --> 00:07:48.776 align:middle Because if you split your JavaScript into two files, you have to add another script tag, 00:07:49.276 --> 00:07:53.346 align:middle or you need to go into some build system and remember to say, oh, 00:07:53.346 --> 00:07:56.306 align:middle now concatenate this file too, make sure they are 00:07:56.306 --> 00:07:58.676 align:middle in the correct order, all that kind of thing. 00:07:58.676 --> 00:08:00.196 align:middle It just didn't make sense. 00:08:00.196 --> 00:08:03.636 align:middle It was difficult to split your files. 00:08:03.636 --> 00:08:06.066 align:middle With Webpack, you can actually program correctly. 00:08:06.266 --> 00:08:11.256 align:middle You don't think about the packaging of your files, you just think about: if I'm in one file, 00:08:11.746 --> 00:08:14.466 align:middle and I'd like to use another file, I require it. 00:08:15.736 --> 00:08:20.196 align:middle Very much like, again, I don't mean this to make it sound like the require statement is old, 00:08:20.626 --> 00:08:23.076 align:middle but in PHP, very much like we used to do in PHP. 00:08:23.176 --> 00:08:25.666 align:middle If you needed something, you required that file instead 00:08:25.666 --> 00:08:28.156 align:middle of just expecting it to be globally available. 00:08:29.076 --> 00:08:35.236 align:middle I'm going to put up a couple of best practices guides through using Encore. 00:08:35.686 --> 00:08:38.816 align:middle The first one, as you've seen, is you need to think of your CSS 00:08:38.816 --> 00:08:42.566 align:middle as a dependency of your JavaScript app. 00:08:42.566 --> 00:08:44.956 align:middle The same way the, that if you were in a JavaScript file, 00:08:45.356 --> 00:08:48.976 align:middle and you need another JavaScript file, you add the require statement. 00:08:49.046 --> 00:08:50.026 align:middle That's a dependency. 00:08:50.306 --> 00:08:52.116 align:middle Do the exact same thing with CSS. 00:08:52.446 --> 00:08:58.736 align:middle You say, in this JavaScript file, in order for the page to truly work, I need this CSS file. 00:08:58.986 --> 00:09:00.476 align:middle So, you require it. 00:09:00.746 --> 00:09:06.946 align:middle Another best practice is, and this is exactly what we've seen so far, 00:09:07.416 --> 00:09:09.106 align:middle is that you should have one entry, 00:09:09.106 --> 00:09:13.636 align:middle that means one source JavaScript file that's going to live in your layout. 00:09:13.966 --> 00:09:17.936 align:middle It's not a rule, but this is a best practice. 00:09:18.136 --> 00:09:21.076 align:middle This is exactly what we're doing right now, we have an app.js file, 00:09:21.486 --> 00:09:25.566 align:middle and that app.js file is included in our base.html.twig. 00:09:25.826 --> 00:09:31.276 align:middle It contains all of the global JavaScript and global CSS that we need for our site. 00:09:32.096 --> 00:09:38.456 align:middle Later, we'll talk about page-specific JavaScript and CSS. 00:09:38.636 --> 00:09:42.396 align:middle The game-changing feature is that require statement. 00:09:42.506 --> 00:09:44.076 align:middle The ability to have that require statement. 00:09:44.076 --> 00:09:50.116 align:middle Which by the way is called, as soon as you start using require statements in JavaScript, 00:09:50.376 --> 00:09:53.056 align:middle suddenly your JavaScript files are called modules. 00:09:53.056 --> 00:10:02.376 align:middle When you hear module, it's just basically a JavaScript file that works in this system. 00:10:02.376 --> 00:10:08.456 align:middle This is just a simple example of how I would maybe re-factor my code. 00:10:08.456 --> 00:10:11.386 align:middle You have the app.js on top, and then I'm just going 00:10:11.386 --> 00:10:13.686 align:middle to require another file and use its function. 00:10:14.036 --> 00:10:18.656 align:middle The key thing is, in the second file, is the module.exports. 00:10:18.656 --> 00:10:22.196 align:middle In PHP, when you used require statements, you would just require a file, 00:10:22.496 --> 00:10:26.016 align:middle and just receive whatever is inside that file. 00:10:26.716 --> 00:10:30.036 align:middle That's not the case with JavaScript, or Node. 00:10:30.266 --> 00:10:31.876 align:middle You actually need to export something. 00:10:32.326 --> 00:10:34.566 align:middle You need to say, I want to export this function, 00:10:34.566 --> 00:10:37.276 align:middle or I want to export this object, or something like that. 00:10:37.636 --> 00:10:41.966 align:middle We're exporting that function, and then we require it to import it. 00:10:41.966 --> 00:10:45.016 align:middle Notice there is no .js on the random word, 00:10:45.596 --> 00:10:50.906 align:middle and that's just because JavaScript people really like making you be lazy. 00:10:51.316 --> 00:10:54.116 align:middle You can put the .js on the filename, but you don't need to. 00:10:54.736 --> 00:10:59.066 align:middle That's why you see it not there. 00:10:59.506 --> 00:11:03.616 align:middle Or, to make things a little bit more complicated, interesting. 00:11:04.006 --> 00:11:08.796 align:middle You see the require statement a lot, but the require statement is not cool anymore. 00:11:09.606 --> 00:11:13.226 align:middle You're supposed to now use this import keyword, and this export keyword. 00:11:13.886 --> 00:11:17.996 align:middle The reason I'm telling you this is so that you know that they are exactly the same. 00:11:18.886 --> 00:11:21.196 align:middle They are just two syntaxes that do the exact same thing. 00:11:21.466 --> 00:11:25.626 align:middle The import and export is actually more of a standard, so that's the one you should use. 00:11:25.926 --> 00:11:30.746 align:middle It has a little bit more flexibility, but really, they do the same thing. 00:11:31.026 --> 00:11:33.536 align:middle I'll typically use import and export. 00:11:33.786 --> 00:11:36.946 align:middle It's all the same thing. 00:11:37.126 --> 00:11:41.916 align:middle The best-practice now is to basically program like you would PHP. 00:11:41.916 --> 00:11:44.416 align:middle To organize your code into modules. 00:11:44.416 --> 00:11:47.946 align:middle In Symfony, we would organize our code into service classes 00:11:48.156 --> 00:11:50.586 align:middle to be well-organized, you can even unit test them. 00:11:50.906 --> 00:11:52.236 align:middle It's the same thing in JavaScript now. 00:11:52.666 --> 00:11:56.946 align:middle It's like: okay, I have this function or this object with some useful functions on it, 00:11:57.266 --> 00:12:00.106 align:middle let's just put that in its own file so that it's organized better. 00:12:00.266 --> 00:12:05.086 align:middle We can reuse it, and then we can just require it from wherever we need it. 00:12:05.316 --> 00:12:09.216 align:middle Here's a slightly more complex example. 00:12:09.216 --> 00:12:13.136 align:middle This is a file that's going to just call a function, 00:12:13.626 --> 00:12:15.666 align:middle but it's requiring this displayRandomWord. 00:12:16.056 --> 00:12:18.506 align:middle Okay, let's look at displayRandomWord. 00:12:19.316 --> 00:12:20.596 align:middle That's just another function. 00:12:20.886 --> 00:12:25.996 align:middle Sorry, that exports a function, but it imports another file, 00:12:26.056 --> 00:12:31.316 align:middle and that last file is actually another function which actually gives us the random word. 00:12:31.956 --> 00:12:35.366 align:middle Just an example of the type of thing we would do in PHP typically: 00:12:35.366 --> 00:12:37.566 align:middle isolate these things into small pieces. 00:12:38.196 --> 00:12:40.426 align:middle Ah, but there's a problem. 00:12:41.276 --> 00:12:43.916 align:middle We've already talked about this. 00:12:43.916 --> 00:12:44.786 align:middle CSS dependencies. 00:12:45.316 --> 00:12:48.736 align:middle Actually, let me go back real quick. 00:12:48.736 --> 00:12:52.446 align:middle This works great, but now I'm going to re-factor my code 00:12:52.676 --> 00:12:57.096 align:middle so that the displayRandomWord() function is now going to output HTML, 00:12:57.396 --> 00:12:59.726 align:middle and that HTML is going to have some classes on it. 00:13:00.046 --> 00:13:04.726 align:middle And dang it, I need to bring in the CSS file to style those classes. 00:13:06.546 --> 00:13:11.366 align:middle What we could do, because, remember our app.js file requires app.css, 00:13:11.366 --> 00:13:15.726 align:middle we could just go into app.css and add our class there. 00:13:16.376 --> 00:13:18.526 align:middle That would make it into the final file. 00:13:19.916 --> 00:13:21.696 align:middle But we can dobetter than that. 00:13:22.166 --> 00:13:25.866 align:middle A better way is to actually isolate this into its own CSS file 00:13:26.266 --> 00:13:28.536 align:middle and require it directly from that module. 00:13:29.436 --> 00:13:33.756 align:middle What I'm saying here is: you'll typically see your main JavaScript file, 00:13:33.956 --> 00:13:36.586 align:middle app.js, require a CSS file. 00:13:37.186 --> 00:13:41.856 align:middle That doesn't mean that okay, great, let's put all of our CSS into that one file. 00:13:42.256 --> 00:13:44.336 align:middle No, we can actually break things down. 00:13:44.336 --> 00:13:48.736 align:middle We can have some very, very deep module - you don't even know what page it's going to be used 00:13:48.736 --> 00:13:54.096 align:middle on - but if that one module needs some CSS, like this, then require the CSS file. 00:13:55.086 --> 00:13:59.866 align:middle Then, no matter who uses this, you don't even care what page it's going to be used on, 00:13:59.946 --> 00:14:03.586 align:middle the CSS for that module is going to be included in the final output CSS. 00:14:03.616 --> 00:14:06.086 align:middle Again, it's programming correctly. 00:14:06.526 --> 00:14:07.386 align:middle That's all it is. 00:14:07.926 --> 00:14:10.446 align:middle You're actually defining all of your requirements 00:14:10.446 --> 00:14:13.966 align:middle and dependencies in each little file. 00:14:15.436 --> 00:14:21.446 align:middle The way you need to think about it is that each module, each file, is its own unique snowflake. 00:14:21.446 --> 00:14:23.496 align:middle Its own unique environment. 00:14:23.496 --> 00:14:30.146 align:middle When you look at a file, guys, I'm going to keep saying this, it's just like we program in PHP. 00:14:30.146 --> 00:14:36.786 align:middle If you went into it a file in PHP, you would never make any assumptions 00:14:36.786 --> 00:14:40.746 align:middle about what variables are available to you, or anything like that. 00:14:41.066 --> 00:14:45.456 align:middle If you need something inside of a class in PHP, you would make sure 00:14:45.456 --> 00:14:48.596 align:middle that you add a use statement, or use dependency injection, or something. 00:14:48.986 --> 00:14:50.486 align:middle It's the same thing with these modules. 00:14:50.736 --> 00:14:52.896 align:middle If you need something in a module, require it. 00:14:53.106 --> 00:14:56.976 align:middle Don't think: oh, it's okay, that CSS has already been required 00:14:56.976 --> 00:15:00.256 align:middle by this other module, which will be on the same page. 00:15:00.516 --> 00:15:01.396 align:middle That's bad. 00:15:01.966 --> 00:15:04.066 align:middle Put everything you need inside that one file. 00:15:04.136 --> 00:15:10.546 align:middle To make things actually even a little more complicated, this is so cool, I love this, 00:15:10.946 --> 00:15:15.696 align:middle now I've taken that same CSS file, which is required by one of my JavaScript files, 00:15:16.036 --> 00:15:18.516 align:middle and now I need to point to a font file. 00:15:19.976 --> 00:15:21.616 align:middle Okay, what happens when we do that? 00:15:22.816 --> 00:15:23.626 align:middle It just works. 00:15:25.096 --> 00:15:29.036 align:middle Because Webpack is going to notice that you're referring to that font file, 00:15:29.536 --> 00:15:35.046 align:middle it's going to move it into the build directory for you, and the final output CSS is going 00:15:35.166 --> 00:15:38.046 align:middle to have the correct path to point to that font file. 00:15:38.716 --> 00:15:43.836 align:middle In fact, to Webpack, this looks like a require statement! 00:15:44.406 --> 00:15:48.466 align:middle It actually sees this, and it looks, to it, like you're requiring a font file. 00:15:48.976 --> 00:15:51.396 align:middle And so it says: oh, how do I handle font files? 00:15:51.656 --> 00:15:54.476 align:middle I move them into the build directory and make sure the path is set. 00:15:54.966 --> 00:15:58.766 align:middle The font file is a dependency of your CSS file. 00:15:59.796 --> 00:16:02.886 align:middle In your CSS files you can use the @import syntax. 00:16:02.886 --> 00:16:07.126 align:middle In the top of some CSS file, you could say @import another CSS file. 00:16:07.556 --> 00:16:10.386 align:middle That's going to be read and parsed in exactly the same way. 00:16:10.846 --> 00:16:14.246 align:middle You could be in a CSS file and @import a SASS file, 00:16:14.776 --> 00:16:21.266 align:middle and that's going to go get processed just fine, and get processed through SASS. 00:16:21.416 --> 00:16:22.576 align:middle Alright, so cool story. 00:16:22.576 --> 00:16:27.896 align:middle But, so far, we've only been talking about one file, one app.js file. 00:16:28.096 --> 00:16:32.166 align:middle More like we have one JavaScript file that we include on our entire site. 00:16:32.616 --> 00:16:38.256 align:middle A lot of us still have multiple pages, so you have page=specific JavaScript. 00:16:38.256 --> 00:16:40.106 align:middle You have your main JavaScript and CSS, 00:16:40.436 --> 00:16:46.216 align:middle but let's say on your checkout page you have some pretty big JavaScript you don't want to put 00:16:46.216 --> 00:16:48.946 align:middle into your main JavaScript, because it's only needed on this one page. 00:16:49.416 --> 00:16:53.586 align:middle Okay, so now we're going to create a second file, checkout.js next to app.js. 00:16:54.456 --> 00:16:56.786 align:middle Same thing: we'll import the CSS we need. 00:16:57.116 --> 00:17:00.566 align:middle We'll import any JavaScript we need, write some code. 00:17:00.656 --> 00:17:05.316 align:middle This is just fake code, but you guys get the idea. 00:17:05.566 --> 00:17:07.906 align:middle Then we're going to go back into our Webpack config file. 00:17:08.876 --> 00:17:11.596 align:middle Remember, we haven't done much in this file yet. 00:17:11.596 --> 00:17:15.216 align:middle And we're going to add a second entry. 00:17:15.216 --> 00:17:17.146 align:middle An entry is an important concept in Webpack. 00:17:18.136 --> 00:17:26.316 align:middle Let's see here, and every entry results in one output JavaScript file and one output CSS file. 00:17:26.396 --> 00:17:29.126 align:middle The result of this, since we added an entry called checkout, 00:17:29.836 --> 00:17:32.426 align:middle is that we end up with a checkout.js with all the JavaScript we need, 00:17:32.426 --> 00:17:34.946 align:middle and checkout.css with all the CSS we need. 00:17:35.556 --> 00:17:38.536 align:middle Then we just need to make sure that we put that on the checkout page. 00:17:38.706 --> 00:17:42.776 align:middle Inside of our checkout template, we're going to add a script tag for the one file, 00:17:42.956 --> 00:17:45.586 align:middle and a CSS link tag for the one CSS file. 00:17:47.026 --> 00:17:52.806 align:middle The guidance on this is that, and of course, this is not an absolute rule, 00:17:52.846 --> 00:17:57.726 align:middle but if you're looking for general guidance, this is how I do it: is to treat each entry ... 00:17:58.136 --> 00:18:03.766 align:middle Well actually, let me say this a different way. 00:18:03.876 --> 00:18:07.356 align:middle Each page that needs its own JavaScript is going to get its own entry. 00:18:07.956 --> 00:18:12.656 align:middle It's going to mean, in practice, that every page is going to have the main entry, 00:18:12.916 --> 00:18:16.246 align:middle the app.js file that's in your layout, and if you need it, 00:18:16.246 --> 00:18:18.946 align:middle one other entry for that page-specific JavaScript. 00:18:19.506 --> 00:18:23.246 align:middle That entry file should contain all of the JavaScript, and all the CSS needed 00:18:23.356 --> 00:18:26.036 align:middle to power everything on your checkout page. 00:18:26.616 --> 00:18:32.936 align:middle The other thing is, that each entry, this is how Webpack wants you to think about it, 00:18:33.066 --> 00:18:34.886 align:middle is its own standalone application. 00:18:35.496 --> 00:18:40.386 align:middle The Webpack, the authors of Webpack do a lot of single page apps, so they almost think 00:18:40.386 --> 00:18:42.636 align:middle of every JavaScript file as a single page app. 00:18:43.206 --> 00:18:48.126 align:middle You want to think of your checkout.js as its own app, which means that you need to, 00:18:48.126 --> 00:18:49.966 align:middle once again, require everything you need. 00:18:49.966 --> 00:18:52.886 align:middle If you need CSS require it, if you need some external library, require it. 00:18:52.886 --> 00:18:54.786 align:middle It's its own isolated environment. 00:18:55.186 --> 00:18:58.576 align:middle It's different than before when we think about: I'll include some script tags, 00:18:58.946 --> 00:19:02.486 align:middle and then these script tags will refer to some stuff that these script tags did. 00:19:02.806 --> 00:19:04.856 align:middle They're really two isolated environments. 00:19:06.096 --> 00:19:09.666 align:middle Alright, so I want to talk a little bit about jQuery in case you're using it. 00:19:09.666 --> 00:19:12.046 align:middle Because jQuery is actually where things get weird. 00:19:12.256 --> 00:19:16.826 align:middle Actually, jQuery is also, because things get weird with jQuery, it's also a great example 00:19:16.826 --> 00:19:20.496 align:middle to understand how Webpack is doing some things internally. 00:19:21.836 --> 00:19:23.136 align:middle Okay, so you want to use jQuery. 00:19:23.646 --> 00:19:27.836 align:middle This is one of the best things about the new way of developing. 00:19:28.566 --> 00:19:32.656 align:middle If you want jQuery, you just add it: yarn add jquery -- dev. 00:19:32.656 --> 00:19:36.466 align:middle Just add it: just like we composer require stuff. 00:19:36.466 --> 00:19:38.876 align:middle We don't need to download, go download something. 00:19:38.876 --> 00:19:40.056 align:middle We don't need to find a CDN. 00:19:40.056 --> 00:19:42.086 align:middle You just add it. 00:19:42.086 --> 00:19:44.616 align:middle Then you just require it or import it. 00:19:44.816 --> 00:19:46.276 align:middle That's it. 00:19:46.446 --> 00:19:47.316 align:middle This is really great. 00:19:47.316 --> 00:19:50.776 align:middle Outside libraries are just actually very, very easy to use. 00:19:51.286 --> 00:19:53.236 align:middle This is not the problem with jQuery. 00:19:54.406 --> 00:20:00.266 align:middle This would work just fine. 00:20:01.106 --> 00:20:04.876 align:middle Anytime you import a module that does not start with a . 00:20:05.386 --> 00:20:07.346 align:middle /, it's importing it from the node_modules directory. 00:20:07.346 --> 00:20:10.546 align:middle If you are importing a local file, you've noticed I'm probably using . 00:20:10.546 --> 00:20:13.036 align:middle / before: that means a file next to me. 00:20:13.276 --> 00:20:13.666 align:middle If there's no . 00:20:13.666 --> 00:20:15.766 align:middle /, it's coming from the node_modules directory. 00:20:17.346 --> 00:20:22.076 align:middle jQuery is just like any other module, or React, or Vue. 00:20:22.076 --> 00:20:25.336 align:middle These are just modules: and you just require them, and they work like normal. 00:20:26.656 --> 00:20:35.166 align:middle Here's a key thing though, what's the difference between importing $ from jQuery and a script tag 00:20:35.546 --> 00:20:37.086 align:middle that you put in your layout for jQuery? 00:20:37.596 --> 00:20:39.566 align:middle The answer is ... 00:20:40.706 --> 00:20:41.276 align:middle everything. 00:20:42.426 --> 00:20:46.376 align:middle Even if that is literally pointing to the same file! 00:20:47.586 --> 00:20:54.776 align:middle Because, inside jQuery, and this is common to many, many modules, 00:20:54.776 --> 00:20:58.706 align:middle this is not a jQuery-specific thing, inside jQuery, 00:20:58.706 --> 00:21:02.646 align:middle it detects how it's being used and changes its behavior. 00:21:03.406 --> 00:21:05.656 align:middle In Webpack, there are no global variables. 00:21:06.206 --> 00:21:09.126 align:middle Okay, just like PHP you can cheat and make global variables. 00:21:09.126 --> 00:21:12.286 align:middle But if you're programming things correctly, there are no global variables. 00:21:12.596 --> 00:21:15.456 align:middle When we include a script tag on the page, what does that do? 00:21:15.696 --> 00:21:18.196 align:middle It gives us a global jQuery variable. 00:21:18.896 --> 00:21:25.866 align:middle If you require it, it detects that, and it uses the module.exports: it returns a value. 00:21:26.136 --> 00:21:28.306 align:middle It does not actually give us a global variable. 00:21:29.856 --> 00:21:34.196 align:middle The key thing here is that most JavaScript libraries are going 00:21:34.196 --> 00:21:36.546 align:middle to change their behavior based on how they're being imported. 00:21:36.546 --> 00:21:39.496 align:middle It's just something that you need to understand as you're going 00:21:39.496 --> 00:21:42.416 align:middle from the old way to the new way of doing things. 00:21:43.726 --> 00:21:51.096 align:middle A few minutes ago I talked about how you want your entry files, your application 00:21:51.096 --> 00:21:54.526 align:middle and your checkouts.js to function like two separate applications. 00:21:54.876 --> 00:21:56.566 align:middle This is interesting. 00:21:56.566 --> 00:22:04.866 align:middle If we import $ from 'jquery' in app.js, and its script tag is included first, 00:22:05.876 --> 00:22:11.456 align:middle and then in checkout.js we don't import it, but we just start using it, is that going to work? 00:22:12.816 --> 00:22:14.706 align:middle No. It's not going to work. 00:22:14.706 --> 00:22:15.486 align:middle Beautifully. 00:22:15.486 --> 00:22:21.826 align:middle That's going to be an "undefined variable $ in checkout.js": it's an uninitialized variable. 00:22:22.086 --> 00:22:24.006 align:middle In PHP, we would never expect that to work. 00:22:24.236 --> 00:22:25.286 align:middle It's not going to work. 00:22:25.286 --> 00:22:26.586 align:middle That is excellent. 00:22:27.106 --> 00:22:32.426 align:middle This actually is little bit more interesting. 00:22:32.826 --> 00:22:33.916 align:middle Well actually, it's the same thing. 00:22:33.916 --> 00:22:35.266 align:middle Is this going to work? 00:22:35.266 --> 00:22:39.356 align:middle What I changed here is: okay, can I use the $ in maybe a template? 00:22:39.356 --> 00:22:43.746 align:middle I just need, hey, I'm getting lazy, and I need to put a script tag in my template. 00:22:43.746 --> 00:22:45.146 align:middle Is that going to work? 00:22:46.186 --> 00:22:51.206 align:middle Nope. Same thing, there's no global variable, so that's not going to work either. 00:22:51.536 --> 00:22:54.996 align:middle One of the effects of using Webpack is 00:22:54.996 --> 00:22:58.316 align:middle that you will now have no JavaScript code in your template. 00:22:58.896 --> 00:23:03.256 align:middle Yes, we were always supposed to do that but we got busy, and lazy, 00:23:03.256 --> 00:23:08.216 align:middle and cheated etc. It's really not possible because you don't have any global variables. 00:23:08.636 --> 00:23:10.046 align:middle Now yes, you can cheat. 00:23:10.166 --> 00:23:14.396 align:middle In our tutorial on Encore we talk about that. 00:23:14.696 --> 00:23:19.846 align:middle When we upgraded SymfonyCasts to this, we actually set jQuery as a global variable, 00:23:19.846 --> 00:23:22.996 align:middle a true global variable, so that our legacy JavaScript would work. 00:23:23.536 --> 00:23:26.326 align:middle So that way, we didn't need to update everything all at once. 00:23:26.326 --> 00:23:29.316 align:middle Yes, you can work around this as you're updating your application. 00:23:29.746 --> 00:23:34.796 align:middle jQuery plug-ins are actually where things get truly weird. 00:23:35.286 --> 00:23:37.906 align:middle The weird thing about jQuery plug-ins, so bootstrap, 00:23:37.906 --> 00:23:43.856 align:middle I'm talking about the Bootstrap's JavaScript, it has some jQuery plug-ins in it, like tooltip. 00:23:44.966 --> 00:23:47.916 align:middle The weird thing about jQuery plug-ins is that they don't return anything. 00:23:48.216 --> 00:23:52.346 align:middle They modify jQuery and add something to it. 00:23:53.146 --> 00:23:58.836 align:middle They work fine with Webpack, but they're clearly from a universe that existed before webpack. 00:23:59.336 --> 00:24:00.496 align:middle Because it's just weird. 00:24:00.496 --> 00:24:05.166 align:middle It's weird to just import bootstrap and suddenly we have a tooltip() function. 00:24:05.216 --> 00:24:12.636 align:middle It doesn't look obvious. 00:24:13.456 --> 00:24:17.526 align:middle Internally, how does it do that? 00:24:17.526 --> 00:24:21.806 align:middle jQuery plug-ins, again, behave differently based on their environment. 00:24:21.806 --> 00:24:23.816 align:middle This is very important. 00:24:24.366 --> 00:24:28.596 align:middle If you think about the normal script tags, if you have a script tag for jQuery, 00:24:28.596 --> 00:24:31.316 align:middle then a script tag for bootstrap, how does bootstrap know 00:24:31.316 --> 00:24:34.196 align:middle where to find jQuery so that it can modify it? 00:24:34.656 --> 00:24:37.736 align:middle It only has one option, expect it to be a global variable. 00:24:37.946 --> 00:24:41.156 align:middle It just looks for jQuery as a global variable and it modifies it. 00:24:41.516 --> 00:24:46.886 align:middle Fortunately, most modern libraries, most modern jQuery plug-ins now have code 00:24:46.886 --> 00:24:47.586 align:middle that looks like this. 00:24:48.056 --> 00:24:53.096 align:middle Where again, they detect their environment and they go: okay, I'm in a Webpack environment. 00:24:53.216 --> 00:24:54.116 align:middle What do they do? 00:24:54.466 --> 00:24:56.366 align:middle They actually require jQuery! 00:24:56.366 --> 00:24:59.586 align:middle One of the properties of the module system is 00:24:59.586 --> 00:25:03.756 align:middle that if two files require the same file, they get the same thing. 00:25:04.036 --> 00:25:05.486 align:middle It's a bit like Symfony's container. 00:25:05.956 --> 00:25:08.936 align:middle They'll get the same one instance of jQuery. 00:25:08.936 --> 00:25:11.006 align:middle It will actually modify jQuery. 00:25:12.306 --> 00:25:17.186 align:middle Now, not all plug-ins are written correctly though. 00:25:17.186 --> 00:25:19.066 align:middle Here's a example. 00:25:19.376 --> 00:25:23.586 align:middle This is just a silly jQuery plug-in I found, tagsinput. 00:25:23.946 --> 00:25:27.426 align:middle The cool thing is I can say yarn add, so I can just add this to my project 00:25:27.426 --> 00:25:29.556 align:middle by saying yarn add jquery-tags-input. 00:25:30.056 --> 00:25:32.796 align:middle Great. I'm going to import the JavaScript file. 00:25:33.386 --> 00:25:36.156 align:middle That, in theory, will give me a tagsInput() function. 00:25:36.826 --> 00:25:38.516 align:middle Also, this is a really cool thing. 00:25:38.516 --> 00:25:42.276 align:middle It's very common to have a JavaScript library that also has CSS with it. 00:25:42.706 --> 00:25:46.116 align:middle So normally we have to add one script tag and remember to go add the link tag. 00:25:46.516 --> 00:25:51.236 align:middle Now I just require the CSS file, and you're done. 00:25:51.676 --> 00:25:56.276 align:middle In this case, when you have the name of the module then / a path, 00:25:56.556 --> 00:25:57.806 align:middle it's just literally pointing 00:25:57.806 --> 00:26:01.866 align:middle at node_modules/that directory/ the path of the CSS file. 00:26:02.326 --> 00:26:07.416 align:middle Sometimes you have to do a little digging to be like, what's the path to the CSS file? 00:26:07.826 --> 00:26:10.206 align:middle Once you find the path, you just require it. 00:26:11.666 --> 00:26:13.206 align:middle Done. This doesn't work. 00:26:13.676 --> 00:26:18.636 align:middle We did the exact same thing as we did a second ago with bootstrap, but it doesn't work. 00:26:19.216 --> 00:26:21.076 align:middle So you get jQuery is not defined. 00:26:21.996 --> 00:26:26.806 align:middle The reason is that, inside that module, it basically has code that looks like this. 00:26:27.306 --> 00:26:28.616 align:middle It just goes, jQuery. 00:26:29.276 --> 00:26:30.286 align:middle It just, hey, jQuery. 00:26:30.286 --> 00:26:32.776 align:middle It just expects it to be a global variable. 00:26:32.776 --> 00:26:34.296 align:middle And it's not anymore. 00:26:34.426 --> 00:26:36.046 align:middle This is still written the old way. 00:26:36.406 --> 00:26:41.266 align:middle It has no code in it to make itself work in a module environment. 00:26:41.416 --> 00:26:41.886 align:middle It's broken. 00:26:42.766 --> 00:26:47.736 align:middle This is probably the most common and consistent question we get about Encore. 00:26:47.736 --> 00:26:49.846 align:middle It's not even an Encore thing, it's just a Webpack thing. 00:26:49.846 --> 00:26:54.336 align:middle It's important to understand how these jQuery plug-ins work, how they load, 00:26:54.336 --> 00:26:56.066 align:middle so that you can debug what's going on. 00:26:56.786 --> 00:26:59.156 align:middle Ok so how do we fix that? 00:27:00.116 --> 00:27:03.176 align:middle Magic. We go back to our webpack config file, 00:27:03.616 --> 00:27:06.496 align:middle and we add one new line called .autoProvidejQuery(). 00:27:07.116 --> 00:27:08.626 align:middle This is incredible. 00:27:09.366 --> 00:27:15.336 align:middle And that function is an Encore feature, but anything in Encore, 00:27:15.336 --> 00:27:16.906 align:middle we're just leveraging features in Webpack. 00:27:16.906 --> 00:27:18.476 align:middle This is just leveraging a feature in Webpack. 00:27:18.756 --> 00:27:19.736 align:middle So what does this do? 00:27:20.246 --> 00:27:22.606 align:middle It rewrites the bad code. 00:27:23.316 --> 00:27:27.976 align:middle It literally, as it's going through all of the JavaScript files that you are working with, 00:27:28.666 --> 00:27:33.926 align:middle if it ever finds a jQuery variable that has not been initialized, 00:27:34.966 --> 00:27:40.616 align:middle it replaces it with require('jquery') and puts that in the output. 00:27:41.166 --> 00:27:41.766 align:middle Yeah, right? 00:27:42.496 --> 00:27:43.346 align:middle It's incredible. 00:27:43.816 --> 00:27:50.196 align:middle This fixes it, and all of a sudden you can use these old things. 00:27:50.196 --> 00:27:53.036 align:middle Brilliant, we fixed somebody else's bad code! 00:27:53.606 --> 00:27:57.726 align:middle Be careful, because now we can write bad code too. 00:27:57.726 --> 00:28:02.426 align:middle This is now possible, so this is the downside of .autoProvidejQuery(). 00:28:02.426 --> 00:28:03.866 align:middle So, don't turn it on if you don't need it. 00:28:04.276 --> 00:28:09.206 align:middle It now means you can go into any file and just start saying $, or jQuery. 00:28:09.406 --> 00:28:12.916 align:middle You can instantly start programming the old way with undefined variables. 00:28:13.236 --> 00:28:17.516 align:middle And Yay, Encore will also fix our bad code. 00:28:18.386 --> 00:28:24.216 align:middle If you turn it on, try to not do this, even though you can. 00:28:24.216 --> 00:28:26.586 align:middle This is important, if I'm in a Twig template, 00:28:26.736 --> 00:28:30.596 align:middle and I put an inline script tag, that still does not work. 00:28:30.936 --> 00:28:36.116 align:middle Because .autoProvidejQuery() does not give you a global jQuery variable. 00:28:36.536 --> 00:28:40.476 align:middle It rewrites any code that's processed by Webpack. 00:28:40.476 --> 00:28:44.396 align:middle If you just have some random Twig template, there is still no $ variable. 00:28:45.346 --> 00:28:53.726 align:middle This is just a repeat from earlier, even if you can cheat with the autoProvidejQuery() plug-in, 00:28:54.096 --> 00:28:58.996 align:middle remember that each file is its own environment, so remember to require it. 00:28:59.296 --> 00:29:04.976 align:middle This is another thing, so a couple of lessons from the past year that we've seen people do. 00:29:05.626 --> 00:29:11.126 align:middle How many people have had applications that look like this? 00:29:11.786 --> 00:29:13.536 align:middle Yeah, yeah, me too, yes. 00:29:13.776 --> 00:29:15.506 align:middle Because this is how we used to program. 00:29:15.846 --> 00:29:21.216 align:middle Require shared, and that creates these five global variables, 00:29:21.216 --> 00:29:24.536 align:middle and these 10 global functions, and then vendor. 00:29:24.536 --> 00:29:26.856 align:middle Okay, now we have a jQuery global variable. 00:29:27.216 --> 00:29:30.976 align:middle We just build on top of each other by adding more and more global variables. 00:29:31.256 --> 00:29:35.076 align:middle Then we have some script on the bottom that actually uses these. 00:29:35.076 --> 00:29:41.806 align:middle I have seen people basically take their old setup and just move it directly into Webpack. 00:29:41.806 --> 00:29:47.626 align:middle I understand, every file that I have in my old application is just an entry file, right? 00:29:47.626 --> 00:29:51.446 align:middle Because this is going to basically result in the same output file. 00:29:51.446 --> 00:29:57.566 align:middle Yeah, first one requires a file, vendor is going to go actually require juery and react. 00:29:57.566 --> 00:29:59.496 align:middle Okay, good, this works, right? 00:29:59.496 --> 00:30:02.606 align:middle This does not work at all. 00:30:03.476 --> 00:30:08.586 align:middle Because what happens with that vendor entry, that vendor entry is going to require jquery. 00:30:09.836 --> 00:30:14.316 align:middle Good for you, you just basically gave yourself a jQuery variable and never used it. 00:30:15.046 --> 00:30:18.476 align:middle It's like calling a function, setting a variable, and then going to lunch. 00:30:18.866 --> 00:30:22.676 align:middle Because that doesn't set a global variable. 00:30:22.676 --> 00:30:26.706 align:middle That's why I don't follow this model, I follow the model of one entry per page. 00:30:26.706 --> 00:30:30.606 align:middle Think about your checkout page as its own JavaScript application. 00:30:30.936 --> 00:30:35.026 align:middle What is all the code that needs to go into this to build this JavaScript application? 00:30:36.386 --> 00:30:42.606 align:middle Another thing, another feature that we've had forever in Encore is the addStyleEntry(). 00:30:43.256 --> 00:30:48.126 align:middle That's a way for you to say, oh, I want an output file, but it's just CSS. 00:30:48.126 --> 00:30:49.366 align:middle I just need a CSS file. 00:30:49.766 --> 00:30:50.666 align:middle That's a hack. 00:30:51.016 --> 00:30:56.506 align:middle We added that as a way to make people more comfortable, but you shouldn't use it. 00:30:56.506 --> 00:31:00.536 align:middle By shouldn't, I mean it's not like a bug, buggy or something, 00:31:00.906 --> 00:31:04.896 align:middle it's just that if you're using that, you're probably not organizing your code correctly. 00:31:05.226 --> 00:31:10.556 align:middle Because your CSS just shouldn't be just some random, hey, I just need a CSS file. 00:31:10.996 --> 00:31:16.916 align:middle You should be thinking what: JavaScript file is this CSS a dependency of? 00:31:16.916 --> 00:31:23.796 align:middle In our app.js, we require the app.css file: this is the CSS that's needed for our layout, 00:31:23.796 --> 00:31:28.816 align:middle so we think of it as a dependency of the JavaScript file that's in our layout. 00:31:30.606 --> 00:31:34.686 align:middle Okay, now this is where things get really interesting and we're going to talk 00:31:34.686 --> 00:31:37.446 align:middle about some of the new features of Encore. 00:31:37.746 --> 00:31:41.876 align:middle I realize I'm running a little low on time, but I also realize there is a break afterwards. 00:31:41.876 --> 00:31:44.286 align:middle So sorry if I keep you for a few extra minutes. 00:31:45.406 --> 00:31:50.756 align:middle Alright, so Webpack says: hey, it's cool, just require stuff, 00:31:50.756 --> 00:31:54.356 align:middle I'll handle all the details, don't think about it. 00:31:54.506 --> 00:31:55.856 align:middle Really, it's like don't think about it. 00:31:55.856 --> 00:31:58.666 align:middle You just write code correctly, I'll take care of the rest. 00:31:58.666 --> 00:32:00.286 align:middle I'll build your files perfectly. 00:32:00.756 --> 00:32:05.536 align:middle Great Webpack, except, wow, those are pretty big files, 00:32:05.536 --> 00:32:09.386 align:middle those JavaScript files, yeah, 168 kilobytes. 00:32:09.466 --> 00:32:12.466 align:middle This is the development mode, so it gets smaller in production. 00:32:12.466 --> 00:32:14.436 align:middle But jeez, those are big. 00:32:14.436 --> 00:32:14.696 align:middle Because... 00:32:14.696 --> 00:32:17.226 align:middle we have so many jQueryies. 00:32:18.096 --> 00:32:21.476 align:middle Because we required jQuery from our app, and we require jQuery 00:32:21.476 --> 00:32:24.406 align:middle from our checkout, so what did webpack do? 00:32:25.036 --> 00:32:26.136 align:middle It put jQuery in both. 00:32:26.856 --> 00:32:30.166 align:middle Perfect! Except for performance on your front-end. 00:32:30.216 --> 00:32:32.866 align:middle How do we fix that? 00:32:33.286 --> 00:32:34.666 align:middle This is not the way we fix it anymore. 00:32:35.206 --> 00:32:37.296 align:middle I wanted to show you this because you'll see this. 00:32:37.296 --> 00:32:41.816 align:middle This is the way that we fixed this problem for the first year and half in Encore. 00:32:41.816 --> 00:32:43.826 align:middle Because this is the way that you fixed it in Webpack. 00:32:43.826 --> 00:32:46.116 align:middle Again, we're always leveraging Webpack features. 00:32:46.456 --> 00:32:50.936 align:middle Webpack 4 came out earlier this year and changed a lot of things. 00:32:51.126 --> 00:32:56.626 align:middle This is one of the features that is still available in Encore, 00:32:56.626 --> 00:32:59.326 align:middle but is not the recommended way to do it. 00:32:59.326 --> 00:33:06.466 align:middle Yeah, I'm not even going to talk about it, but this is a feature that existed before. 00:33:06.916 --> 00:33:13.006 align:middle It still exists, but don't use it. 00:33:13.006 --> 00:33:13.946 align:middle Now what? What we do now? 00:33:14.026 --> 00:33:15.256 align:middle I said don't use that feature. 00:33:15.836 --> 00:33:20.516 align:middle Okay, so introducing Webpack Encore 0.21.0. 00:33:20.746 --> 00:33:24.246 align:middle Wow, what a great version number for a big release! 00:33:24.596 --> 00:33:25.946 align:middle Wow, congratulations! 00:33:26.906 --> 00:33:29.216 align:middle This brought a lot of new stuff. 00:33:29.306 --> 00:33:30.666 align:middle Webpack 4 support. 00:33:30.706 --> 00:33:33.546 align:middle I'm going to talk about a few of these. 00:33:33.546 --> 00:33:37.026 align:middle I'll show you a couple of these, so I'm not going to mention all of them here. 00:33:37.246 --> 00:33:39.976 align:middle browserslist is a really good one. 00:33:39.976 --> 00:33:44.596 align:middle That allows you to put in your package.json file which browsers you need to support, 00:33:45.026 --> 00:33:49.026 align:middle and different parts of Webpack will know how to rewrite your code 00:33:49.026 --> 00:33:51.136 align:middle to be compatible with exactly those browsers. 00:33:51.486 --> 00:33:55.706 align:middle So, if you're using newer JavaScript features, or you need some vendor prefixing 00:33:55.706 --> 00:33:59.566 align:middle on some new CSS stuff, then it will automatically do that for you. 00:33:59.566 --> 00:34:00.696 align:middle Really, really cool. 00:34:01.376 --> 00:34:06.166 align:middle Webpack is always, and Encore has always done that rewriting, but it was more difficult before 00:34:06.166 --> 00:34:10.586 align:middle to control the exact browsers that you need for that. 00:34:10.586 --> 00:34:15.576 align:middle Yeah. The rest is not important, or we're going to talk about. 00:34:15.576 --> 00:34:19.766 align:middle Real quick, this is not that exciting, but I want you to understand what it does. 00:34:19.766 --> 00:34:21.196 align:middle There's a thing called a runtime chunk. 00:34:21.436 --> 00:34:26.936 align:middle By the way, "chunk" is what Webpack calls a JavaScript file more or less. 00:34:26.936 --> 00:34:28.676 align:middle When you see chunk, that's kind of what it means. 00:34:29.806 --> 00:34:33.986 align:middle This is a function that you can call now in your Webpack config file. 00:34:34.086 --> 00:34:35.656 align:middle Okay, cool, what does that do? 00:34:35.656 --> 00:34:40.126 align:middle It actually results in one additional file being output. 00:34:40.376 --> 00:34:41.776 align:middle A runtime.js. 00:34:42.026 --> 00:34:46.006 align:middle It now means that you actually need two script tags when you enable this. 00:34:47.356 --> 00:34:49.486 align:middle Why do we do that? 00:34:49.646 --> 00:34:50.706 align:middle There's two reasons. 00:34:51.026 --> 00:34:53.766 align:middle One is actually a little bit for performance. 00:34:53.766 --> 00:34:57.686 align:middle I don't want to get into the weeds too much. 00:34:58.246 --> 00:35:01.986 align:middle The runtime.js file contains some code that helps Webpack work. 00:35:02.616 --> 00:35:08.036 align:middle That code tends to change more often than your code, so by isolating it into its own file, 00:35:08.336 --> 00:35:13.746 align:middle your other files will change less often, and therefore can be cached longer by your users. 00:35:14.876 --> 00:35:20.856 align:middle It also has a side effect that when you have the runtime chunk, if you required jQuery 00:35:20.856 --> 00:35:25.566 align:middle from somewhere in app.js, and somewhere in checkout.js, they get the same object. 00:35:26.226 --> 00:35:31.706 align:middle Whereas, if you don't have that, your entries are so isolated that when you require jQuery, 00:35:31.706 --> 00:35:34.056 align:middle it's actually two separate objects. 00:35:34.056 --> 00:35:37.176 align:middle That may or may not be important to you. 00:35:37.726 --> 00:35:41.826 align:middle Oh yeah, I actually have an example of that. 00:35:41.826 --> 00:35:42.726 align:middle Will this work? 00:35:42.726 --> 00:35:45.646 align:middle I require bootstrap in app.js. 00:35:45.646 --> 00:35:48.636 align:middle Down in checkout.js, is there a tooltip function? 00:35:48.636 --> 00:35:52.866 align:middle We required bootstrap further up, right? 00:35:53.146 --> 00:35:54.006 align:middle Right? It depends. 00:35:54.496 --> 00:35:58.886 align:middle With enableSingleRuntimeChunk(), yes, because they're actually using the same jQuery object. 00:35:59.226 --> 00:36:03.266 align:middle With disableSingleRuntimeChunk(), no, they would be more isolated. 00:36:03.816 --> 00:36:05.066 align:middle It's not... 00:36:05.066 --> 00:36:06.126 align:middle what's wrong... 00:36:06.126 --> 00:36:07.376 align:middle enable is more convenient. 00:36:07.846 --> 00:36:12.426 align:middle Disable is actually a little more pure, because I said keep them isolated. 00:36:12.546 --> 00:36:15.956 align:middle It's up to you, I just want you to be aware of the decision there. 00:36:17.336 --> 00:36:17.876 align:middle Okay, cool. 00:36:17.876 --> 00:36:19.356 align:middle Back to optimizing our build. 00:36:19.356 --> 00:36:22.846 align:middle We're not going to do this createSharedEntry() thing anymore. 00:36:22.896 --> 00:36:28.986 align:middle We're going to go back to just, we have 2 entry files, or maybe 10 entry files. 00:36:29.336 --> 00:36:34.016 align:middle Cool. Now we're going to say .splitEntryChunks(). 00:36:34.626 --> 00:36:37.226 align:middle This is all you need to do to optimize your build. 00:36:37.226 --> 00:36:38.436 align:middle You don't need to think about anything. 00:36:39.016 --> 00:36:40.396 align:middle Just call that function. 00:36:41.056 --> 00:36:44.906 align:middle Okay, what does that do? 00:36:45.896 --> 00:36:51.136 align:middle That, when you run Encore now, you're going to get a little bit more output. 00:36:51.136 --> 00:36:53.356 align:middle And, if, you've probably never seen this before, 00:36:53.356 --> 00:36:57.116 align:middle but notice it says we have an entry point called app, and we have an entry point called checkout. 00:36:57.556 --> 00:36:59.526 align:middle Then it lists a bunch of files after each one. 00:37:00.206 --> 00:37:04.716 align:middle You'll notice after app, if you look, there's actually one, two, three, 00:37:04.716 --> 00:37:06.786 align:middle four JavaScript files listed after it. 00:37:07.486 --> 00:37:15.006 align:middle In order to get the app entry point to function, you now need four script tags. 00:37:16.586 --> 00:37:19.456 align:middle I know, yeah, I just got some looks like hmm? 00:37:20.096 --> 00:37:26.516 align:middle What happens with splitEntryChunks(), is when you enable that, you ask Webpack to look at all 00:37:26.516 --> 00:37:29.106 align:middle of the files you're requiring across all your entry points, 00:37:29.526 --> 00:37:33.526 align:middle identify code that you're duplicating between the two, 00:37:33.686 --> 00:37:38.506 align:middle and try to figure out the most optimum way to split that into multiple JavaScript files. 00:37:38.776 --> 00:37:40.436 align:middle It's really incredible how it does this. 00:37:40.436 --> 00:37:41.836 align:middle It takes into account your file size. 00:37:42.296 --> 00:37:45.636 align:middle If you have some shared code, but it's maybe like five kilobytes, 00:37:45.996 --> 00:37:49.876 align:middle it's not worth the extra web request to isolate that into a separate file. 00:37:50.316 --> 00:37:53.566 align:middle You can configure all this, so I'm just telling you the defaults. 00:37:53.876 --> 00:37:57.116 align:middle If it's above 30 kilobytes, I think that's the threshold that it decides 00:37:57.116 --> 00:37:58.496 align:middle that this is better in a separate file. 00:37:58.946 --> 00:38:03.666 align:middle It also distinguishes between your code and vendor code, things in node_modules, 00:38:03.926 --> 00:38:06.866 align:middle because it assumes that vendor code will change less often, 00:38:07.276 --> 00:38:10.196 align:middle so it tries to isolate the vendor code into its own file. 00:38:10.616 --> 00:38:12.026 align:middle Because that will change less often. 00:38:12.206 --> 00:38:15.896 align:middle Your users will, by isolating it, your users will be able to cache that longer 00:38:16.536 --> 00:38:17.876 align:middle because it's not going to change all the time. 00:38:18.086 --> 00:38:22.546 align:middle It's actually a pretty incredible algorithm it's using to figure out the optimum way to do this. 00:38:22.866 --> 00:38:28.056 align:middle It also recognizes that your browser will make, it's either three or four parallel requests 00:38:28.116 --> 00:38:29.776 align:middle to the same host at the same time. 00:38:30.146 --> 00:38:34.016 align:middle It will split it to a certain point, but it realizes that if it keeps splitting it, 00:38:34.296 --> 00:38:36.316 align:middle then your browser's actually going to be waiting 00:38:36.316 --> 00:38:40.246 align:middle to download the first few JavaScript files before it starts the other JavaScript files. 00:38:40.386 --> 00:38:44.336 align:middle Yeah, it looks kind of crazy at first, but it actually works really, really well. 00:38:44.986 --> 00:38:49.876 align:middle Of course, the problem is how do we know what script tags to include? 00:38:50.146 --> 00:38:54.016 align:middle Also, including four script tags, that seems like a real pain. 00:38:54.366 --> 00:38:56.656 align:middle Also, as you can tell, these are going to change. 00:38:56.656 --> 00:39:01.366 align:middle If you start doing something different, it's going to split it in a different way. 00:39:01.806 --> 00:39:08.126 align:middle So, introducing the newest bundle in the Symfony family, WebpackEncoreBundle. 00:39:09.216 --> 00:39:11.096 align:middle Amazing! Amazing! 00:39:11.096 --> 00:39:17.816 align:middle Wow. Probably the smallest bundle in all of the Symfony ecosystem. 00:39:18.516 --> 00:39:22.036 align:middle It gives you two Twig functions and that's it. 00:39:22.036 --> 00:39:23.176 align:middle It's super cool. 00:39:23.736 --> 00:39:27.786 align:middle Now you just say, encore_entry_link_tags(), you give it the name of your entry, 00:39:27.886 --> 00:39:31.726 align:middle and it's just going to include all of the link tags, because the CSS is also split. 00:39:31.976 --> 00:39:33.146 align:middle Then same thing with script tags. 00:39:33.146 --> 00:39:35.726 align:middle It will include all of the script tags you need for that. 00:39:35.726 --> 00:39:37.756 align:middle When they change, will just get output. 00:39:38.216 --> 00:39:38.956 align:middle How does that work? 00:39:39.186 --> 00:39:40.036 align:middle Magic? No. 00:39:40.126 --> 00:39:41.646 align:middle It's actually really boring. 00:39:41.746 --> 00:39:44.546 align:middle Oh, and same thing: checkout, include the checkout. 00:39:45.096 --> 00:39:50.576 align:middle It works because Encore dumps a file called entrypoints.json that looks like this. 00:39:50.766 --> 00:39:53.376 align:middle Just dumps exactly which files are needed for every entry point. 00:39:53.556 --> 00:39:56.036 align:middle That bundle just reads those and it works. 00:39:57.016 --> 00:40:00.426 align:middle This means that you just enable .splitEntryChunks() and you don't care. 00:40:00.606 --> 00:40:02.236 align:middle Things get split into pieces. 00:40:02.236 --> 00:40:06.396 align:middle It re-optimizes itself as you do different, keep coding and make more builds. 00:40:07.026 --> 00:40:07.926 align:middle Your code just works. 00:40:08.276 --> 00:40:14.976 align:middle Also, I don't talk about here, but if you want versioning on your assets, 00:40:15.006 --> 00:40:19.826 align:middle so like when you build they have hashes in their filename, you get that out of the box. 00:40:20.126 --> 00:40:24.216 align:middle In the Encore recipe, we have a line in Webpack config that says enableVersioning(). 00:40:24.296 --> 00:40:27.666 align:middle All of your files output with a hash in the filename. 00:40:28.056 --> 00:40:32.196 align:middle And you don't even know or care, because those hashes end up in this file. 00:40:32.956 --> 00:40:36.576 align:middle And so as long as you use the Twig functions, then you get free versioning. 00:40:37.076 --> 00:40:40.986 align:middle If you change a file, then it's going to change the hash in the filename. 00:40:41.096 --> 00:40:42.656 align:middle You don't even think about versioning anymore. 00:40:42.896 --> 00:40:43.896 align:middle You just get it for free. 00:40:44.386 --> 00:40:46.566 align:middle That also means if you know a little bit about it, 00:40:46.626 --> 00:40:50.236 align:middle you can enable long-term expires headers for your assets. 00:40:50.236 --> 00:40:55.336 align:middle You can configure your web server to say, for all of my JavaScript and all of my CSS files, 00:40:55.456 --> 00:41:01.356 align:middle really, anything in this build directory, let the user cache that for a full year. 00:41:01.826 --> 00:41:02.446 align:middle Because I don't care. 00:41:02.446 --> 00:41:06.006 align:middle If the content changes, we'll change the filename. 00:41:06.296 --> 00:41:08.996 align:middle That can really massively speed up your frontend performance. 00:41:08.996 --> 00:41:14.406 align:middle One last thing I want to talk about, this is another feature that's not technically new 00:41:14.406 --> 00:41:17.336 align:middle with the new version of Encore, but we made it work 00:41:17.336 --> 00:41:20.596 align:middle without any configuration, is dynamic code splitting. 00:41:21.156 --> 00:41:22.916 align:middle It looks like this. 00:41:22.916 --> 00:41:26.706 align:middle Normally, we have the import function, the import call on top, the top of our file, 00:41:26.706 --> 00:41:28.336 align:middle we import all the things we need. 00:41:28.796 --> 00:41:31.166 align:middle Sometimes you have a situation where you have a large piece of code, 00:41:31.166 --> 00:41:34.216 align:middle and you only need that code under certain situations. 00:41:34.586 --> 00:41:41.156 align:middle The perfect example is if you have a React or Vue router, and it's like when you go 00:41:41.156 --> 00:41:44.386 align:middle to this URL, render this component, go to this URL, render that component, 00:41:44.386 --> 00:41:45.986 align:middle if you go to this URL, render that component. 00:41:46.316 --> 00:41:49.296 align:middle If you just code that, normally, that means all of the code from all 00:41:49.296 --> 00:41:51.896 align:middle of your components will get packaged into one single file. 00:41:53.016 --> 00:41:54.156 align:middle Maybe not that big of a deal. 00:41:54.156 --> 00:41:56.286 align:middle It depends on how big your application is, how much you care. 00:41:56.896 --> 00:42:01.086 align:middle Instead, what you can do is you can use import like a function. 00:42:02.116 --> 00:42:07.246 align:middle It basically looks like an AJAX call, because it is an AJAX call. 00:42:07.436 --> 00:42:11.586 align:middle Import like a function, and then you give it the name of the module that you want to import, 00:42:11.586 --> 00:42:16.446 align:middle and then you say .then(), that's a promise, .then() and you pass it a callback. 00:42:16.636 --> 00:42:19.486 align:middle The argument passed your callback is that module. 00:42:20.056 --> 00:42:21.446 align:middle And then you use it. 00:42:24.376 --> 00:42:27.996 align:middle In this case, since we're importing external linker, 00:42:27.996 --> 00:42:30.686 align:middle that code will not be included in the app.js file. 00:42:31.976 --> 00:42:36.196 align:middle Instead, the moment we need it, it's going to grab it via AJAX, 00:42:36.446 --> 00:42:38.776 align:middle and then when it finishes, it's going to go execute it. 00:42:39.126 --> 00:42:43.376 align:middle It also includes the CSS file, because our JavaScript down there required CSS. 00:42:43.706 --> 00:42:44.436 align:middle We don't care. 00:42:44.826 --> 00:42:45.766 align:middle It's just going to work. 00:42:46.406 --> 00:42:52.036 align:middle All right, so now putting all together, the things I want you guys to take away from this, 00:42:52.146 --> 00:42:55.526 align:middle the best practices are: create one entry file in your layout that's going 00:42:55.526 --> 00:42:57.706 align:middle to contain all your global JavaScript and CSS. 00:42:58.436 --> 00:43:01.756 align:middle Treat each entry you have like an individual application, 00:43:01.796 --> 00:43:04.936 align:middle my checkout application, my product list application. 00:43:06.356 --> 00:43:07.376 align:middle Organize your code. 00:43:07.596 --> 00:43:08.516 align:middle We can do that now. 00:43:09.266 --> 00:43:14.506 align:middle Finally. Finally we can actually organize our code properly into pieces. 00:43:14.506 --> 00:43:17.466 align:middle Remember to treat each module like its own unique environment. 00:43:17.466 --> 00:43:21.326 align:middle Require everything you need just from the very specific place you need it. 00:43:21.326 --> 00:43:25.976 align:middle Require the CSS you need from that tiny little module that actually needs it. 00:43:26.326 --> 00:43:29.696 align:middle Like I said, make your CSS a dependency of your application. 00:43:30.926 --> 00:43:37.336 align:middle Okay, and I forgot this one: require jQuery like anything else, even if you are allowed to cheat 00:43:37.336 --> 00:43:38.846 align:middle because you use autoProvidejQuery(). 00:43:40.386 --> 00:43:43.556 align:middle And, use the new splitEntryChunks(), because that's going to make your life much easier. 00:43:43.726 --> 00:43:45.136 align:middle By the way, I showed most of the presentation, 00:43:45.136 --> 00:43:47.486 align:middle I showed using normal script tags and normal link tags. 00:43:47.856 --> 00:43:49.516 align:middle Then we re-factored to the bundle. 00:43:49.796 --> 00:43:52.136 align:middle In reality, you just use the bundle. 00:43:52.486 --> 00:43:56.516 align:middle When you use Encore, you use those functions, then you don't have to think about versioning, 00:43:56.516 --> 00:43:59.016 align:middle or splitEntryChunks(), or anything. 00:43:59.016 --> 00:44:00.216 align:middle It makes sense to turn that on. 00:44:01.006 --> 00:44:02.016 align:middle All right, thank you, guys! 00:44:02.256 --> 00:44:12.936 align:middle Thank you for letting me go a little longer. 00:44:12.936 --> 00:44:13.926 align:middle Questions? 00:44:14.606 --> 00:44:16.286 align:middle I think I get to throw this. 00:44:16.526 --> 00:44:21.086 align:middle Cool. I was like, there has to be at least one question, 00:44:21.086 --> 00:44:22.826 align:middle because I haven't been able to throw this yet. 00:44:22.986 --> 00:44:25.126 align:middle Yeah, that was amazing. 00:44:25.126 --> 00:44:26.366 align:middle That was on me. 00:44:26.366 --> 00:44:27.396 align:middle That was a bad throw. 00:44:27.396 --> 00:44:28.706 align:middle That was a good job over there. 00:44:28.706 --> 00:44:30.216 align:middle Why are you wearing no shoes? 00:44:30.626 --> 00:44:34.536 align:middle Why am I wearing no shoes? 00:44:34.536 --> 00:44:37.266 align:middle Well, now it's like my thing. 00:44:37.526 --> 00:44:44.226 align:middle A long time ago when I was presenting, I had shoes with heels, and I got on the stage, 00:44:44.226 --> 00:44:46.416 align:middle and it was like clunk, clunk, clunk, clunk. 00:44:46.786 --> 00:44:50.656 align:middle So, now I wear no shoes so I can be silent and slide around the stage. 00:44:51.146 --> 00:44:53.476 align:middle If it's summer, I wear no socks also. 00:44:55.746 --> 00:44:56.436 align:middle Question over there? 00:44:56.906 --> 00:44:58.236 align:middle Or was it the same question? 00:44:59.886 --> 00:45:07.366 align:middle Okay, my question is I'm not familiar with JavaScript, 00:45:07.366 --> 00:45:10.126 align:middle and I was wondering why you add -- dev everywhere. 00:45:10.646 --> 00:45:12.646 align:middle Yeah, yeah, that's a really good question. 00:45:12.696 --> 00:45:17.816 align:middle Why when I'm doing the yarn add, like the composer require, why was I adding -- dev? 00:45:18.366 --> 00:45:19.466 align:middle It doesn't matter. 00:45:19.466 --> 00:45:22.136 align:middle Technically, it's just a technical detail. 00:45:22.136 --> 00:45:25.946 align:middle Technically, if you use Node on your application for Webpack, 00:45:26.546 --> 00:45:30.786 align:middle but you also actually had a little bit of Node that you actually ran in production. 00:45:30.786 --> 00:45:35.206 align:middle I don't know, your code actually went through and used some Node code, then in theory, 00:45:35.206 --> 00:45:40.856 align:middle by adding Encore and those things as Dev dependencies, when you're deploying, 00:45:41.066 --> 00:45:43.226 align:middle you would actually, that's, you would run Encore, 00:45:43.296 --> 00:45:47.506 align:middle and your dev dependencies would be there, and you'd get that final built public/build file. 00:45:48.286 --> 00:45:52.526 align:middle But then when you finally got to production, and you needed to install your Node dependencies 00:45:52.526 --> 00:45:57.066 align:middle for whatever weird thing you're doing at runtime, you could actually ask yarn 00:45:57.066 --> 00:46:00.036 align:middle to only install your not dev dependencies, 00:46:00.506 --> 00:46:04.066 align:middle which would be whatever libraries you're using for your actual runtime code. 00:46:05.056 --> 00:46:08.036 align:middle But you don't actually need Encore on production. 00:46:08.036 --> 00:46:12.626 align:middle It's technically correct as a dev dependency because that's not something 00:46:12.626 --> 00:46:17.196 align:middle that you actually need on production to execute your code. 00:46:17.196 --> 00:46:22.506 align:middle In reality, it doesn't matter because none of us, almost none of us are going to want to go 00:46:22.506 --> 00:46:27.546 align:middle to production and install our not Dev dependencies of Node 00:46:27.746 --> 00:46:31.026 align:middle because we have Node running alongside our PHP application. 00:46:31.106 --> 00:46:32.176 align:middle It's a weird edge case. 00:46:32.716 --> 00:46:33.236 align:middle Yeah, good question. 00:46:33.236 --> 00:46:41.466 align:middle Nice, oh good, you guys are responsible for throwing it now. 00:46:41.706 --> 00:46:43.546 align:middle Hi, thank you for presentation. 00:46:43.596 --> 00:46:45.256 align:middle I actually have two questions. 00:46:45.256 --> 00:46:51.156 align:middle First you said that require and import are equally the same, but they're not. 00:46:51.206 --> 00:46:55.946 align:middle You showed that there is asynchronous fetching in import. 00:46:56.156 --> 00:47:04.506 align:middle It's a big difference between the require also model splitting you can include only this part 00:47:04.506 --> 00:47:05.336 align:middle you need. 00:47:05.886 --> 00:47:15.666 align:middle The second question is how this jQuery fixing tool affects building time. 00:47:15.666 --> 00:47:16.076 align:middle Interesting. 00:47:16.076 --> 00:47:17.696 align:middle Yeah, first part, yeah. 00:47:17.696 --> 00:47:20.886 align:middle You guys saw, I said require and import were basically the same, 00:47:20.886 --> 00:47:23.486 align:middle but import is a little bit better, but I didn't really say why. 00:47:23.796 --> 00:47:26.536 align:middle One of the reasons, as you said, is the import has this asynchronous, 00:47:26.576 --> 00:47:27.576 align:middle the import function thing. 00:47:27.936 --> 00:47:31.886 align:middle You can actually do that with require also, but the import is the cooler way to do it. 00:47:32.316 --> 00:47:38.166 align:middle The other thing which we didn't talk about is import and export, you have the ability 00:47:38.166 --> 00:47:40.086 align:middle to export multiple things from a module. 00:47:40.136 --> 00:47:43.976 align:middle With the require and the module.exports, it's always module.exports equals, 00:47:44.286 --> 00:47:46.276 align:middle the one thing that you want to export. 00:47:46.276 --> 00:47:48.946 align:middle But there's technically, with the export syntax you can export 00:47:48.946 --> 00:47:51.406 align:middle like 10 functions from the same module. 00:47:51.836 --> 00:47:54.096 align:middle Sorry, the other question was? 00:47:54.356 --> 00:47:56.516 align:middle About jQuery fixing pack, or making them modules. 00:47:56.606 --> 00:47:57.966 align:middle Oh yeah, the jQuery fixing thing. 00:47:57.966 --> 00:48:00.996 align:middle I don't think the jQuery fixing thing affects performance, 00:48:00.996 --> 00:48:02.866 align:middle or at least affects performance very much. 00:48:03.216 --> 00:48:09.366 align:middle The reason is that Webpack is basically already doing all that work to go through 00:48:09.366 --> 00:48:11.826 align:middle and parse every file and look for the require stuff. 00:48:11.896 --> 00:48:13.526 align:middle We also go through a tool called Babel, 00:48:13.806 --> 00:48:17.796 align:middle which actually reads your JavaScript code, and then outputs old JavaScript. 00:48:17.796 --> 00:48:19.956 align:middle And changes imports to require, yeah. 00:48:20.086 --> 00:48:22.616 align:middle Yeah, I don't think it affects much. 00:48:22.756 --> 00:48:24.006 align:middle Your builds can get big. 00:48:24.006 --> 00:48:26.296 align:middle It has to do with the size of your project. 00:48:26.296 --> 00:48:27.356 align:middle If you're doing things like... 00:48:28.006 --> 00:48:32.056 align:middle this alone won't make your builds slow, but if you were doing, if you were using SASS for CSS, 00:48:32.056 --> 00:48:39.256 align:middle and you wanted to import bootstrap as SASS, that alone is not going to make your build slow. 00:48:39.256 --> 00:48:42.126 align:middle But, if you start doing lots of those types of things, all of a sudden you're saying, 00:48:42.126 --> 00:48:44.896 align:middle hey SASS, go parse this giant SASS file. 00:48:44.896 --> 00:48:48.116 align:middle That's the kind of stuff that's going to make your build slower. 00:48:48.786 --> 00:48:50.796 align:middle Thank you. 00:48:51.416 --> 00:48:56.116 align:middle It's good you guys all sat together with the questions. 00:48:56.336 --> 00:48:57.266 align:middle It's very convenient. 00:48:58.116 --> 00:49:05.106 align:middle I'm not into JavaScript very much, don't know very much information about it. 00:49:05.106 --> 00:49:09.106 align:middle In my company, we already moved to Webpack a couple of weeks ago, 00:49:09.606 --> 00:49:13.996 align:middle but I don't know why every time I get a new branch, without accessing 00:49:13.996 --> 00:49:19.386 align:middle or editing any JavaScript or CSS files, I can see the package.json already changes. 00:49:20.256 --> 00:49:20.836 align:middle I don't know why. 00:49:21.846 --> 00:49:23.606 align:middle The package.json changes? 00:49:24.456 --> 00:49:27.146 align:middle Yeah. Yeah, I don't know about that. 00:49:27.146 --> 00:49:31.306 align:middle As he changes branches, the package.json file is suddenly modified. 00:49:31.386 --> 00:49:34.956 align:middle I'm just going to say that in case somebody else knows what weird thing that happens, 00:49:34.956 --> 00:49:39.306 align:middle but that might be something specific to your project. 00:49:39.306 --> 00:49:43.436 align:middle Okay. Oh good, he can tell. 00:49:43.546 --> 00:49:51.326 align:middle Good. Okay, so basically depends on the environment, so if some of your team, 00:49:51.966 --> 00:49:56.846 align:middle then you can have some differences in output. 00:49:57.676 --> 00:50:02.016 align:middle You can find a stackoverflow on basically how to fix it. 00:50:02.016 --> 00:50:05.696 align:middle You can disable it. 00:50:06.316 --> 00:50:11.716 align:middle You better fix it in your project. 00:50:11.876 --> 00:50:17.336 align:middle So then you have no changes between operational systems. 00:50:18.006 --> 00:50:21.396 align:middle In our company we have fixed it recently, and it's pretty easy, 00:50:21.726 --> 00:50:25.616 align:middle you can just find it on stackoverflow. 00:50:26.986 --> 00:50:30.026 align:middle Yep. All right, think we're past time. 00:50:30.586 --> 00:50:42.846 align:middle If you guys have more questions, come up and say hi. 00:50:42.846 --> 00:50:44.456 align:middle Thank you, guys.