Download to read offline
Uploaded byShift Conference
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
The presentation discusses the evolution of JavaScript build tools from 2005 to the present, highlighting major milestones like the emergence of bundlers, the introduction of Gulp, Grunt, and Babel, and the current dominance of Webpack. It also outlines future trends, including new tools such as Rollup, Parcel, Snowpack, and Vite, which emphasize speed, ease of use, and minimal configuration. The document concludes by suggesting that future tools will focus on customizability and performance.
More Related Content
Similar to Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
- 1. Javascript Build Tools- Past & Beyond Presented by Shedrack Akintayo Shift Remote Conference 2020
- 2. • Software Developer ShedrackAkintayo • Developer Advocate • Technical Writer
- 3. Why the webis built. ! • Dependency Management • Transpiling • Bundling • Minifying • No module management built into browser
- 4. The story ofbuilding the web
- 5. 2005-2010: The eraof the first bundlers • Dojo • Google Closure Tools
- 6. Problems of theFirst 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 andGrunt • 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 • Convertses6 syntax to CommonJS. • Support for older browsers. • Allowed developers build custom plugins for their needs.
- 9. 2012-2014: Browserify • ES6module syntax. • Same NodeJS syntax. • Plugins. • npm power !
- 10. 2015-now: Webpack • Fasterthan Browserify. • Webpack Server (HMR, code splitting, live reloading). • npm Scripts power ! • Plugins. • Presets (collection of plugins ). • Better DX than older Build tools.
- 11.
- 12. Rollup • Module Bundlerfor 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 bundlingduring 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 webserver 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 thecreator 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 (runtimeimport systems) • ES Modules. • An Example is Snowpack. • Not so much in use yet. • Lightning fast build and deploy times.⚡
- 20. In the futurewe 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.