War of the Bundlers

Issue #309.July 25, 2024.2 Minute read.
Bytes

Today’s issue: True crime JavaScript content, React Native tanking crypto prices, and Chrome keeps playing the hits.

Welcome to #309.


Eyeballs logo

The Main Thing

Donald Duck watching Goofy hold hands with Daisy Duck

Me watching Rust devs rewrite all the JavaScript build tools

War of the Bundlers

It’s been a busy few weeks in Bundler Land, with the three major next-gen bundlers all sharing updates on their progress.

Let’s check in with each one and try to answer the question we’re all thinking: will any of these Rust-based build tools actually make it?

  • Rspack launched in March 2023 as a drop-in replacement for Webpack that’s faster and more feature-packed. They just released a v1.0 alpha that comes with a built-in integration for Lightning CSS and various output optimizations.

  • Turbopack is backed by Vercel and first launched back in October 2022, anointing itself as the (self-proclaimed) “Rust-based successor to Webpack.” Earlier this week, they announced that they’re moving the project’s codebase into the Next.js monorepo, in order to focus on the Next.js use case for now.

  • Rolldown is Vite’s WIP bundler that aims to combine the best parts of its two current bundlers (esbuild and Rollup) with all the blazingness of Rust. They’ve been sharing some promising perf improvements this week, powered by Oxc.

These Rust-based bundlers seem definitively faster and more powerful than tools like Parcel, Rollup, and Webpack. But critics might ask, is all this worth it for slightly faster build times and a better DX?

These projects have taken years to reach production readiness and have often been required to narrow their original scope to focus on one framework or use case. That’s not meant as a critique – but it’s clear that “just rewrite it in Rust” is a lot more complex than it sounds.

Bottom Line: Lots of folks (including us) have made predictions about how Rust-based build tools could take over the JavaScript ecosystem. If that’s going to happen, it has to be clear that the juice is worth the squeeze.

        

storyblok logo

Our Friends
(With Benefits)

Dexter cartoon looking sad in the mirror at himself

Me getting ready for another 3-hour meeting with the marketing team

Storyblok’s headless CMS is built for developers

I don’t know you personally, but I’m pretty sure you didn’t become a developer because you’re passionate about making minor tweaks to content sites.

Luckily, Storyblok’s modern CMS can help. It comes with powerful DX features – so you can build faster, scale more easily, and let the marketers handle the content, while you spend your time on more impactful projects. Here’s how:

  • RESTful and GraphQL APIs make it easy to integrate with any framework and deliver content fast (see the docs)

  • Flexible data schemas that are component-based, so you can easily customize and repurpose them across projects

  • Easy collaboration with your non-technical team members, thanks to their visual editor and live preview tools

Kickstart your first project in Next.js, Astro, Nuxt, or any other framework. It’s free and takes less than 5 minutes.


Spot the Bug logo

Spot the Bug

Presented by Unlayer Embed

It’s a drag-and-drop email editor, page builder, and pop-up builder for your SaaS application that’s white-label and easy to embed – saving you months of dev time.

class Singleton {
  constructor() {
    if (this.instance) {
      return this.instance;
    }
    this.value = Math.random();
    this.instance = this;
    return this;
  }

  getValue() {
    return this.value;
  }
}

Cool Bits logo

Cool Bits

  1. Rust 1.80 just released with LazyCell and LazyLock and lots of other features that probably make it super easy to rewrite JavaScript build tools from scratch.

  2. Want to compete for a chance to win $20,000 in prizes? Merge community is hosting a dev hackathon on Wix Studio for JavaScript developers. All you have to do is build a full-stack app with Wix Blocks or design a template and submit it before September 9th. We’d love to see a Bytes reader take home that cash. [sponsored]

  3. Amelia Wattenberger created svg.wtf, a cool playground to help you learn and discover how to write SVG code – or be more confused than ever, but in a fun way.

  4. The CSS font-size-adjust property just landed in Chrome.

  5. Harry Tormey wrote about Migrating Coinbase’s 56 million users to React Native. So that explains why Ethereum tanked today.

  6. React Rally is a 25% discount to all Bytes subscribers to one of the OG React Conferences. Come to Park City, Utah on Aug 12-14th and learn from Chris Sev, Kent C. Dodds, Shruti Kapoor, and more. [sponsored]

  7. Stephanie Eckles has forgotten more about CSS than most of us will ever know, and she wrote an article about Providing type definitions for CSS with @property.

  8. Nicolas Payot wrote about his team’s large-scale migration to Nuxt.

  9. Yagiz Nizipli wrote this Post-mortem of what broke Node.js 22.5. I love the true-crime subgenre of JavaScript content, even though I totally predicted the ending on this one.


Spot the Bug logo

Spot the Bug: Solution

Presented by Unlayer Embed

this.instance is an instance property instead of a static property, causing it to be undefined every time a new instance is created, failing to enforce the singleton pattern.

To fix this, we should use a static property instead:

class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    this.value = Math.random();
    Singleton.instance = this;
    return this;
  }

  getValue() {
    return this.value;
  }
}