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
WebAssembly in NodeJS
Search
Willian Martins
October 17, 2017
Technology
4
540
WebAssembly in NodeJS
My presentation about WASM in NodeJS @ NodeJS Meetup Berlin
Willian Martins
October 17, 2017
Tweet
Share
More Decks by Willian Martins
See All by Willian Martins
De volta ao Futuro do JS: As próximas features e propostas incríveis
wmsbill
0
44
Back to the future of JS II: Beyond what we can foresee
wmsbill
0
72
A, B, C. 1, 2, 3. Iterables you and me.
wmsbill
0
64
Back to the future of JS II: Beyond what we can foresee
wmsbill
0
73
Back to the future of JS.
wmsbill
0
11
Node conf ar 2018.
wmsbill
0
330
Back to the future of JS
wmsbill
1
40
Back to the future of JS
wmsbill
2
240
WebAssembly the Journey
wmsbill
2
130
Other Decks in Technology
See All in Technology
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.2k
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
250
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
230
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
140
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
340
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
620
Databricks におけるデータエンジニアリング
databricksjapan
0
380
20240416_devopsdaystokyo
kzkmaeda
1
190
アプリがつくるNOT A HOTELブランド
hokuts
1
450
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
220
現代CSSフレームワークの内部実装とその仕組み
poteboy
6
1.8k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
Adopting Sorbet at Scale
ufuk
67
8.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Why Our Code Smells
bkeepers
PRO
331
56k
Navigating Team Friction
lara
177
13k
Side Projects
sachag
451
41k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
GraphQLとの向き合い方2022年版
quramy
31
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Transcript
The Need for Speed and WebAssembly Willian Martins Autumn 2017
None
Timeline…
How did we achieve it Moore law Pushed Tech industries
to evolve until today Allowed huge computation power even on small devices
All this power for what? Faster applications More immersive games
Virtual reality Augmented reality Live video/image processing Big Data/Machine learning
The languages over time
But what about JS?
JS - Early days Created in 1995 by Brendan Eich
Was written in 11 days Designed to be easy and simple Designed to be a glue code for dynamic Web
None
JS - 2008 until now 2008 - JIT Compiler by
google w/ Chrome Jump of performance Allowed more complex applications What is the next step?
Willian Elia @wmsbill
None
WE’RE HIRING!!
What is WebAssembly?
What’s WebAssembly? New binary format Run compiled programs (C, C++,
Rust) on a browser Works alongside Javascript Performance and flexibility API
Why WebAssembly is faster?
V8 - JiT in action
V8 - JiT in action
V8 - JiT in action
V8 - JiT in action
V8 - JiT in action
V8 - JiT in action
V8 - JiT in action
JiT: Code life cycle in summary 1. Parse 2. Compile
3. Optimize (de-optimize) 4. Execute 5. Garbage Collector
WebAssembly
WebAssembly is fast Parse Compile Optimize Execute GC Decode Compile
+ Optimize Execute JS WASM
WebAssembly is fast WASM is more compact -> Faster FETCH
of the source WASM is closer to machine code -> Faster DECODING, COMPILING and OPTIMISING No need to RE-OPTIMISE No garbage collection
So WebAssembly looks fast, let’s see how to use it
How to run WASM modules Current situation: not possible to
run WASM modules on their own Need for some Javascript glue
WebAssembly JS API 1. Fetch/Load the module binary 2. Instantiate
it 3. Access exported functionalities
fs.readFile(‘./module.wasm’, async function(err, file) => { const { instance }
= await WebAssembly.instantiate(file); // Do something with the compiled results! });
How to generate a WASM file
Compile C to WASM + JS WASM emcc my-module.c -o
my-module.js -s WASM=1
Then we can simply import the generated JS code as
a module
Export functions to JS Keyword EMSCRIPTEN_KEEPALIVE EMSCRIPTEN_KEEPALIVE int sum(int x,
int y) { return x + y; } Expose only the interface of the WASM module to JS
What about WebAssembly memory? How can we access it?
Memory management Emscripten provide three useful functions to manage WebAssembly
memory _malloc(memoryNeeded) getValue(ptr, type) setValue(ptr, value, type)
Elia @eliamain
DEMO TIME
The WASM implementation was still slower
Why??
JIT handover
“Currently, calling a WebAssembly function in JS code is slower
than it needs to be. The JIT doesn’t know how to deal directly with WebAssembly, so it has to route the WebAssembly to something that does. … This can be up to 100x slower than it would be if the JIT knew how to handle it directly. ” Lin Clark
The future of WebAssembly
Future features Formal Specification Threads supports SIMD acronym to Single
Instruction Multiple Data (back to Stage 3 on TC39) Exception handling Garbage collection Direct DOM access ES6 Module integration
Danke! Thank you!
What about Native modules?