The language behind all Web Standards

I believe we all know the web is not a mess. Imagine you are building a website and suddenly need to handle API requests. If you are working with a recent timeline, you will probably use the fetch() function.

const response = await fetch("https://example.com/v1/carl-space/newsletter", {
  method: "POST",
  body: JSON.stringify({
    email,
    wantsOptionalEmails
  })
})

if (response.ok) {
  Notifications.push(`See you inbox (${email}) later!`)
}

Whether you are on Chrome, Firefox, or Safari, this function will work without any differences. That is the expected behavior. The most that might happen is some experimental implementation, such as adding support for different protocols. This consistency across Web APIs is mirrored in almost every function, class, and object. But how is this achieved without chaos? A developer using some cheap AI model could write defective native code and break thousands of sites by changing the interface of some object. Now scale that up: there are three major browsers that use different internal components and different programming languages. That is chaotic!

To solve this, browser development uses a tool called WebIDL, an interface description language that lets browsers implement definitions without the risks mentioned earlier. Its syntax feels like C mixed with a bit of Java.

typedef object JSON;
typedef (Blob or BufferSource or FormData or URLSearchParams or USVString) XMLHttpRequestBodyInit;
typedef (ReadableStream or XMLHttpRequestBodyInit) BodyInit;

interface mixin Body {
  readonly attribute boolean bodyUsed;
  [NewObject]
  Promise<ArrayBuffer> arrayBuffer();
  [NewObject]
  Promise<Blob> blob();
  [NewObject]
  Promise<Uint8Array> bytes();
  [NewObject]
  Promise<FormData> formData();
  [NewObject]
  Promise<JSON> json();
  [NewObject]
  Promise<USVString> text();
};

[GenerateInit]
dictionary FetchReadableStreamReadDataDone {
  boolean done = false;
};

[GenerateInit]
dictionary FetchReadableStreamReadDataArray {
  Uint8Array value;
};

The source of this Fetch.webidl is here.

At first glance, WebIDL feels familiar. You find type definitions and some structures that resemble JavaScript APIs, such as Promise and Blob, even if the syntax and keywords are its own. This example came from the Firefox repository because it was the first result I found while researching. When I checked the Firefox development documentation, I discovered that WebIDL does more than describe standardized interfaces for Web APIs. It also serves as input for a code generator (codegen) that produces the bindings connecting these interfaces to the browser’s native implementations, written mainly in C++.

Virtually every major browser project uses WebIDL. There are guides available, such as this one from Chromium and this one from WebKit. All of them rely on some form of codegen tool.

Every WebIDL interface is defined by the WHATWG, and there is even one for WebIDL itself.

With all this in place, it becomes possible to fork Chromium, add some integrated AI APIs, and have other browsers implement them as well. That is much better than building something proprietary /s.