Reid Burke

Mark Dalgleish:

Recently we shipped a preview of React Router with support for React Server Components (RSC) as well as low-level APIs for RSC support in Data Mode. With the release of React Router v7.9.2, we’re excited to announce that preview support for RSC is now also available in Framework Mode.

To get started, you can quickly scaffold a new app from our unstable RSC Framework Mode template:

npx create-react-router@latest --template remix-run/react-router-templates/unstable_rsc-framework-mode

npx create-react-router@latest --template remix-run/react-router-templates/unstable_rsc-framework-mode

React Router has been developing Framework Mode RSC for some time. Here’s a demo:

Mark continues:

To enable RSC Framework Mode, you simply swap [the React Router Vite plugin] out for the new unstable_reactRouterRSC Vite plugin, along with the official (experimental) @vitejs/plugin-rsc as a peer dependency.

npm install @vitejs/plugin-rsc

npm install @vitejs/plugin-rsc

import { defineConfig } from "vite";
import { unstable_reactRouterRSC } from "@react-router/dev/vite";
import rsc from "@vitejs/plugin-rsc";

export default defineConfig({
  plugins: [
    unstable_reactRouterRSC(),
    rsc(),
  ],
});

import { defineConfig } from "vite";
import { unstable_reactRouterRSC } from "@react-router/dev/vite";
import rsc from "@vitejs/plugin-rsc";

export default defineConfig({
  plugins: [
    unstable_reactRouterRSC(),
    rsc(),
  ],
});

The build output changes from a React Router ServerBuild to a request handler function with the signature (request: Request) => Promise<Response>.

The heavy lifting was moved into RSC Data Mode making the RSC Vite plugin much smaller than the stable Vite plugin:

As noted in our post on “React Router and React Server Components: The Path Forward”, the great thing about RSC is that this new Framework Mode plugin is much simpler than our earlier non-RSC work. Most of the framework-level complexity is now implemented at a lower level in RSC Data Mode, with RSC Framework Mode being a more lightweight layer on top.

k9s is a terminal based UI to interact with your Kubernetes clusters by Fernand Galiana. I use this tool frequently and have sponsored the developer since December 2024.

 brew install derailed/k9s/k9s

 brew install derailed/k9s/k9s

Branch Education:

Inside microchips are nanometer-sized transistors and wires, but how are these nanoscopic structures built? Well, in this video, we’ll explore the EUV Photolithography System built by ASML. This 150-million-dollar machine is essentially a microchip photocopier; it takes the design of a microchip and copies it across hundreds of microchips on a silicon wafer. This EUV Photolithography System is one of the most complex machines ever made, and it encompasses an entire world of science and engineering within it. Specifically in this video, we’ll dive deep into the EUV Lithography tool and explore how 13nm EUV light is produced, how the EUV light is focused onto a photomask, how the photomask, or mask, moves around, what the patterns on the mask look like, the projection optics, and how the wafer moves around and the wafer stage.

Recently CNBC toured ASML facilities around the world — including San Jose, California — to explain the complex production of High NA EUV photolithography.

Via itopaloglu83 on HN.

Google:

pprof is a tool for visualization and analysis of profiling data.

pprof reads a collection of profiling samples in profile.proto format and generates reports to visualize and help analyze the data. It can generate both text and graphical reports (through the use of the dot visualization package).

Combine with pprof-nodejs to profile Node.js apps with V8 CPU and Heap profilers.

Callgraphs:

Kenton Varda and Steve Faulkner at Cloudflare:

Allow us to introduce Cap’n Web, an RPC protocol and implementation in pure TypeScript.

Cap’n Web is a spiritual sibling to Cap’n Proto, an RPC protocol I (Kenton) created a decade ago, but designed to play nice in the web stack.

No schemas, zero dependencies, 10 kB, bidirectional calling, pass functions by reference, pass objects by reference, promise pipelining, and capability-based security patterns.

Example client:

import { newWebSocketRpcSession } from "capnweb";

// One-line setup.
let api = newWebSocketRpcSession("wss://example.com/api");

// Call a method on the server!
let result = await api.hello("World");

console.log(result);

import { newWebSocketRpcSession } from "capnweb";

// One-line setup.
let api = newWebSocketRpcSession("wss://example.com/api");

// Call a method on the server!
let result = await api.hello("World");

console.log(result);

Example RPC server:

import { RpcTarget, newWorkersRpcResponse } from "capnweb";

// This is the server implementation.
class MyApiServer extends RpcTarget {
  hello(name) {
    return `Hello, ${name}!`
  }
}

// Standard Workers HTTP handler.
export default {
  fetch(request, env, ctx) {
    // Parse URL for routing.
    let url = new URL(request.url);

    // Serve API at `/api`.
    if (url.pathname === "/api") {
      return newWorkersRpcResponse(request, new MyApiServer());
    }

    // You could serve other endpoints here...
    return new Response("Not found", {status: 404});
  }
}

import { RpcTarget, newWorkersRpcResponse } from "capnweb";

// This is the server implementation.
class MyApiServer extends RpcTarget {
  hello(name) {
    return `Hello, ${name}!`
  }
}

// Standard Workers HTTP handler.
export default {
  fetch(request, env, ctx) {
    // Parse URL for routing.
    let url = new URL(request.url);

    // Serve API at `/api`.
    if (url.pathname === "/api") {
      return newWorkersRpcResponse(request, new MyApiServer());
    }

    // You could serve other endpoints here...
    return new Response("Not found", {status: 404});
  }
}

One of the more interesting parts of Cap’n Web is how lists are handled:

Often, GraphQL is used to say: “Perform this query, and then, for every result, perform this other query.” For example: “List the user’s friends, and then for each one, fetch their profile photo.” In short, we need an array.map() operation that can be performed without adding a round trip. Cap’n Proto, historically, has never supported such a thing. But with Cap’n Web, we’ve solved it. 

let user = api.authenticate(token);

// Get the user's list of friends (an array).
let friendsPromise = user.listFriends();

// Do a .map() to annotate each friend record with their photo.
// This operates on the *promise* for the friends list, so does not
// add a round trip.
let friendsWithPhotos = friendsPromise.map(friend => {
  return {friend, photo: api.getUserPhoto(friend.id))};
}

// Await the friends list with attached photos -- one round trip!
let results = await friendsWithPhotos;

let user = api.authenticate(token);

// Get the user's list of friends (an array).
let friendsPromise = user.listFriends();

// Do a .map() to annotate each friend record with their photo.
// This operates on the *promise* for the friends list, so does not
// add a round trip.
let friendsWithPhotos = friendsPromise.map(friend => {
  return {friend, photo: api.getUserPhoto(friend.id))};
}

// Await the friends list with attached photos -- one round trip!
let results = await friendsWithPhotos;

.map() is special. It does not send JavaScript code to the server, but it does send something like “code”, restricted to a domain-specific, non-Turing-complete language. The “code” is a list of instructions that the server should carry out for each member of the array.

But the application code just specified a JavaScript method. How on Earth could we convert this into the narrow DSL?

The answer is record-replay: On the client side, we execute the callback once, passing in a special placeholder value. The parameter behaves like an RPC promise. However, the callback is required to be synchronous, so it cannot actually await this promise. The only thing it can do is use promise pipelining to make pipelined calls. These calls are intercepted by the implementation and recorded as instructions, which can then be sent to the server, where they can be replayed as needed.

This is one of the most useful parts of GraphQL but so much simpler. The serialization format is JSON which is a big plus for web developers.