Modern.js is a giant mystery meat enchilada

Helllllo my friends.

We just published The Interactive Guide to Rendering in React. Check it out if that’s your kink.

Today’s issue: OSS libraries from TikTok, platform nerds boycotting Nintendo, and a giant supercluster.

Welcome to #182.

---

Modern.js is a giant mystery meat enchilada

There’s no better reflection of modern life than scrolling TikTok: you’ll always get a mix of some highs, some lows, and some deeply unsettling ASMR videos. Another 90-minute poop well spent ✅.

So it makes sense that when the Web Infra team from TikTok’s parent company, ByteDance, created an open-source “web engineering system,” they chose to name it Modern.js. And it might be coming to a codebase near you.

Wtf is a web engineering system? Great question. Turns out, that’s corp-speak for “a bunch of different OSS tools rolled into one giant mystery meat enchilada.” Modern.js comes with a React meta-framework, an npm module builder, a doc site builder, and a build engine. You can use all of these tools together or on their own separately.

The meta-framework forms the main foundation for the rest of the Modern.js ecosystem, so let’s take a closer look at it:

• Similar features to Next.js — You get file-based routing, default TS support, and all the rendering options (SSR, SSG, CSR) out of the box. But there are some key differences too.

• Reinventing the wheel(s) — It’s built on Rspack, a Rust-based bundler that compiles 5-10x faster than Webpack and was also created by the Web Infra team. The framework also includes a custom-built state management library, monorepo, and micro frontend solution, because why not?

• Integrated BFF approach — Backend for Frontends is the idea of having one backend for each user experience. Modern.js supports this in a few clever ways, like allowing you to define APIs by adding a function inside the api/ directory, which lets you import that API as a function into your page.

Bottom Line: As far as giant mystery enchiladas go, this one seems like it could actually be a net positive for my productivity.

---

Appwrite Cloud finally hit private beta 👀

And it looks like a gamechanger for the uber-popular, open-source backend server.

Quick review: Appwrite is one of the most beloved OSS projects out there (over 30k GitHub stars 😱), because it abstracts away the worst parts of building a backend with a set of simple REST APIs.

But it always required you to be self-hosted — until now. So let’s take a closer look at what Appwrite Cloud gives you, and see why devs are fighting to get those private beta invites:

• Fully managed backend infrastructure – No more worrying about machine configuration, security, maintenance, etc.

• Auto scaling – So your app can easily handle traffic spikes without tanking performance.

• Built-in security – Advanced security features like DDoS protection, WAF rules, and lots more come standard.

Apply for the private beta to get early access. I promise it’s cooler than Bluesky Social.

---

How can you set a timeout for a fetch request?

Answer below.

---

1. If you’ve ever thought to yourself, “why tf is this rendering?” – The Interactive Guide to Rendering in React is probably for you.

2. Aiden Bai created Hundred - a petite, toy version of Million.js, the trendy virtual DOM for React.

3. Zero created a super easy way to integrate 3rd-party API credentials into your project. Their SDK is available for TypeScript, Rust, Python and Go. [sponsored]

4. Keith Grant wrote about how Scoped CSS is back. Now I just need him to explain why flare-cut jeans are cool again.

5. Yagiz Nizipli wrote about Reducing the cost of string serialization in Node.js core. Not enough mystery meat enchilada metaphors IMO but still good.

6. Varun Vachhar wrote about how he and the Storybook team built a cool 3D animation for Storybook Day. For some reason, the other parents didn’t like it when I dressed up as Princess Fiona in Ogre form for Storybook Day at my son’s school.

7. Supercluster is a fast geospatial point clustering library for browsers and Node. It was also my team’s nickname for our production codebase at my last job.

8. Somehow, Jasper discovered that the Wii U game, Mario vs. Donkey Kong: Tipping Stars was written in HTML and JavaScript. Unfortunately, that means every #UseThePlatform zealot is now morally obligated to boycott Nintendo.

---

How can you set a timeout for a fetch request?

Since the fetch API does not have a built-in timeout option, you can use the AbortController and Promise.race() to implement a timeout. Using Promise.race is a nice trick because it allows you to abort a single request or multiple requests at the same time.

const abortController = new AbortController();
const signal = abortController.signal;

const fetch1 = fetch("https://api.example.com/data-1", { signal });
const fetch2 = fetch("https://api.example.com/data-2", { signal });

const timeout = new Promise((_, reject) => {
  const timeoutId = setTimeout(() => {
    reject(new Error("Request timed out"));
    abortController.abort(); // Abort the fetch request
    clearTimeout(timeoutId); // clear the timeout
  }, 5000);
});

Promise.race([fetch1, fetch2, timeout])
  .then((response) => console.log(response))
  .catch((error) => console.error(error));