Webpack - Attack of the JS.

Talk I gave at Amura Marketing Technologies, Pune, India. Outlining what Webpack is and how it impacts Ruby on Rails development.

Transcript

1. Webpack Invasion Attack Of the JS
2. The easy way to run Javascript
3. The good old <script> tag. <script src=”bend_the_knee.js"></script> <script src=”i_will_not.js"></script>
4. The problem with the script tag - Loads everything in the same scope. - Easy for an HTML file to have 100+ script tags loading as many files in it. - Manually handle dependencies by reordering the sequence of loading. - Every Script tag is a trip to the resource for that script file.
5. Good authors divide their books into chapters and sections; good programmers divide their programs into modules.
6. Easy to Maintain. Namespacing. Reuse. The Modules Are Coming! - Lex Luthor
7. AMD - Asynchronous Module Definition. CommonJS. ES Modules - Native Javascript! Module Patterns / Loaders
8. What is Module Bundling? On a high level, module bundling is simply the process of stitching together a group of modules (and their dependencies) into a single file (or group of files) in the correct order.
9. Multiple Requests = Bad Page Load Time! Gets worse when your files are large in size.
10. When you have one common module pattern Concat. Minify. Uglify. That One large JS file you will never read.
11. What happens when your application supports multiple kinds of modules?
12. RequireJS Browserify Webpack! Module Bundlers
14. Find your modules. Build a Dependency Tree. Bundle everything. Split into chunks. That’s what webpack does.
16. Loaders. Plugins. Hot Module Replacement.
17. Loaders
18. Access Webpack Lifecycle. Use Node.js API. Webpack itself is a plugin. Plugins
19. For More details head to webpack.js.org
20. Why you should learn webpack as a Rails developer?
21. rails/webpacker
22. Embracing Change: Rails 5.1 Adopts Yarn, Webpack, and the JS Ecosystem You can try it now in a Rails 4.2+ app by including the ‘webpacker’ gem in your gemfile, running bundle install and then the follow. “rake webpacker:install”
23. Don’t forget to join me at the next Ruby meetup for.
24. Webpack V Sprockets The Dawn of JavaScript
25. Thank you.