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

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

678a2503a2995aa4815b2992a70d376c?s=128

shedrack akintayo

June 18, 2020
Tweet

Transcript

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

    Front-end Build Tools Presented by Shedrack Akintayo JS NATION LIVE 2020
  2. • Software Developer. • Developer Advocate. • Guest Technical Author

    @SmashingMagazine. Shedrack Akintayo
  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. Browser Imports • async / defer modules • Caching •

    Browser Support
  17. Bundling free approaches (runtime import systems) • ES Modules. •

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

    configuration • better customizability • extensibility • faster speed. Conclusion
  19. • 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
  20. Thank You!!! @coder_blvck Shedrack Akintayo Sheddy.xyz