Javascript Build Tools: Past& Beyond

This are the slides for my talk in the Shift Remote Conference 2020.

ABSTRACT:  In this talk, I'd go through the Evolution of JavaScript build tools, their features of most JavaScript build tools and what we should be expecting in the future from build tools.

Transcript

1. Javascript Build Tools - Past & Beyond Presented by Shedrack Akintayo Shift Remote Conference 2020
2. • Software Developer Shedrack Akintayo • Developer Advocate • Technical Writer
3. Why the web is built. ! • Dependency Management • Transpiling • Bundling • Minifying • No module management built into browser
4. The story of building the web
5. 2005-2010: The era of the first bundlers • Dojo • Google Closure Tools
6. Problems of the First Bundlers, why they weren't perfect • Dojo Builder: Heavy, relies on java, poor documentation. • Google Closure Compiler: proprietary, requires java, compile time is slow, poor developer experience.
7. 2010-2012: Gulp and Grunt • First try to standardise and build reusable pipelines on top of plugins. • Gave developers freedom to write their own build scripts. • Plugins were available for basic tasks.
8. 2012: Babel • Converts es6 syntax to CommonJS. • Support for older browsers. • Allowed developers build custom plugins for their needs.
9. 2012-2014: Browserify • ES6 module syntax. • Same NodeJS syntax. • Plugins. • npm power !
10. 2015-now: Webpack • Faster than Browserify. • Webpack Server (HMR, code splitting, live reloading). • npm Scripts power ! • Plugins. • Presets (collection of plugins ). • Better DX than older Build tools.
11. The Future......
12. Rollup • Module Bundler for Javascript • Easier to learn • Fast Build • Code Splitting • Less and easier config compared to webpack • Perfect for libraries
13. Parcel • Zero Configuration - Just Install! • Faster bundle time. • multi-core processing. • Plugins are not necessarily needed. • Awesome DX .
14. Snowpack • No bundling during development. • Instant rebuilds on save (Nothing to rebundle!). • Faster build tool. • out of the box support for TypeScript, JSX, CSS Modules etc.
15. esbuild • Still experimental • Written in Go • Main aim of the project is to prove how fast javascript build tools can be.
16. es-dev-server • A web server for development without bundling by open-wc • Efficient browser caching for fast reloads • Plugins • Typescript support without any extra tooling or plugins.
17. Vite • By the creator of VueJS • PostCSS config out of the box • build tool that serves your code via native ES Module imports. • Instant hot module replacement • TS & JSX support out of the box handled via esbuild • Code is compiled on demand • Uses Rollup for production build
18. Browser Imports • async / defer modules • Caching • Browser Support
19. Bundling free approaches (runtime import systems) • ES Modules. • An Example is Snowpack. • Not so much in use yet. • Lightning fast build and deploy times.⚡
20. In the future we would be seeing tools with: • no configuration • better customizability • extensibility • faster speed. Conclusion
21. • Rollup Docs • https://www.snowpack.dev/ • https://github.com/evanw/esbuild • https://parceljs.org/ • https://medium.com/webpack/webpack-and-rollup-the-same-but- different-a41ad427058c • https://github.com/vitejs/vite • https://open-wc.org/developing/es-dev-server.html References and Useful Resources
22. Thank You!!! @coder_blvck Shedrack Akintayo Sheddy.xyz