The New Wave Frontend Toolchain

Aug 1, 2022

A new wave frontend toolchain is emerging, and it's extremely performance-driven.

I'm talking about Deno and bun (runtimes),  esbuild, swc, and Rome (bundlers), to name a few. These tools were built as a response to the slowness and complexity of Webpack. Some traits that separate them from the pack

  • Written in compiled systems languages like Rust, Go, C++, or other languages like Zig that expose low-level constructs.
  • Maximize parallelism
  • Take advantage of cache locality
  • Edge native
  • API-compatible (mostly) with the previous generation (webpack/babel)
  • Orders of magnitudes faster than the previous generation

What's interesting is the bimodal performance benchmarks. Depending on how you measure it0, esbuild and swc are 10x-100x faster than webpack and babel. However, they are much closer in performance to each other.

While performance makes it a no-brainer to switch from webpack to esbuild, switching from esbuild to swc might depend much more on API compatibility, developer experience, or production readiness. What I think the next few years will hold for the new wave toolchain:

  • Focus on APIs – not just backward compatibility, but with new and more ergonomic ones
  • Distribution – how can these tools find their way into the hands of developers? For runtimes, that means embedded on the edge (Cloudflare or AWS) and for the bundlers, in frameworks and build systems.
  • Picking the right use case to optimize for – Typescript, web, edge, WebAssembly. You can do it all (and will need to eventually), but where do you start?
  • Package management – bundlers and package managers naturally go together. Bundlers might solve optimization issues through solving package management problems (and vice versa).

0The benchmarks are hard to measure accurately. The new wave toolchain doesn't do everything the old tools did. They aren't feature complete and might not ever be.