Let's get ready to BUNdle

Today’s issue: Ogre-like design systems, Bun’s backup plan with Warner Bros, and a new state management library that might help me finally afford eggs.

Welcome to #188.

---

Let’s get ready to BUNdle

Bun just took another big step towards becoming the all-in-one JavaScript runtime of your dreams — this time, by releasing its own built-in JS/TS bundler and minifier.

You can use it with the bun build CLI command or its own Bun.build() JavaScript API — and yes, it’s very fast.

But why did Bun take the time to build a bundler from scratch, when other next-gen tools like esbuild and Turbopack are still a lot faster than OG’s like Webpack and Parcel?

According to Bun creator Jarred Sumner, there were three main reasons:

• Cohesiveness: By bringing bundling into the JS runtime, Bun can eliminate a lot of the complexity that plagues most traditional bundlers (*curses in Webpack*). It does this in a few ways — like generating pre-transpiled files that are optimized for Bun’s runtime and by using a unified plugin API that works with both the bundle and the runtime.

• Performance: By leveraging their existing codebase to create a custom bundler, Bun is able to get faster performance than if they tried integrating with an existing bundler.

• Developer Experience: Jarred wisely noted that, “no one likes wrestling with bundler configurations,” so they intentionally prioritized speed and stability over feature-completeness with the API. But this beta version still covers most modern use cases.

The API currently supports three targets ("browser", "bun", and "node"), most common file types, and it’s got experimental support for React Server Components. No HMR yet, but that should be coming in the next few weeks.

Bottom Line: This is probably the biggest Bun release yet, but it’s apparently just a stepping stone to an even more ambitious “super-API” that will stitch the bundler together with a Bun HTTP server and file system router.

And if that doesn’t work out, they can always sell the rights to “Super API” to Warner Bros., so they can make another 3-hour superhero movie that no one will see.

---

Cloudflare has a bunch of sneaky perf hacks

…and you probably aren’t using most of them 👀

So maybe we should all stop arguing on Twitter about “which meta-framework is the best at reducing page load times by .0003%” – and boost performance the easy way with Cloudflare 🚀.

• CF’s huge and super fast network lets you cache content as close to your users as possible and optimize routing requests to the least congested paths.

• They have a ton of powerful media optimization tools that can store, resize, compress, and accelerate media delivery across devices.

• You can customize your site’s performance stack as much as you want with their bundled plans.

The best part? Many of these features are easily affordable or 100% free to use, plus they’re quick to set up and trusted by millions of the most popular sites on the web (including ours).

Check it out for free – and don’t let the Lighthouse demons win.

---

What gets logged?

function Dog(name) {
  this.name = name
  this.speak = () => 'Woof Woof'
}

Dog.prototype.speak = function() {
  return 'Ruff Ruff'
}

const dog = new Dog('Leo')
console.log(dog.speak())

---

1. Legend-State just launched v1.0 of its “super fast and powerful” React state management library that’s based on Observables (which are similar to Signals). If I had a dollar for every new state management library I’ve mentioned in Cool Bits over the years, I’d almost be able to afford eggs.

2. Dopt is a backend for your in-product user journeys. It makes setup flows, product walkthroughs, and contextual tips simpler to implement and easier to manage, saving you from unnecessary complexity while keeping you in full control over the frontend. [sponsored]

3. Werner Vogels (the CTO of Amazon) wrote an article about how Monoliths are not dinosaurs. And since he’s richer than all of us, his opinion is obviously worth more.

4. Huan created a set of ESLint rules for creating a consistent filename and folder structure. That beats my strategy of just sticking everything in utils.

5. The blackspike team wrote about Why they chose Astro over Nuxt for their new site, despite being an agency that specializes in Vue + Nuxt.

6. We made this interactive deep dive on Why, When, and How React renders. If this doesn’t help you understand React rendering, nothing will.

7. Dion Almaer wrote about Building a modern design system in layers. I’m not sure if that means your site will end up looking like an onion, an ogre, or a parfait — I guess you’ll have to read to find out.

---

What gets logged?

function Dog(name) {
  this.name = name
  this.speak = () => 'Woof Woof'
}

Dog.prototype.speak = function() {
  return 'Ruff Ruff'
}

const dog = new Dog('Leo')

Woof Woof gets logged.

Before JavaScript delegates the lookup of the property to the Constructor’s prototype, it first checks to see if the property exists on the object being returned from the Constructor. In this case, it does so it calls it.

For more info., check out A Beginner’s Guide to JavaScript’s Prototype