• 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 ?...

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

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

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

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:

Use multiple languages in the browser!

🖇️ 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?

• 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:

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

Bibliography

• Evolution of JS and the performance war
• To understand the leaks in Google Native Client (see "NaCl sandbox escape")

A few other Wasm demos:

To compare JS and Wasm perf:

• raytracer
• a video editor

Others:

• Unity game: Angry bots

Learning resources

• Recall: Differences-between-nodejs-and-the-browser