Web Assembly in a Nutshell
Do you have a minute to talk about the word of Web Assembly? Did you know you can write any code you want in Rust, and transform it to be used within your Browser?
Do you have a minute to talk about the word of Web Assembly? Did you know you can write any code you want in Rust and transform it to be used within your browser? Can you imagine importing a parsing library coded in C and importing it in your code just like this?
import loadModule, { parse } from '@lib/tree-sitter-wasm
loadModule()
.then(() => parse(string, 'golang'))
.catch(error => throw InvalidSyntax(string))What is Web Assembly?
WebAssembly (Wasm) is a binary instruction format that runs in web browsers and other environments. It is designed to be fast, efficient, and provide near-native performance for web applications. It allows developers to write complex, high-performance web applications in C, C++, and Rust.
WebAssembly aims to provide a common platform for delivering high-performance applications in a portable and secure manner, making it a fundamental part of the modern web platform.
Main Benefits
WebAssembly is important because it offers several key benefits:
Performance: WebAssembly provides near-native performance, making it possible to run complex and demanding browser applications with speed similar to native applications. Imagine having all the benefits from Rust but in a Javascript environment 🤯
Language support: WebAssembly supports various programming languages, allowing developers to use their preferred language to build web applications. Rust has been very popular in the Wasm ecosystem.
Interoperability: WebAssembly is designed to work seamlessly with JavaScript, the language of the web, and can be used in combination with JavaScript to build robust and versatile web applications.
Portability: WebAssembly is platform-independent, meaning that applications written in WebAssembly can run on any device that supports a WebAssembly-enabled browser without any modification or recompilation.
Security: WebAssembly runs in a secure sandboxed environment within the browser, which helps to protect users from malicious code and improves the overall safety of the web.
Not everything is perfect.
Some of the most significant drawbacks of Web Assembly I can think of:
Complexity: The low-level nature of WebAssembly makes it more difficult for developers to work with than high-level languages like JavaScript.
Debugging: It can be much harder to debug your WASM modules ðŸ«
Compatibility: Web Assembly is not supported in all browsers; you might want to check which ones actually support it here!
Who uses WebAssembly?
The folks at Rome are writing all of their tooling with Rust, making it highly performant.
Most of the core of Prisma ORM is written in Rust; personally, I have read a lot of their code; they even have a language server that can analyze code and lint/format it so developers can use it on their IDEs to detect errors.
Of course, Figma has been using WASM since 2017 to obtain the high performance they provide to their users.
Some Next.js tools, like SWC are written in Rust and ported with WASM to the browser.
How do I get started playing with it?
If you know a bit of Rust, you can play with `wasm-bindgen` to export simple prints to the browser, bundle a Wasm + JS file, and import that in the browser. Specifically, using wasm-bindgen allows you to import the Javascript files directly within your code without using webpack loaders/plugins.
There are also some libraries made in Golang you might want to check out!
Conclusion
Web assembly offers many benefits if you have heavy use cases in the browser that you might want to gain some performance on. It’s not an easy entry to get started with it. Still, I think it’s going to be worth spending some time trying to understand how to use it; with the trend of Rust being a popular and loved language and its capabilities to generate WASM modules, we can open new doors into the front-end development world.