Slide 1

Slide 1 text

Javascript Tooling - The Evolution and Future of JS & Front-end Build Tools Presented by Shedrack Akintayo JS NATION LIVE 2020

Slide 2

Slide 2 text

• Software Developer. • Developer Advocate. • Guest Technical Author @SmashingMagazine. Shedrack Akintayo

Slide 3

Slide 3 text

Why the web is built. ! • Dependency Management • Transpiling • Bundling • Minifying • No module management built into browser

Slide 4

Slide 4 text

The story of building the web

Slide 5

Slide 5 text

2005-2010: The era of the first bundlers • Dojo • Google Closure Tools

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

2012: Babel • Converts es6 syntax to CommonJS. • Support for older browsers. • Allowed developers build custom plugins for their needs.

Slide 9

Slide 9 text

2012-2014: Browserify • ES6 module syntax. • Same NodeJS syntax. • Plugins. • npm power !

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

The Future......

Slide 12

Slide 12 text

Rollup • Module Bundler for Javascript • Easier to learn • Fast Build • Code Splitting • Less and easier config compared to webpack • Perfect for libraries

Slide 13

Slide 13 text

Parcel • Zero Configuration - Just Install! • Faster bundle time. • multi-core processing. • Plugins are not necessarily needed. • Awesome DX .

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

esbuild • Still experimental • Written in Go • Main aim of the project is to prove how fast javascript build tools can be.

Slide 16

Slide 16 text

Browser Imports • async / defer modules • Caching • Browser Support

Slide 17

Slide 17 text

Bundling free approaches (runtime import systems) • ES Modules. • An example is Snowpack. • Not so much in use yet. • Lightning fast build and deploy times.⚡

Slide 18

Slide 18 text

Soon we would be seeing more tools with: • no configuration • better customizability • extensibility • faster speed. Conclusion

Slide 19

Slide 19 text

• 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

Slide 20

Slide 20 text

Thank You!!! @coder_blvck Shedrack Akintayo Sheddy.xyz