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

Javascript Tooling - The Evolution and Future o...

Javascript Tooling - The Evolution and Future of JS & Front-end Build Tools

This are the slides for my talk at JSNation Live 2020, the biggest JavaScript conference on the cloud.

Video Recording of the Talk: https://youtu.be/AIfALNaQncA

shedrack akintayo

June 18, 2020
Tweet

More Decks by shedrack akintayo

Other Decks in Programming

Transcript

  1. Javascript Tooling - The Evolution and Future of JS &

    Front-end Build Tools Presented by Shedrack Akintayo JS NATION LIVE 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. Bundling free approaches (runtime import systems) • ES Modules. •

    An example is Snowpack. • Not so much in use yet. • Lightning fast build and deploy times.⚡
  12. Soon we would be seeing more tools with: • no

    configuration • better customizability • extensibility • faster speed. Conclusion
  13. • 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 References and Useful Resources