State of WebAssembly

@sendilkumarn Hoi Nederland !!!

@sendilkumarn Languages are built for a purpose. Choose & Use
them wisely…

The state of WebAssembly Sendil Kumar N

@sendilkumarn Sendil Kumar

@sendilkumarn Hacking on WebAssembly

JavaScript is weird @sendilkumarn

[1, 2] + [3, 4] @sendilkumarn

1, 23, 4 @sendilkumarn [1, 2] + [3, 4]

1, 23, 4 @sendilkumarn [1, 2].toString() + [3, 4].toString() “1,2”
+ “3, 4”

JavaScript is weird* * - sometimes @sendilkumarn

@sendilkumarn JavaScript Execution

@sendilkumarn Load JavaScript

@sendilkumarn a.js AST 1001010010101101010 Execute Profiler Parse Interpret Compile 100101001010
Optimise 1010 GC

@sendilkumarn JavaScript Tuning

@sendilkumarn Css Tuning

JavaScript is awesome @sendilkumarn ~80% ~90% https://2019.stateofjs.com/opinions/

@sendilkumarn JavaScript is easy https://octoverse.github.com/ 6 years in row

@sendilkumarn https://2019.stateofjs.com/opinions/ ~59% ~40% JavaScript is evolving

So what is the problem? @sendilkumarn

@sendilkumarn Types Polymorphism Unpredictable Performance Runtime exceptions

@sendilkumarn Types 66% users interested to use TypeScript https://2019.stateofjs.com/javascript-flavors/

@sendilkumarn Predicatble Performance Types Unpredictable Performance Typed

WebAssembly @sendilkumarn

Yet Another Frontend framework?

@sendilkumarn 00 61 73 6D 01 00 00 00 Native
Code Binary JavaScript Javascript Engine Runtime

@sendilkumarn 00 61 73 6D 01 00 00 00 Native
Code Binary JavaScript Javascript Engine

WebAssembly is not a language @sendilkumarn

@sendilkumarn func add is called Stack get_local $lhs LHS RHS
get_local $rhs i32.add SUM Structured stack machine

@sendilkumarn 00 61 73 6D 01 00 00 00 Size
& Load time efficient

@sendilkumarn What WebAssembly provides?

@sendilkumarn Speed

@sendilkumarn Near Native perf. ~30% faster than JS

@sendilkumarn secure

@sendilkumarn Linear Memory Model

@sendilkumarn Shared Array Buffer

@sendilkumarn Typed

@sendilkumarn i32 i64 f32 f64 00 61 73 6D 01
00 00 00 WebAssembly Binary JavaScript Javascript Engine Binding JS file

@sendilkumarn Boundary Crossing

@sendilkumarn Not always faster

@sendilkumarn How WASM works?

@sendilkumarn WebAssembly Execution

@sendilkumarn Load WebAssembly

@sendilkumarn Decode Compile Execute 00 61 73 6D 00 61
73 6D 00 61 73 6D

@sendilkumarn PARSE COMPILE OPTIMISE EXECUTE GC JavaScript execution DECODE COMPILE
EXECUTE WebAssembly execution

EXECUTE WebAssembly execution I am faster

EXECUTE WebAssembly execution Optimised already

@sendilkumarn Streaming compilation

What languages can do wasm? @sendilkumarn

C/C++ @sendilkumarn

@sendilkumarn ./emcc -O3 helloworld.c

Why C/C++? @sendilkumarn Tons of options All batteries included Verbose

Rust @sendilkumarn

@sendilkumarn $ wasm-pack build $ cargo install wasm-pack

Why Rust? @sendilkumarn Inbuilt into the compiler All batteries included
Best tooling support Sometimes bigger binaries

AssemblyScript @sendilkumarn

@sendilkumarn $ asc helloworld.ts -b helloworld.wasm -O3 $ npm i
--save-dev assemblyscript

Why AssemblyScript? @sendilkumarn Closer to JavaScript community Good tooling support
/ options

Go @sendilkumarn

@sendilkumarn $ GOOS=js GOARCH=wasm go build -o out/main.wasm go/main.go

Why Go? @sendilkumarn Easy & Concise TinyGo is awesome Reflections
& Proxies everywhere

@sendilkumarn Future

@sendilkumarn Interface types

@sendilkumarn Single Instruction Multiple Data

@sendilkumarn ♻ Garbage Collection

@sendilkumarn WASI WebAssembly System Interface

JavaScript with WebAssembly together makes web even more awesome &
faster @sendilkumarn

@sendilkumarn Thanks… @sendilkumarn dev.to/sendilkumarn sendilkumarn.com/blog Questions…

State of WebAssembly

State of WebAssembly

More Decks by Sendil Kumar N

Other Decks in Technology

Featured

Transcript