Why target WebAssembly with Rust?

Take a deep breath and be ready to dive into a big web standard of the W3C...

🫧

🫧

Table of contents:

  • No, JavaScript in the browser can not do everything...
  • Ok, but can we use NodeJS to solve it?
  • Or WebAssembly 🕸️? But what that is?
  • Advantages 👍🏻 and specificities ⚠️ of WebAssembly.
  • Why Rust 🦀 may be a good choice to target to WebAssembly?

WASM == WebAssembly

What IS NOT possible to code in the browser using JavaScript?

And

What IS possible to code outside the browser using other languages?


Use case: "I want to make an audio editor in my browser!"

What are the JavaScript limitations?



  • JS was not designed for real-time computations:

  • high-level languages have what we call a GC (Garbage Collector) to manage memory automatically at runtime.

  • but it pauses the runtime randomly to clean memory. So there's no more real-time computations...

Use case: "I want to make an audio editor in my browser!"

What are the JavaScript limitations?



  • JS was not designed to manipulate binary data type:

  • Check the story of WebGL and the new Typed Arrays in JS to correct bugs performance using the graphics driver.

  • Also, the Web APIs are made to work around this problem: WebAudio API, WebGL API, etc. but they're implemented in more low-level language, like C, C++ or Rust)!
Can we overcome the JavaScript limitations?

  • - «With NodeJS I can use packages wich contains some C, C++ or Rust code! (with fast and realtime computations)»

  • - «The npm package ´bcrypt´ contains some C and C++, and JavaScript can 'understand' it»

  • - «So why not use them ?!»

Sadly we can't, the browser won't be able to run them

Let's talk about JavaScript story


  • That's not the first time that we want the browser to be able to do everything!
  • We had: Adobe Flash, Java Web Applet, etc.

  • We have now all the Web Platform APIs to help us (Web Audio, Web GPL, etc.)

  • And we could talk about the 'performance war'
Let's talk about JavaScript story
  • And, let me tell you the story of Google Native Client:
  • It was a feature implemented in Chrome that allows user to run apps written in C++ directly within the browser ...
  • ⚠️ but it was disabled due to a big security issue found....
  • 😵 the attacker would be allowed to escape the browser sandbox (this means a web page could access data on your computer)!!!
So how to have more possibilities in the browser ?...
WebAssembly 🕸️

Use case: "I want to make an audio editor in my browser!"

Try me

Web (browser) + Assembly (machine language) = WebAssembly

Some code worth 1000 words:

WAT (.wat) format of WASM code (.wasm)

An image worth 1000 words:

From MDN's official documentation:

“WebAssembly has huge implications for the web platform — it provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that previously couldn't have done so.”

🖇️ Flexibility

💼 Portability

🚀 Performance

🖇️ Flexibility:

Use multiple languages in the browser!


Rust C C++
Go AssemblyScript C#
F# Cobol Zig, D, Kotlin, Swift...
🖇️ Flexibility:
  • Bring large applications or game engines to the web, without sacrificing performance or having to re-write them from scratch.

  • Integrate libraries written in other languages in your projects.
🚀 Performance:

  • You can do performance-intensive tasks like computations for 3D games, virtual, augmented reality or computer vision.

  • Most calculations could be done on the client side, these applications no longer need a server. For example, Figma continues to work without a connection.
🚀 Performance&Speed:

  • The .wasm files are smaller, then faster to download than bigger JS files

  • Wasm is faster to decode and execute than JS. JS is easy and fast to write, but it also means that the JavaScript engine has a lot more work to do (parse, compile and optimize the code).
🚀 Performance&Speed:

How fast ?

This is a rather complex question, because it depends on a lot of factors

💼 Portability:

Run on all browsers!

  • Google Chrome’s V8 engine and Mozilla Firefox’s SpiderMonkey, include a WebAssembly virtual machine (or runtime).

  • « One .wasm file will run identically on all Browser, OS and machines! »
WebAssembly is not a JavaScript killer:
  • JS acts like glue code between the browser and WASM.

  • Web APIs are only exposed in JS.
WebAssembly won't disappear tomorrow:
  • It's a standard from the web consortium since 2017!

  • It can also be executed outside of the browser environment (WASI).

Use case: "I want to make an audio editor in my browser!"

What languages can I use?

Why target WebAssembly with Rust?
Why target WebAssembly with Rust?

The main reason is:
  • Rust's memory safety guarantees make memory bugs truly rare.

  • Others reasons: size of .wasm files produced, great community and tooling!

Questions?! 🐟

Thank you for your attention!

To continue the discussion:

@mastodon: hachyderm.io/@Nicolas_h

NB: I'm not sponsored (yet?) by WASM or Rust ... :)

Bibliography

A few other Wasm demos:

To compare JS and Wasm perf:

Others:

Learning resources