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
91
Building Reactive Microservices with Kotlin & running on Kubernetes
sendilkumarn
0
190
Building Reactive Microservices with JHipster & K8s
sendilkumarn
0
23
Designing High Performance React Applications
sendilkumarn
1
170
Batching, Suspense, and Server Components
sendilkumarn
0
52
DevNexus_Building_with__Zero_Trust_Architecture_Copy.pdf
sendilkumarn
0
63
Lessons Learnt with Visual Testing and Snapshots
sendilkumarn
0
120
Easy Microservices with K8s & Istio
sendilkumarn
0
99
KHipster - Kotlin Hipster
sendilkumarn
0
260
Other Decks in Technology
See All in Technology
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
S3のライフサイクル設計でハマったポイント
mkumada
0
100
生成AI活用のROI、どう測る? DMM.com 開発責任者から学ぶ「AI効果検証のノウハウ」 / ROI of AI
i35_267
4
150
生成AIによるデータサイエンスの変革
taka_aki
0
3.1k
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
信頼できる開発プラットフォームをどう作るか?-Governance as Codeと継続的監視/フィードバックが導くPlatform Engineeringの進め方
yuriemori
1
410
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
200
認知戦の理解と、市民としての対抗策
hogehuga
0
250
ウォンテッドリーのアラート設計と Datadog 移行での知見
donkomura
0
300
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.5k
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
4
140
知られざるprops命名の慣習 アクション編
uhyo
6
520
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Automating Front-end Workflow
addyosmani
1370
200k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Gamification - CAS2011
davidbonilla
81
5.4k
Writing Fast Ruby
sferik
628
62k
Into the Great Unknown - MozCon
thekraken
40
2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Producing Creativity
orderedlist
PRO
347
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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