The Runtime Rumble

Today’s issue: The Jin Kazama of syntax highlighters, the fun way to optimize your JavaScript, and the software companies trying to make profits.

Welcome to #274.

---

The Runtime Rumble

Over the past few months, it feels like we’ve seen new JavaScript runtimes pop up even faster than new JavaScript frameworks.

We’ve written about a few of these before, but today, we’re going to put all the next-gen runtimes together in one place and do what my stepdad used to do with me and my siblings — pit them against each other to see which one will emerge the strongest.

Let’s get ready to rumble.

WinterJS: The newest contender of our battle royale is built on the SpiderMonkey JS engine and just released v1.0 a few weeks ago. It claims to be the most blazing runtime of them all, but some folks have pointed out that their benchmarks look a little suspicious and questioned how useful the runtime is outside of its proprietary hosting platform. But it still looks formidable, thanks to its compatibility with the community-driven WinterCG spec, and its support for Next.js, Server Components, and Wasm.

Workerd: Most likely the first to be thrown out of the ring, Workerd relies heavily on the support of its big bro Cloudflare to be useful. It’s helped lead the movement towards using Web APIs on the server (via isolates), but it’s hard to see a real reason to use it outside of Cloudflare’s platform.

Deno: Kind of like when Eddie Guerrero turned on Rey Mysterio, Ryan Dahl pioneered this next-gen runtime frenzy when he left Node, rearranged the letters to Deno, and set out to fix the problems of his OG runtime. Today, Deno boasts top-of-the-line runtime security, first-class TS support, and powerful versatility with its ability to run on the edge or a server. But the question remains — can it do enough to both dethrone Node and hold off the hot newcomers?

LLRT: When competing in a battle royale, you need to be able to warm up fast. That great news for Amazon’s LLRT runtime, which features extremely fast cold starts. But because it only exposes a small subset of the APIs supported by other runtimes, you’re definitely sacrificing some power for a little extra speed and the convenience of the AWS ecosystem.

Bun: For now, Bun looks like the top challenger to Node by simply stealing the best moves features from all the other contenders and making them faster. We’ve written before about how Bun is winning the benchmark battle by extending Safari’s JavaScriptCore engine, utilizing Zig, and optimizing like crazy. It combines a hybrid of Web and Node APIs to let it run as an edge runtime or on the server, and it’s getting very close to full Windows support. Bun is still growing like crazy, but we’ll get a true test of its popularity once it adds full support for frameworks like Next.js and Remix.

Bottom Line: Like most cage matches, we have a lot of promising contenders, but they still have a long way to go to catch the top dog, Node.js. For now, network effects and first-mover advantage still have Node firmly in the lead, but all this competition is driving some promising innovations throughout the ecosystem.

---

Basedash automatically turns your database into a full admin panel

…and it does it in 5 minutes, for free.

You just connect any database to Basedash, and it immediately gives you a beautiful AI-generated interface with every internal tool your team needs to visualize and edit your data:

• Dashboards and charts that let you filter, sort, and edit your production data.

• Multiplayer data editor that lets anyone on your team view and edit your DB with the familiarity of a spreadsheet (including images).

• Actions that let you easily connect your DB to external APIs (like GitHub or Slack), or internal APIs to trigger business logic.

Go try it out for free — even if you don’t plan on using it forever, it’s worth taking 5 minutes to see the magic for yourself.

---

function safeUpdate(obj, key, value) {
  if (!obj.hasOwnProperty(key)) {
    obj.key = value;
  }
}

const user = {
  name: "Alice",
  age: 30
};

safeUpdate(user, "country", "USA");

---

1. Redis is no longer open source. Between this and the PlanetScale news, I’m starting to get the feeling that for-profit software companies might indeed be interested in making profits 🧐.

2. Anthony Fu wrote a good article about Mental Health in Open Source, based on his experience as one of the most prolific OSS maintainers in the JavaScript ecosystem.

3. Cassie Gatton wrote about How to optimize your JS bundle sizes with Codecov’s new Bundle Analyzer. It works with Rollup, Vite, and Webpack to help you diagnose issues before they cause performance problems for your users. [sponsored]

4. JSON Canvas is an open file format for infinite canvas data, so you can view and organize information like a digital whiteboard.

5. The React Native team wrote about RN’s new architecture, which has been a WIP since 2016. It’s still experimental, but you should be able to use it in production before the end of the 2029 (but don’t quote me on that).

6. The RxDB team wrote about WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport.

7. romgrk wrote a refreshingly nuanced article about Optimizing Javascript for fun and for profit. Tbh, optimizing my JS has never brought me more fun or profit, but I appreciate the sentiment.

8. CarbonQA provides high-quality QA services for dev teams, so you never have to waste engineering time on QA testing ever again. Their US-based QA testers will break your app repeatedly, so that your developers (or users) don’t have to worry about it. [sponsored]

9. The Vite team just released VitePress 1.0, their SSG that applies a theme to your Markdown source content and generates static HTML pages that can be deployed anywhere.

10. Shiki is a new, “beautiful yet powerful” syntax highlighter — or as I like to call it, the Jin Kazama of syntax highlighters. Yes, I’ve been playing a lot of Tekken 4 lately, and yes, Jin is a beautiful man (even with those mid 2000s graphics).

---

This one was for the beginners.

function safeUpdate(obj, key, value) {
  if (!obj.hasOwnProperty(key)) {
    obj.key = value;
  }
}

Our bug is that we’re adding a literal key property to our object.

console.log(user.key) // "USA"

In JavaScript, if you want to use a variable as the key of an object, you need to use bracket notation instead of dot notation.

function safeUpdate(obj, key, value) {
  if (!obj.hasOwnProperty(key)) {
    obj[key] = value;
  }
}