Thread by @oliverjumpertz

I have spent a significant part of my dev career in web development and nothing else excites me more than WebAssembly.

Let me introduce you to the language that will not only change the web but even more.

🧵👇🏻

1/

1. What Is WebAssembly?

WebAssembly (short: Wasm or WASM) is a binary instruction format for a stack-based virtual machine.

It's a byte-code that can be executed and mainly targets the browser and the web (hence the name).

2/

WASM has two formats:

- A binary format that executed by WebAssembly runtimes
- A human-readable text format for debugging purposes

You can convert one to the other and back again.

3/

WebAssembly was first announced in 2015, and in November 2017, all major browsers had support enabled by default.

It currently exists in version 1.0 while being actively worked on to advance it even further.

Even better: It's standardized! 👇🏻

w3.org/wasm/

4/

2. The goal of WebAssembly

WebAssembly is not a language you should write yourself.

Its goal is to create a compilation target for other languages like C/C++, Rust, Python, etc.

5/

As it turns out, JavaScript is not the best compilation target for other languages.

There were and still are projects like asm.js, a subset of JavaScript that compilers can target.

6/

This subset of JS is so limited that ahead-of-time optimization can be applied such that the resulting code runs faster.

But this approach has its limits.

7/

WebAssembly pushes these limits and runs at near-native speed.

Because WebAssembly is basically some flavor of assembly, it's easier to create optimized code for compilers with less effort.

8/

WebAssembly also interfaces well with JavaScript and vice-versa. JavaScript is to WebAssembly what Python is to C.

You can easily call WASM functions from JavaScript to get performance gains where really necessary.

9/

3. Traits of WebAssembly

WebAssembly is designed to be:

- Efficient and fast
- Safe
- Open and debuggable
- Part of the open web platform

10/

-> Efficient and fast

WebAssembly is a flavor of assembly. This makes the binary format size- and load-time efficient.

WASM loads and runs fast.

11/

-> Safe

The WASM runtime is a memory-safe and sandboxed execution environment.

Especially in the browser, code should not be able to escape. This is one of the core principles of any browser's JavaScript runtime. The code should stay in the browser.

12/

-> Open and debuggable

Although the binary format is executed, the textual format is essential to enhance learning, improve debugging, and learn to optimize the resulting code.

A standardized text format and ways to convert between the two helps developers adopting it.

13/

-> Part of the open web platform

The main goal of WebAssebly is to run in the browser and to integrate into the existing ecosystem.

Easy interfacing between JavaScript and WASM is a core principle.

14/

4. WebAssembly outside of the browser

Although initially designed for the web, WebAssembly has long left the browser and slowly become a near-universal compilation target.

Thanks to WASI, runtimes can also interact with the OS. 👇🏻

wasi.dev

15/

Node.js supports WebAssembly for quite some time now, for example.

This allows you to use WASM modules both in the browser and in Node.

And thanks to wasmer, modules can be deployed on any system that has a runtime installed. 👇🏻

github.com/wasmerio/wasmer

16/

5. Current limitations of WebAssembly

WebAssembly is not fully finished yet.

There are still a few things that need to be worked on for WASM to become a sole alternative instead of only a sidecar for other languages.

17/

Some of those limitations are:

- No DOM support in the browser. You need to use JavaScript APIs for this
- No threading
- No garbage collection

18/

The limitations listed here are definitely being worked on, though, so those problems might soon be solved.

Until then, WebAssembly might not run multi-threaded but can still be used to speed up certain code paths or for programs that don't need threading.

19/

6. The importance of WebAssembly

"If WASM+WASI existed in 2008, we wouldn't have needed to create Docker. That's how important it is. WebAssembly on the server is the future of computing."

- Solomon Hykes, co-founder of Docker

20/

Source of this quote 👇🏻

infoq.com/news/2021/01/w…

21/

Read this quote slowly and multiple times. Yes, that's a statement, isn't it?

WASM basically creates a sandboxed execution environment that nearly everyone can finally agree upon.

22/

There were runtimes before, like the JVM, but they never reached the level of acceptance necessary to become universally applicable.

WebAssembly, however, seems to have hit a nail, and its future currently seems bright.

23/

7. How to get started

If you want to try out WebAssembly, I can give you two recommendations.

There are definitely more ways, but I can't list all here, so I'll limit my recommendations to two options I use the most.

24/

-> Rust

Rust has first-class WebAssembly support. It creates one of the if not the fastest, and most optimized WASM code currently available.

If you don't mind a steep learning curve, Rust might be a great choice for you. 👇🏻

rustwasm.github.io/docs/book/

25/

-> AssemblyScript

AssemblyScript (AS) is a flavor of TypeScript that compiles to WebAssembly.

Especially if you have worked with TypeScript before, you'll get into AS pretty fast. 👇🏻

assemblyscript.org

26/

8. Thread end

Well, you've made it to the end of this thread. 👏🏻

I hope you enjoyed reading it and learned a little something about WebAssembly.

If you want more content like this, feel free to follow me for more. I love new friends! 💛

27/

Want to comment? Awesome, do it here! 👇🏻

28/

https://twitter.com/oliverjumpertz/status/1406904376967454723