Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Javascript Build Tools: Past& Beyond

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.

shedrack akintayo

July 09, 2020

More Decks by shedrack akintayo

Other Decks in Programming


  1. Javascript Build Tools - Past & Beyond Presented by Shedrack

    Akintayo Shift Remote Conference 2020
  2. • Software Developer Shedrack Akintayo • Developer Advocate • Technical

  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