Bank runs, AI, and Signals

Today’s issue: Vercel’s latest trademark battle, all types of signals, and more middle school humor than usual.

Welcome to #170.

---

Signals: strong, weak, or mixed?

What do bank runs, AI, and Signals have in common? They’re all anyone has been talking about lately. But unlike bank runs and AI, Signals won’t make you homeless. Let’s break them down.

The Problem: Almost all popular frameworks nowadays utilize a component based architecture, where components are responsible for managing their own state and describing the UI based off of that state. To get your application, you then compose all of your components together — and in doing so, naturally create a tree of interconnected components, each managing their own complexity.

Wonderful, and in that wonder lies the problem. Often times, two or more components will rely on the same piece of state –- and often times, those components aren’t anywhere near each other in the component tree. The rule of thumb in these scenarios is to lift that state up to the nearest parent component and then pass it down to any component that needs it.

In doing so, there’s a performance implication. If lifted up state changes in a framework like React, the component that manages that state as well as all of its children need to re-render (or you need to do the referential equality dance with memo and useMemo).

The Solution: Signals.

Signals are a way for you to add state to your application. However, unlike React where your application re-renders every time state changes, Signals enable granular state updates. This means that when a Signal value changes, only the most necessary work to update the UI will happen – no rendering and no diffing.

These granular state updates are massive for performance since they let your app skip expensive rendering work. And not only that, but since Signals are always referentially stable (meaning their location in memory never changes), you never have to worry about them triggering unnecessary component renders when you pass them around your application.

Bottom Line: I kind of like to think about Signals as Object.observe (RIP ⚰️) The Good Parts™. It seems like every framework not named React is leaning heavily into them. We’ll see how that plays out for them. Regardless, they’re not without their reasoning.

---

The Appwrite Cloud (private beta) is finally here 👀

Somebody call John Mayer and tell him he doesn’t need to be “Waiting on the World to Change” anymore.

Because the wait is officially over — for Appwrite’s new, fully hosted backend.

Wtf is Appwrite? It’s an open-source, end-to-end backend server for web and mobile apps. Developers love it (almost 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 self-host… until now. So let’s take a closer look at what Appwrite Cloud gets you, and see why devs are fighting on Twitter over 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.

---

JavaScript has a new(ish) Intl API. You may be thinking “Internationalization? I only have users in the US, why would I use this?“. You fool, take a look. Here’s what it can do.

Format Dates: Similar to the toLocaleDateString method on the Date object, you can use this to format Dates, but with Intl you get some extra options like timeZone.

const date = new Date(Date.now());

new Intl.DateTimeFormat("en-US", {
  timeZone: "America/Los_Angeles",
  minute: "numeric",
  hour: "numeric",
}).format(date);

// 9:45 AM (returns the current time in that timeZone)

Format Numbers: You can also use Intl to format Numbers.

new Intl.NumberFormat("en-GB", {
  style: "unit",
  unit: "liter",
  unitDisplay: "long",
}).format(1); // '1 litre'

Or in America, we refer to this as a “Large Farva”.

Format Lists: As Oxford comma maximalists, we appreciate that it can render lists properly too.

const list = ["Motorcycle", "Bus", "Car"];

new Intl.ListFormat(
  "en-US", 
  { style: "long", type: "conjunction" }
).format(list); // 'Motorcycle, Bus, and Car'

Text Segmentation:

The last feature we’ll highlight (there are more) is language specific text segmentation. Doing a str.split('') on non-english strings is a good way to introduce bugs.

const str = "吾輩は猫である。名前はたぬき。";
console.table(str.split(" "));
// ['吾輩は猫である。名前はたぬき。']
// The two sentences are not correctly segmented.

const str = "吾輩は猫である。名前はたぬき。";
const segmenterJa = new Intl.Segmenter("ja-JP", { 
  granularity: "word" 
});

const segments = segmenterJa.segment(str);

console.table(Array.from(segments));
// [
//   {
//     segment: "吾輩",
//     index: 0,
//     input: "吾輩は猫である。名前はたぬき。",
//     isWordLike: true,
//   },
// ];

---

1. TypeScript 5.0 was just released, but since the TS team is too cool-and-quirky for SemVer, it’s not a “major” release. Still has some cool new features though.

2. Retool Developer Day is happening on March 29th 🥳. Their head of engineering will be diving deep into Retool’s new GPT-powered features, Python support, and brand new datastore product. Save your spot now! [sponsored]

3. Superflare is an experimental full-stack toolkit for Cloudflare Workers that’s (probably) named after one of Flareon’s best moves.

4. Did you know that React is working on an experimental compiler that automatically generates the equivalent of useMemo and useCallback calls to minimize the cost of re-rendering, while retaining React’s programming model? Well regardless, here’s an article by Angular/Qwik creator Misko Hevery about why it only solves part of the problem.

5. Rspack is a new, Rust-based web bundler created by the ByteDance team that claims to be 5-10x faster than Webpack. Its name brings back my repressed middle school memories of kids constantly saying, “Respack my authoritah,” in the Cartman voice.

6. Juntao Qiu wrote an in-depth article about Modularizing React Apps with Established UI Patterns.

7. It took 5 years after Hooks were released, but the new React Documentation is now live.

8. Turbowatch is an “extremely fast” file change detector and task orchestrator for Node.js. Surprisingly, this is not a Vercel project, although rumor has it that they’re trying to buy the trademark to the word “turbo” from NFL Blitz.