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!"
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!