@Author: Garfield Zhu

WASM Quick Tour

WASM is interesting to me because it puts another runtime into the browser. It does not need to replace JavaScript. Rust can keep the data and do the calculation, JavaScript can still do the browser things.

The old Rust and WebAssembly book is still useful. It is a legacy book now, but the flow is easy to follow: wasm-bindgen exports the Rust API, wasm-pack makes the package, and JavaScript connects it with the canvas and events.

The Game of Life project is a good small example. Rust owns the universe and moves it to the next generation. JavaScript reads the memory and paints the cells. Click a cell, pause it, reset it. The boundary becomes visible.

The playground

This is the little playground I like. Click cells to make a pattern, pause it, and reset the world when it becomes too chaotic. The frame counter shows the split. WASM updates the state, JavaScript schedules and paints each frame.

If the embedded view does not load, open the playground directly. The source is in the wasm-game-of-life folder.

How I put WASM in this MDX page

I did not put the Rust package inside Next.js for this demo. I build it in the Aloha.zone.io repository with wasm-pack --target web. GitHub Actions copies the package and the small web page to GitHub Pages. Then the MDX uses an <iframe> to show that page.

For the blog, I only need three things: a fixed URL, garfieldzhu.github.io in frame-src, and a normal link if the iframe cannot load. The not-prose wrapper keeps the game layout away from the article style.

This split is simple. The WASM app has its own build. The blog does not load Rust during server rendering. It is another page, but it works.

Next plan: WASM inside MDX

The iframe works, but it is still another page. For a more interactive article, I want to make the WASM a real MDX component:

1. Keep the Rust crate and wasm-pack --target web output small.
2. Add a client-only WasmGameOfLife React component and register it in components/MDXComponents.tsx.
3. Let the component handle loading, canvas, buttons, and errors. The MDX only uses something like <WasmGameOfLife />.
4. Put the component between short explanations. Each step can change the Rust state and show the result right away.
5. Keep a fallback link. Test the production build, mobile layout, and a browser with WebAssembly disabled.

This will make the article more playful. It also couples the MDX build, browser React code, and WASM package together. I think that is a good trade for the next version.

My current idea is simple: WASM is not a replacement for the Web. It is one place to run the part that benefits from Rust. The frontend still owns the browser experience.