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

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

shedrack akintayo

June 18, 2020
Tweet

More Decks by shedrack akintayo

Other Decks in Programming

Transcript

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

    View full-size slide

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

    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. Browser Imports
    • async / defer modules
    • Caching
    • Browser Support

    View full-size slide

  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.⚡

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide