Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Do things faster and better with webassembly
Search
Sendil Kumar N
March 29, 2018
Technology
0
480
Do things faster and better with webassembly
Sendil Kumar N
March 29, 2018
Tweet
Share
More Decks by Sendil Kumar N
See All by Sendil Kumar N
[Heapcon-2023] Building High Performance Web Applications
sendilkumarn
0
90
Building Reactive Microservices with Kotlin & running on Kubernetes
sendilkumarn
0
190
Building Reactive Microservices with JHipster & K8s
sendilkumarn
0
22
Designing High Performance React Applications
sendilkumarn
1
160
Batching, Suspense, and Server Components
sendilkumarn
0
50
DevNexus_Building_with__Zero_Trust_Architecture_Copy.pdf
sendilkumarn
0
61
Lessons Learnt with Visual Testing and Snapshots
sendilkumarn
0
120
Easy Microservices with K8s & Istio
sendilkumarn
0
99
KHipster - Kotlin Hipster
sendilkumarn
0
250
Other Decks in Technology
See All in Technology
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
280
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.3k
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
460
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
2.6k
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
0
220
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
250
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.1k
Claude Codeから我々が学ぶべきこと
s4yuba
6
1k
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.4k
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
11
3.7k
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
5
2.2k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Faster Mobile Websites
deanohume
308
31k
Git: the NoSQL Database
bkeepers
PRO
431
65k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Adopting Sorbet at Scale
ufuk
77
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Scaling GitHub
holman
461
140k
Transcript
Do things faster & better with WebAssembly @sendilkumarn
Sendil Kumar • Full stack developer @Xebialabs • Core dev
team member @JHipster • Team member @webpack • Part of rust-wasm Working Group • Big open source lover & enthusiast
@sendilkumarn You can reach me at
Fullstack devs ?
C / C++ devs ?
Rust devs ?
Faster More control Safety Types Closer to machine
! JS devs ?
What you do to increase the Performance of your App
?
Minify Async & Defer Reduce dom manipulation Profile JS Engine
based optimisations Immutability Type system Code splitting Service worker
Let us do a performance question
Which has higher performance? function test() { let arr =
[]; arr.push(1); arr.push(2); arr.push(3); } function test() { let arr = new Array(3); arr.push(1); arr.push(2); arr.push(3); }
This has higher performance function test() { let arr =
[]; arr.push(1); arr.push(2); arr.push(3); } function test() { let arr = new Array(3); arr.push(1); arr.push(2); arr.push(3); }
But why ? Packed & Holey Array https://v8project.blogspot.nl/2017/09/elements-kinds-in-v8.html
None
Uncertainties
None
Most of the profiling, needs you to know more about
the internals of JS engine.
Optional Arguments Packed/Holey Array Monomorphisation Micro- benchmarking Engine based tunings
Known engine shortcomings Time- consuming
⚙ Maintainability ⚙
Tradeoff between Uncertainty & Performance
How better will it be to have the consistency &
speed of native code in browsers?
WebAssembly Binary encoded - Stack machine
In other words, you can compile your native code and
make them run in your browser.
None
Fast & Efficient
Fast & Efficient Safe
Fast & Efficient Safe Debuggable
Fast & Efficient Safe Debuggable Open web platform
“WebAssembly is not a replacement of JAVASCRIPT” integrating well and
being symbiotic
How JS works now inside JS Engine
PARSE COMPILE OPTIMIZE Re-OPTIMIZE EXECUTE GC Javascript AST
PARSE COMPILE OPTIMIZE Re-OPTIMIZE EXECUTE GC Profiler COMPILE 0101010101010
PARSE COMPILE OPTIMIZE Re-OPTIMIZE EXECUTE GC Profiler
PARSE COMPILE OPTIMIZE Re-OPTIMIZE EXECUTE GC Profiler
PARSE COMPILE OPTIMIZE Re-OPTIMIZE EXECUTE GC Profiler
How WASM Works?
DECODE COMPILE EXECUTE 0101010101010 0101010101010
DECODE COMPILE EXECUTE
DECODE COMPILE EXECUTE
Simple Example in Rust
#[no_mangle] pub extern fn add_one(x: i32) -> i32{ x+1 }
RUST
rustc +nightly \ — —target wasm32-unknown-unknown \ -O test.rs
WASM Raw binary format
WASM MODULE IMPORT TABLE MEMORY GLOBAL EXPORT ELEMENT DATA START
FUNCTION & CODE
WASM IMPORT EXPORT FUNCTION & CODE (import …) (export …)
(func …)
WASM MEMORY GLOBAL START (start $start_function) The first function to
be loaded in the module (global type mutability expr) (memory init-size max-size(opt))
WASM TABLE ELEMENT DATA Data -> linear array of memory
indexes GC references, raw OS handles, or native pointers Allows module to initialise the elements
(module (type $t0 (func (param i32) (result i32))) (func $add_one
(export “add_one”) (type $0) (param $p0 i32) (result i32) get_local $p0 i32.const 1 i32.add ) (table $T0 0 anyfunc) (memory $memory (export “memory”) 17) (data (i32.const 4) “\10\00\10\00”)) WAST
(module ) Module
(type $t0 (func (param i32) (result i32) ) ) Type
(func $add_one (export “add_one”) (type $0) (param $p0 i32) (result
i32) get_local $p0 i32.const 1 i32.add ) Actual function
(table $T0 0 anyfunc) Table
(memory $memory (export “memory”) 17) Memory
(data (i32.const 4) “\10\00\10\00”) ) Data
How to load them?
Using fetch…
Using fetch… fetch('test.wasm').then(response => response.arrayBuffer() ).then(bytes => WebAssembly.instantiate(bytes, importObject) ).then(result
=> result.instance.exports.add_one() );
Using compile streaming…
Using compile streaming… WebAssembly.compileStreaming((fetch(‘test.wasm’)) .then(module => WebAssembly.instantiate(module, importObject) ).then(result =>
result.instance.exports.add_one() );
Using instantiate streaming… ⚠Few browsers yet to support
Using instantiate streaming… WebAssembly.instantiateStreaming( (fetch(‘test.wasm’), importObj) .then(result => result.instance.exports.add_one() );
⚠Few browsers yet to support
Streaming compilation speeds up the wasm performance by 10-15 times
Streaming compilation will be coming to JS…
ESM spec for WASM ⚠Still in very early stages, and
will be implemented
How to include them in your App? Demo time >>>
Future Garbage Collection DOM Manipulation Bulk memory operations Threads Exception
handling
Questions?
None
Happy Hacking