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

Javascript Build Tools: Past& Beyond

Javascript Build Tools: Past& Beyond

This are the slides for my talk in the Shift Remote Conference 2020.

ABSTRACT:  In this talk, I'd go through the Evolution of JavaScript build tools, their features of most JavaScript build tools and what we should be expecting in the future from build tools.

shedrack akintayo

July 09, 2020
Tweet

More Decks by shedrack akintayo

Other Decks in Programming

Transcript

  1. Javascript Build Tools - Past &
    Beyond
    Presented by Shedrack Akintayo
    Shift Remote Conference 2020

    View full-size slide

  2. • Software Developer
    Shedrack Akintayo
    • Developer Advocate • Technical Writer

    View full-size slide

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

    View full-size slide

  4. The story of building the web

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  11. The Future......

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

  16. es-dev-server
    • A web server for development
    without bundling by open-wc
    • Efficient browser caching for fast
    reloads
    • Plugins
    • Typescript support without any
    extra tooling or plugins.

    View full-size slide

  17. Vite
    • By the creator 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. In the future we would be seeing tools with:
    • no configuration
    • better customizability
    • extensibility
    • faster speed.
    Conclusion

    View full-size slide

  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

    View full-size slide

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

    View full-size slide