Calculated..World

The exact same WebAssembly downloaded lazily running at the edge and in the browser. A project by Patrick Smith.


For decades CDNs have reliably served static content close to users. And now the edge brings the ability to run code close to users too. But wouldn’t it be great if adding new code was as easy as uploading an image? Sounds like a security hole waiting to be exploited right?

WebAssembly allows code to be run safely in a sandbox. And the same WebAssembly can run on a server, in a browser, or even directly on-device like your phone.

The dream of universal code doesn’t have to be only by using JavaScript. We can have a new cloud-first ecosystem of libraries, ones that run in every popular programming language, that are consistent across all environments and front/back-ends, and can be downloaded on-demand from a simple URL.


Server-rendered HTML

Server-rendered HTML with client interaction (click on things)


SVG

Black Square
Black square rendered at the edge
View HTML
<img
  src="/collected-public/wasm-svg/a6e388fd5d780de90144044066d2eeb889c1f930c85b1fff0a6b530fad391f20"
  alt="Black Square"
/>
Blue Square
Transparent Blue Square rendered at the edge
View HTML
<img
  src="/collected-public/wasm-svg/a6e388fd5d780de90144044066d2eeb889c1f930c85b1fff0a6b530fad391f20?global.color_hex=0x2299ee77"
  alt="Blue Square"
/>
Your color choice rendered in the browser

How does it work?

Rendering HTML on the edge and in the browser. It starts from an object store (like S3 or GCP Storage) holding an example abc.wasm file, loaded by the edge server which renders the initial HTML sent to the user’s browser, which then loads an instance of the same abc.wasm, and adds event handlers which are forwarded to the wasm instance, re-rendering the HTML.

What else can you create with WebAssembly?


This site you fine viewer are looking at is authored using Astro in server mode, uses Deno Deploy for edge hosting, Google Cloud Storage to store .wasm files, and custom HTML elements written with a handful of JavaScript.

But this approach is tied to none of these. It could easily work as well with S3 plus Next.js running on Node.js.