stripecon_webpack.pdf

Presentation i did at StripeConEu 2018

Transcript

1. GREG WEINDL FULLSTACK DEVELOPER PIXELPOEMS g.weindl@pixelpoems.com
 @greg_808
 
 BOOST YOUR FRONTEND WORKFLOW WITH WEBPACK
2. WHOAMI? ‣ Full Stack Web Developer ‣ Pixelpoems Vienna ‣ 3 years experience as professional Web Dev ‣ Cats and Music Lover
3. TOPICS OF THIS TALK ▸ Why do we need a Module Bundler/TaskRunner ▸ What is Webpack? ▸ Gulp vs. Webpack ▸ Webpack Basics ▸ Why I think Webpack is the way to go
4. MODULE BUNDLER TASKRUNNER
5. ▸ Automate recurring tasks ▸ Autoprefixer ▸ Minify CSS ▸ Uglify JS ▸ Pre and Post -processors e.g. Babel & SASS
6. ▸ Remove unused CSS, JS ▸ Linting e.g. ESLint ▸ Image Optimisation ▸ Generate Icons
7. REASONS WHY
8. USER EXPERIENCE We want the page to load as fast as possible. ‣ Minification and concatenation of CSS ‣ Uglification and concatenation of JS ‣ Image Optimisation
9. We want to use the latest features in a productive way. ▸ Enhance CSS with SASS ▸ Use the latest JS features with Babe Keep your job exiting. Be as productive as possible ‣ Automate tasks that can be automated (Autoprefixer, …) DEVELOPER EXPERIENCE
10. WHAT IS WEBPACK
11. At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. https://webpack.js.org/concepts/
12. ASSETS/MODULE BUNDLER https://webpack.js.org/
13. WHAT IS GULP?
14. Gulp solves the problem of repetition. Many of the tasks that web developers find themselves doing over and over on a daily basis can be simplified by becoming automated. Gulp is a javascript task runner that lets you automate tasks http://brandonclapp.com/what-is-gulp-js-and-why-use-it/
15. GULP FILE EXAMPLE
16. COMPARISON Initial release: GitHub stars: Weekly downloads: WEBPACK Mar 2012 43.914 4.309.345
 Gulp Jul 2013 30.273 884.969
17. IT DEPENDS ON PERSONAL TASTE gulpfile.js ▸ get rid of bootstrap ▸ get rid of jQuery ▸ get rid of gulp ▸ get prepared for the shiny „new“ JavaScript frameworks
 webpack.dev.js ▸ write own grid and styling system use CSS- Grid ▸ write Vanilla JS, start using ES6-features more often ▸ start using web pack ▸ start using VUE.JS
18. WHAT DOES WEBPACK DIFFERENTLY
19. Webpack uses a dependency graph. When you bundle a project using webpack, it traverses the imports, constructing a dependency graph of the project and then generates output based on the configuration. Additionally, it's possible to define split points to create separate bundles within the project code itself. https://survivejs.com/webpack/what-is-webpack/
20. Hot Module Replacement You are likely familiar with tools, such as LiveReload or BrowserSync already. These tools refresh the browser automatically as you make changes. Hot Module Replacement (HMR) takes things one step further. In the case of React, it allows the application to maintain its state without forcing a refresh. https://survivejs.com/webpack/what-is-webpack/
21. WHY IS THAT GREAT? ▸ Since webpack is based on JavaScript code modules, it knows how to concatenate your assets. ▸ JavaScript code modules are a concept introduced in Gecko 1.9 (browser engine) and can be used for sharing code between different privileged scopes. ▸ This is great if you have a lot of JS files. You don’t have to remember the correct order to load your JS files webpack will sort them out and creates a single file to load in your index.html/page.ss.
22. WHAT IS A WEBPACK MODULE In contrast to Node.js modules, webpack modules can express their dependencies in a variety of ways. A few examples are: ‣ An ES2015 import statement ‣ A CommonJS require() statement ‣ An AMD define and require statement ‣ An @import statement inside of a css/sass/less file. ‣ An image url in a stylesheet (url(...)) or html (<img src=...>) file. https://webpack.js.org/concepts/modules/
23. WEBPACK BASICS
24. ENTRY: An entry point indicates which module webpack should use to begin building out its internal dependency graph. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly). entry: { app: ['./src/js/entry.js', './src/css/main.scss'], myAwesomeComponent: ['./src/components/myAwesomeComponent.js'] },
25. The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file. output: { filename: javascript/[name].[contenthash].js path: path.resolve(__dirname, „./dist“), }, OUTPUT:
26. LOADERS: Out of the box, webpack only understands JavaScript files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph. { test: /\.(png|svg|jpe?g|gif)$/, loader: 'file-loader', options: { name: 'images/[name].[ext]', } },
27. PLUGINS: While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables. new PurifyCSSPlugin({ paths: (Files), purifyOptions: { minify: true, info: true, rejected: true, whitelist: ['*js*'] } }),
28. WEBPACK´S EXECUTION PROCESS https://survivejs.com/webpack/what-is-webpack/
29. SHOW & EXPLAIN WEBPACK CONFIG
30. WHAT DID WE LEARN SO FAR
31. ▸ Webpack is a module bundler, but you can also use it running tasks as well. ▸ Webpack relies on a dependency graph underneath. Webpack traverses through the source to construct the graph, and it uses this information and configuration to generate bundles. ▸ Webpack relies on loaders and plugins. Loaders operate on a module level, while plugins rely on hooks provided by webpack and have the best access to its execution process.
32. ▸ Webpack’s configuration describes how to transform assets of the graphs and what kind of output it should generate. Part of this information can be included in the source itself if features like code splitting are used. ▸ Hot Module Replacement (HMR) helped to popularize webpack. It's a feature that can enhance the development experience by updating code in the browser without needing a full page refresh. ▸ Webpack can generate hashes for filenames allowing you to invalidate past bundles as their contents change.
33. DO YOU REALLY NEED TO SWITCH TO WEBPACK?
34. ▸ If you develop JavaScript heavy applications? => Definitely ▸ If front end bundlers and optimisation tools are new to you? => Go for it ▸ If you want to stay up to date with all the crazy JS stuff? => Go for it ▸ If you don’t us much JS in your projects and have a working Gulp Grunt etc. Workflow. => Stay with what you got!
35. DO YOU REALLY NEED TO SWITCH TO WEBPACK?
36. ▸ Lets be honest: I got caught by the hype. ▸ I was in the mood for something new. ▸ SilverStripe uses webpack. ▸ VUE, React and Angular use webpack. ▸ As it is already version 4 I consider it to be stable ▸ I guess it will stay around for a while
37. WHY NOT LARAVEL MIX OR POI ETC.
38. ▸ I think that wrappers for tools are great as long as you know how to use the technology under the hood. ▸ The chance is very high that the wrapper is missing a feature you need. So you have to understand what is really going on. It may even be more in the way than been helpful. ▸ So better start with understanding the tool before you choose to go with a helper.
39. ▸ My approach to web development: ▸ GET THE BASICS RIGHT AND BUILD UP FROM THERE
40. WHAT I HAVE LEARNED ALONG THE WAY
41. ▸ Webpack is not as hard as every one says. You can do it. ▸ Web development isn’t about the web developer and using the most shiniest tools! It is all about user experience and conversions. ▸ Always stay with the KISS principle: ▸ KEEP IT SIMPLE STUPID
42. LINKS ▸ https://webpack.js.org/ ▸ https://survivejs.com ▸ https://github.com/Greg808/webpackdemoStripeCon2018