What is WebAssembly (WASM) ?

WebAssembly (Wasm) is a fast binary instruction format designed to run in web browsers at near-native speed.

It acts as a bridge, allowing developers to use languages like C, C++, or Rust and compile them into code that works efficiently in the browser.

It is lightweight and portable.

Why?

It solves a critical problem: the web's dependence on JavaScript.

• Javascript is vercatile but its not always the best option to choose.

• Its not always the best choice for Performance intensive tasks like Gaming, Video editing and rendering Complex web applications and Flutter Web.

• Here Wasm comes and ensures speed.

How?

Wasm runs optimised code into your browser.

• We write code in High Performing code like Rust and C++.

• then Complie them into WASM and

• run alongside with JavaScript.

Features:

• Speed: Executes code at near-native speeds.

  • WASM is 1.15-1.67x faster than JavaScript on Google Chrome on a desktop, and

  • is 1.55x slower than native in Chrome, and 1.45x slower than native in Firefox.

• Compatibility: All major browsers allow WebAssembly if Content-Security-Policy is not specified, or if unsafe-eval is used, but behave differently otherwise. Chrome requires "unsafe-eval".

• Security: Runs in a sandboxed environment which makes it secure.

  • The design of WebAssembly promotes safe programs by eliminating dangerous features from its execution semantics, while maintaining compatibility with programs written for C/C++. (source)

Realworld Applications of WebAssembly

• Gaming: Powers high-performance games, especially those with complex graphics and physics.

• Media processing: Accelerates video and audio editing, encoding, and decoding, like Figma use Wasm for speed.

• Machine learning: Enables faster execution of machine learning models.

• Flutter Web: WebAssembly enhances the performance of Flutter Web apps by enabling near-native execution for Dart code, reducing loading times and improving user experience.

Getting Started with WebAssembly

• Write your code in a language like Rust or C++.

• Compile it into Wasm using tools like Emscripten (C/C++) or wasm-pack build (Rust).

  • wasm-pack build :Compiles your Rust code to WebAssembly and runs wasm-bindgen on it, creating a JavaScript file that wraps the WebAssembly file into a module the browser can understand.

• Integrate Wasm modules into your web app with JavaScript.

  For Flutter Web, the Wasm runtime can optimize how Dart code executes, improving app performance.

How to use?

To use WebAssembly in JavaScript, you first need to load your module into memory before compiling and exemplifying it.

Here is the way to fetch WebAssembly bytecode, and run it:

WebAssembly is not yet integrated with <script type='module'> or import statements, thus there is not a path to have the browser fetch modules for you using imports.

Load Using Fetch :

WebAssembly.instantiateStreaming(fetch("someDummy.wasm"), importObject).then(
  (results) => {
    // Do something with the results!
  },
);

Running Webassembly code:

Once you have your WebAssembly instance in your JavaScript, you can start using its exported features through the WebAssembly.Instance.exports property.

async function loadWasmModule() {
  try {
    const { instance } = await WebAssembly.instantiateStreaming(fetch("myModule.wasm"), importObject);
    instance.exports.exported_func(); // Call exported function
    console.log("Memory Buffer:", new DataView(instance.exports.memory.buffer));
    (instance.exports.table.get(0) || console.warn("No function found at index 0."))();
  } catch (error) {
    console.error("Error loading module:", error);
  }
}

loadWasmModule();

For more understanding on how to compile & instantiate, head to this MDN Docs for complete guide.

Challenges

• WebAssembly has fewer debugging tools than JavaScript.

• Wasm cannot manipulate the DOM without JavaScript direcly, so both often need to work together.

Future of WebAssembly

Wasm is rapidly evolving, with features like:

• multithreading

• garbage collection being added.

  Making it even more appealing for web apps. It’s adoption with frameworks like FlutterWeb is a signal for bright future for high-performance web development.

• WebAssembly is a transformative technology that is ready to revolutionize web development.

• Its ability to execute code at near-native speeds opens up new possibilities for performance-intensive applications on the web, ranging from gaming and 3D rendering to machine learning and cryptography.

Conclution:

WebAssembly works with JavaScript in modern browsers, supporting languages like C, C++, Go, and Rust. It enhances web development with nearly native speeds without replacing JavaScript. WebAssembly is valuable for performance-heavy applications, offering new possibilities.

Explore the official WebAssembly documentation for more details!