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
400
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
59
Building Reactive Microservices with Kotlin & running on Kubernetes
sendilkumarn
0
120
Building Reactive Microservices with JHipster & K8s
sendilkumarn
0
12
Designing High Performance React Applications
sendilkumarn
1
140
Batching, Suspense, and Server Components
sendilkumarn
0
33
DevNexus_Building_with__Zero_Trust_Architecture_Copy.pdf
sendilkumarn
0
39
Lessons Learnt with Visual Testing and Snapshots
sendilkumarn
0
100
Easy Microservices with K8s & Istio
sendilkumarn
0
83
KHipster - Kotlin Hipster
sendilkumarn
0
170
Other Decks in Technology
See All in Technology
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
0
160
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
490
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
0
190
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
0
140
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
670
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
59
17k
Let's get started with Ruby && Rails Tips
sinsoku
0
190
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
420
Oracle Exadata Database Service on Cloud@Customer (ExaDB-C@C) - UI スクリーン・キャプチャ集
oracle4engineer
PRO
1
1.1k
PHPカンファレンス小田原2024
ysknsid25
2
650
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
0
160
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
620
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
13k
Teambox: Starting and Learning
jrom
128
8.4k
GraphQLとの向き合い方2022年版
quramy
30
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
A Tale of Four Properties
chriscoyier
150
22k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
How GitHub (no longer) Works
holman
304
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
How to name files
jennybc
64
92k
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