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
460
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
77
Building Reactive Microservices with Kotlin & running on Kubernetes
sendilkumarn
0
180
Building Reactive Microservices with JHipster & K8s
sendilkumarn
0
20
Designing High Performance React Applications
sendilkumarn
1
150
Batching, Suspense, and Server Components
sendilkumarn
0
39
DevNexus_Building_with__Zero_Trust_Architecture_Copy.pdf
sendilkumarn
0
56
Lessons Learnt with Visual Testing and Snapshots
sendilkumarn
0
110
Easy Microservices with K8s & Istio
sendilkumarn
0
90
KHipster - Kotlin Hipster
sendilkumarn
0
230
Other Decks in Technology
See All in Technology
Medmain FACTBOOK
akinaootani
0
170
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
22
19k
2025年春に見直したい、リソース最適化の基本
sogaoh
PRO
0
390
試験は暗記より理解 〜効果的な試験勉強とその後への活かし方〜
fukazawashun
0
190
7,000名規模の 人材サービス企業における プロダクト戦略・戦術と課題 / Product strategy, tactics and challenges for a 7,000-employee staffing company
techtekt
0
220
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
160
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.5k
古き良き Laravel のシステムは関数型スタイルでリファクタできるのか
leveragestech
1
350
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
180
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
320
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
140
Amebaにおける Platform Engineeringの実践
kumorn5s
5
860
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Adaptive Systems
keathley
41
2.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Music & Morning Musume
bryan
46
6.4k
RailsConf 2023
tenderlove
29
1k
Typedesign – Prime Four
hannesfritz
41
2.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Facilitating Awesome Meetings
lara
53
6.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2.2k
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