# WebAssembly

Its a new way to run programming languages other than javascript in your web pages.

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

Portable binary format for web

wasm became a w3c approved specification in 2019
wasm is 4th language to run natively in browser alongside html, css, js
Compiler LLVM supported languague to wasm using Emscripten
WebAssembly is usually either ahead-of-time (AOT) or just-in-time (JIT) compiled

# 🐵 History

Timeline	Events	Description
2011	precursor technology	Google Native Client
2013	precursor technology	asm.js
2015	1st demonstration	executing Unity's Angry Bots in Firefox,Chrome,Edge
2019	Became w3c recommendation (REC)	Web client now supports 4 language. `html`, `css`, `js` and `wasm`
Future	plans to support multithreading and garbage collection	support `python`, `ruby` as well

Old browser support

For older browsers, Wasm can be compiled into asm.js by a JavaScript polyfill.

In web development, a polyfill is code that implements a feature on web browsers that do not support the feature.

# 🏎 Performance

20% slower than native code execution
https://blog.sessionstack.com/how-javascript-works-a-comparison-with-webassembly-why-in-certain-cases-its-better-to-use-it-d80945172d79
https://medium.com/samsung-internet-dev/performance-testing-web-assembly-vs-javascript-e07506fd5875
Javascript performance vs C++ performance story and where wasm fits in
PHP 8 will come with JIT compiler
So, what performance depends on
- I/O, images, databases, HTTP, rendering, fonts, frameworks, network
If you ship slightly smaller images, your improvments are far bigger than any compiler optimization you could make.
JS is dynamically types, C++ is statically typed
- faster to prototype but little more work for compiler to keep up with dynamic types
property lookup is all over js console.log() log property on console Object
- TypeError
- Undefined
- Property Chain
- Proxy
implement same algorithm in both languages (prime #) and then plott for #inputs
- js is maybe 2X times as slower as C++
v8 as TurboFan (precursor CrankShell) as its optimizing compiler introduced in 2017
- in js if you have a function but its bever used, its not even compiled
- if a fn is executed multiple times, its send to optimizing compiler
  - using some heuristics and speculation techniques
- get x86 assembly code
- is turned on when function is hot. Optimization only happens on hot functions
We can turn off the optimizing compiler in node using --noopt flag
- run everything with baseline compiler

# How to write wasm?

https://nodejs.org/api/wasi.html

# ❓ Questions

How to compile your code js to wasm?
How to debug it from devtools?
HOw to write wasm?

# 🗂 open sourced projects

https://github.com/termoshtt/wasm-svg-example

# Work

# 🌀 Useful Links

← VueJS Web perfromance →