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

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