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.

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