# 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

~ Franziska Hinkelmann
  • 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?

# ❓ Questions

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

# 🗂 open sourced projects

# Work

  • or
  • Buy me a coffeeBuy me a coffee