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

Tech Talk 2021 - Exploring modern JS build tools

Tech Talk 2021 - Exploring modern JS build tools

A bunch of new developer tools have landed in the past years and they are biting at the heels of the tools that have dominated front-end development over the last few years, including webpack, Babel, Rollup, Parcel, create-react-app.

These new tools aren’t designed to perform the exact same function, and each has different things they’re trying to achieve and features to get there. Despite their differences, these tools do share a common goal: **improve the developer experience.**

Marko Arsić

October 20, 2021
Tweet

More Decks by Marko Arsić

Other Decks in Programming

Transcript

  1. New tools have landed and they are replacing the tools

    that have dominated front-end development webpack, Babel, Rollup, Parcel, create-react-app
  2. Not all new tools are designed to perform the exact

    same function, and each has different features
  3. Fill a missing middle ground between writing a single vanilla

    JavaScript file, and having to download MB of tooling dependencies
  4. Even after all caching and optimizing this all takes time,

    and can slow development servers to a crawl in larger codebases
  5. After request is made the tool apply transforms to the

    requested module and leaf nodes 2
  6. Serve changes to the browser. Speed things up a lot

    with less work in the process of pushing to a dev server 3
  7. Some new tools still do the same work but are

    just faster processing code extremely fast by avoiding expensive transformations, leveraging parallelization and taking advantage of Rust/Go in the background
  8. • First-class support for native JavaScript modules • TypeScript compilation

    (but not type checking) • JSX • Plugin API for extensibility • A built-in development server • CSS bundling and support for CSS-in-JS libraries All of these tools can compile TypeScript into JavaScript, but will do so even if there are type errors
  9. Created by Evan Wallace (CTO of Figma) Its main feature

    is that it provides a build step 10×-100× faster than Node-based bundlers (their own benchmarks)
  10. Very new Production ready but not yet v1.0 Comes with

    intuitive JavaScript and command line API
  11. USE CASES It’s going to be most useful in large

    codebases when stable Add some speed to your bundling in side projects
  12. Snowpack is a build tool by the creators of Skypack

    and Pika. It provides development server and was created with an “unbundled development” philosophy.
  13. “You should be able to use a bundler because you

    want to, and not because you need to.”
  14. build step doesn’t bundle files into a single package but

    provides unbundled esmodules that run in the browser
  15. esbuild is included as a dependency, idea is to use

    JS modules, bundle with esbuild when it’s needed
  16. USE CASES double down on unbundled deployment writing source code

    with a small number of modules incrementally adopting a front-end framework into a server-rendered or static application
  17. Vite is developed by Vue creator Evan You. Vite provides

    a full development server and an optimized build command using Rollup
  18. USE CASES serious create-react-app or Vue CLI competitor, Vite is

    the closest one zero-config optimized production build mean you can get from zero to production without any configuration lightening-fast development server
  19. wmr

  20. Built by the creator of Preact, Jason Miller “Preact is

    tiny and it’s really good if you want to do a lightweight project. Where is our tooling for that? “
  21. wmr is built with bundle size purging as Preact, so

    it’s tiny — weighing 2.6 MB — and contains exactly zero npm dependencies
  22. USE CASES create a prototype using Preact as fast as

    possible no configuration and it only takes seconds to download wmr may not be the tool for you if you’re not using Preact, React or vanilla JavaScript
  23. These tools are going to lower the barrier to entry

    for new developers by providing a leaner, faster developer environment
  24. HypeTech Tech education and shaping ideas into hype products hypetech.io

    | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev