Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Do things faster and better with webassembly
Sendil Kumar N
March 29, 2018
Technology
0
340
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
Batching, Suspense, and Server Components
sendilkumarn
0
21
Lessons Learnt with Visual Testing and Snapshots
sendilkumarn
0
88
Easy Microservices with K8s & Istio
sendilkumarn
0
67
KHipster - Kotlin Hipster
sendilkumarn
0
100
Microservices with JHipster
sendilkumarn
0
49
State of WebAssembly
sendilkumarn
0
19
Easy Microservices with Kubernetes and Istio
sendilkumarn
0
430
Rust and WebAssembly for the masses
sendilkumarn
1
74
Easy Microservices in the cloud with Kubernetes and Istio
sendilkumarn
0
38
Other Decks in Technology
See All in Technology
如何使用 Argo Event& Workflow 快速建置自定義的工作流程 @ #CNTUG #47
line_developers_tw
PRO
0
320
AWS Control TowerとAWS Organizationsを活用した組織におけるセキュリティ設定
fu3ak1
2
580
技術広報の役割を定義してみた 2022年春
afroscript
3
2.2k
ZOZOTOWNのProduction Readiness Checklistと信頼性向上の取り組み / Improvement the reliability of ZOZOTOWN with Production Readiness Checklist
akitok_
4
1.2k
スタートアップ入社4日目までに考えたAWSのセキュリティ向上/ Startup AWS Security
shonansurvivors
3
2.3k
AWS全体のセキュリティ管理と快適なセキュリティ運用
cmusudakeisuke
2
10k
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
0
520
Understanding Python attributes
reuven
0
550
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか? / SRE NEXT 2022
nulabinc
PRO
13
6.4k
GitHub 엔터프라이즈 어카운트 소개 및 엔터프라이즈 서버 구축 경험
posquit0
1
130
僕の Microsoft Teams (+α) 便利技紹介 2022年春
taichinakamura
0
1.9k
完全に理解した incremetal 〜そして、何もわからないへ〜
mashiike
0
200
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
34
6.1k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Fireside Chat
paigeccino
11
1.2k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Automating Front-end Workflow
addyosmani
1351
200k
Unsuck your backbone
ammeep
659
55k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Optimizing for Happiness
mojombo
365
63k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
The Cult of Friendly URLs
andyhume
68
4.7k
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