Background #
WebAssembly (WASM) is executed at near-native performance in browser and the Rust WASM ecosystem is growing continuously. With Yew’s API being similar to React’s, I’m excited to transition the application to this new technology.
Setup #
Ecosystem #
- yew: Builds WASM with
react-liked APIs. - yew-router: Router library likes
react-router. - gloo-net: HTTP requests library. Mainly for
fetch. - trunk: WASM build tool.
- web-sys: Bindings of Web APIs. Usually for more complex controls over elements.
- console_log: Output logs to
console.log. - wasm-bindgen-futures: Calls async function in sync. Uses with
gloo-net. - wasm-opt: Optimizer for WASM.
Tailwindcss #
Trunk has a section about setting up tailwind, which requires using tailwindcss cli.
Icons #
Icons have to be loaded manually in Rust. Here is an example of how icon files being loaded into WASM, where it loads SVG files from heroicons.
Comparison #
Size #
The React version is full version, with different libraries for specific jobs (react-query, react-router, jotai, react-hook-form) and the bunlde size is only 330KB.
The WASM version is yet to be complete, it is about ~75% where validation, shortcut keys and tag components are missing. With minimal dependencies and optimized by wasm-opt, the binary size is 398KB. I believe it would get pass 500KB when the transition is done.
Shrinking the Size #
WASM binary tends to be larger than pure JS bundle. With this step, the size of wasm can cut down by 50%, from ~600KB to 398KB. By compressing with gzip, the size can go down by another 50% to ~150KB, which is quite good.
In Cargo.toml, add lto = true in the [profile.release] section, and set opt-level = 'z'.
[profile.release]
lto = true
opt-level = "z"
After build, run wasm-opt
wasm-opt -Oz -o output.wasm input.wasm
For such, I simplified the build process into one command
./cmd.sh build-wasm
Thoughts #
Security #
WASM provides stronger security than JavaScript and TypeScript through its sandboxed execution, strict memory access rules, and lack of dynamic code features like eval, reducing common attack surfaces.
Compiled from secure languages like Rust, WASM benefits from compile-time safety and fine-grained access control via explicit import and export interfaces.
One Code #
With WASM, developers can compile shared logic into a single module that runs efficiently on both the client and server. This eliminates duplication, ensures consistency, and streamlines full-stack development. Which explains the rise of tRPC for type-safe, end-to-end communication.
SSR #
WASM excels in server-side rendering (SSR) as it eliminates the need for a template engine, allowing developers to use the same rendering logic and components across the client and server seamlessly.
Libraries #
A limitation of Rust WASM is its relatively small ecosystem, with fewer libraries and tools compared to JavaScript. This can slow development and require additional effort to bridge functionality gaps.
User Experience #
WASM binaries are often larger than equivalent JavaScript bundles, which can lead to longer load times and negatively impact user experience, especially on slow networks.