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
Tweet

More Decks by shedrack akintayo

Other Decks in Programming

Transcript

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

    Akintayo Shift Remote Conference 2020
  2. Why the web is built. ! • Dependency Management •

    Transpiling • Bundling • Minifying • No module management built into browser
  3. 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.
  4. 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.
  5. 2012: Babel • Converts es6 syntax to CommonJS. • Support

    for older browsers. • Allowed developers build custom plugins for their needs.
  6. 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.
  7. Rollup • Module Bundler for Javascript • Easier to learn

    • Fast Build • Code Splitting • Less and easier config compared to webpack • Perfect for libraries
  8. Parcel • Zero Configuration - Just Install! • Faster bundle

    time. • multi-core processing. • Plugins are not necessarily needed. • Awesome DX .
  9. 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.
  10. esbuild • Still experimental • Written in Go • Main

    aim of the project is to prove how fast javascript build tools can be.
  11. 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.
  12. 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
  13. Bundling free approaches (runtime import systems) • ES Modules. •

    An Example is Snowpack. • Not so much in use yet. • Lightning fast build and deploy times.⚡
  14. In the future we would be seeing tools with: •

    no configuration • better customizability • extensibility • faster speed. Conclusion
  15. • 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