Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Recap Modern WebAssembly in CDS 2019
Jimmy Moon
November 23, 2019
Programming
0
210
Recap Modern WebAssembly in CDS 2019
Recap Modern WebAssembly in CDS 2019
Jimmy Moon
November 23, 2019
Tweet
Share
More Decks by Jimmy Moon
See All by Jimmy Moon
Micro-Saas for developer who want a new
ragingwind
0
9
How to use The Fourth Language
ragingwind
0
71
Please Use The Fourth Language - WebAssembly
ragingwind
0
55
Head topics in Javascript, 2020
ragingwind
1
560
Today headlines in Javascript, 2019
ragingwind
0
430
Today, The Actions in Javascript
ragingwind
2
560
PWA Updates in Chrome 68
ragingwind
0
120
Learning Next.js in Minutes
ragingwind
0
64
Zero Configuration Tooling in 2017
ragingwind
4
1.3k
Other Decks in Programming
See All in Programming
C言語でメモリ管理を考えた話
hkawai
0
180
Where and how to run UI tests (Droidcon Lisbon & Android Makers, Paris)
nonews
0
110
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
300
Practical Advanced Kotlin in Practice
rock3r
3
130
Kueue入門/Kueue Introduction
bells17
0
490
プログラミングを勉強したいと言われたら
yuba_4
0
200
Managing gRPC with Wire
oldergod
2
150
WindowsコンテナDojo:準備編
oniak3ibm
PRO
0
450
Blazor WebAssembly – Dynamische Formulare und Inhalte in Aktion
patrickjahr
0
150
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
270
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
700
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
2
1.3k
Featured
See All Featured
Clear Off the Table
cherdarchuk
79
280k
Designing with Data
zakiwarfel
91
3.8k
Building Applications with DynamoDB
mza
83
4.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
Docker and Python
trallard
27
1.5k
From Idea to $5000 a Month in 5 Months
shpigford
372
44k
Side Projects
sachag
449
37k
The Pragmatic Product Professional
lauravandoore
19
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
The Invisible Customer
myddelton
110
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Transcript
chrome://modern-webassembly
None
WebAssembly?
aka, WASM [ই્]
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71 WebAssembly? - ਢীࢲ زೞח ࢜۽ য - ܲ য۽
ࠗఠ ஹੌ - ୭ച غҊ ੌҙࢿ ח ࢿמ - ߄झ݀ܳ ೞ ঋ
WebAssembly
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71 WebAssembly? - ਢীࢲ زೞח ࢜۽ য - ܲ য۽
ࠗఠ ஹੌ - ୭ച غҊ ੌҙࢿ ח ࢿמ - ߄झ݀ܳ ೞ ঋ
wasm-pack build WAT .wasm
None
WebAssembly Instructions Stack 0 0 (I32, i32) -> (i32) 1
(I64, i64) -> () 0 Type 0 1 Type 1 0 Code for Func 0 1 Code for Func 1 1 3 4 5 6 8 0 1 2 3 4 $type0 Memory Type Function Code $func0 i32.store i32.load 2 7 ArrayBuffer i32.add get_local $p1 get_local $p1 pop push
Value Types i32, i64, f32, f64 Linear Memory Access ii32.load,
i64.load, f32.load, f64.load, i64.store, f32.store, f64.store, and more Local, Global Variable get_local, set_local, tee_local, get_global, set_global Control constructs and instructions nop, block, loop, if, else, br, br_if, br_table, return, end Calls call, call_indirect Constants i32.const, i64.const, f32.const, f64.const, Operators i32.add, i32.sub, i32.mul, f32.add, f32.sub, f32.mul, f32.div, f32.abs, f64.add, f64.sub, and more
https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71 WebAssembly? - ਢীࢲ زೞח ࢜۽ য - ܲ য۽
ࠗఠ ஹੌ - ୭ച غҊ ੌҙࢿ ח ࢿמ - ߄झ݀ܳ ೞ ঋ
https://www.youtube.com/watch?v=njt-Qzw0mVY
https://www.youtube.com/watch?v=njt-Qzw0mVY
None
Javascript Source Code Ignition (JS Interpreter) TurboFan (Optimization Compiler) Deoptimize
Optimize (Profile Data) Bytecode Optimized Code Collecting Information Profiling Data Javascript Pipeline
Liftoff (WebAssembly baseline compiler) Hot Swap Execution Immediately WASM TurboFan
(Optimization Compiler) Off-thread Optimization WebAssembly Pipeline
None
None
None
https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
WebAssembly? - ਢীࢲ زೞח ࢜۽ য - ܲ য۽ ࠗఠ
ஹੌ - ୭ച غҊ ੌҙࢿ ח ࢿמ - ߄झ݀ܳ ೞ ঋ
WebAssembly Javascript
WebAssembly ??
https://github.com/ragingwind/wasm-hnpwa
None
None
None
Demo
WebAssembly
Implicit Caching Liftoff (WebAssembly baseline compiler) Hot Swap Execution Immediately
WASM TurboFan (Optimization Compiler) Off-thread Optimization https://www.youtube.com/watch?v=kZrl91SPSpc
Implicit Caching Liftoff (WebAssembly baseline compiler) Hot Swap Execution Immediately
WASM TurboFan (Optimization Compiler) Off-thread Optimization HTTP Cache Loads Optimized Module https://www.youtube.com/watch?v=kZrl91SPSpc New Session
Implicit Caching
Implicit Caching WebAssembly HTTP Cache Keep your URLs stable
https://www.youtube.com/watch?v=kZrl91SPSpc Startup Time
SharedArrayBuffer Threads Worker CPU Core WASM Instance Worker CPU Core
WASM Instance Worker CPU Core WASM Instance https://www.youtube.com/watch?v=kZrl91SPSpc atomic.wait atomic.notify
Threads in C https://github.com/ragingwind/wasm-hello-world/tree/master/clang-thread
Threads in Rust https://github.com/ragingwind/wasm-hello-world/tree/master/rust-thread worker.js lib.rs
Threads in Rust https://github.com/ragingwind/wasm-hello-world/tree/master/rust-thread
https://medium.com/google-earth/performance-of-web-assembly-a-thread-on-threading-54f62fd50cf7 Threads
https://www.youtube.com/watch?v=kZrl91SPSpc Threads
Threads https://www.youtube.com/watch?v=kZrl91SPSpc
✅ ❌ Threads
SIMD Single Instruction, Multiple Data
None
https://github.com/google/mediapipe/blob/master/mediapipe/docs/web.md Chrome Canary with #enable-webassembly-simd
https://www.youtube.com/watch?v=kZrl91SPSpc
https://www.youtube.com/watch?v=kZrl91SPSpc
https://www.youtube.com/watch?v=kZrl91SPSpc
https://www.youtube.com/watch?v=kZrl91SPSpc
https://www.youtube.com/watch?v=kZrl91SPSpc
Tooling Updates - Native LLVM + WASM (clang +Binaryen) -
Asyncify, Using asynchronous APIs - Debugging, WAT format, Source map, Native debugging
Native LLVM Backend https://www.youtube.com/watch?v=kZrl91SPSpc
Native LLVM Backend https://www.youtube.com/watch?v=kZrl91SPSpc
https://dassur.ma/things/c-to-webassembly/
Native LLVM Backend https://v8.dev/blog/emscripten-llvm-wasm
Native LLVM Backend https://v8.dev/blog/emscripten-llvm-wasm
Tooling Updates - Native LLVM + WASM (clang +Binaryen) -
Asyncify, Using asynchronous APIs - Debugging, WAT format, Source map, Native debugging
Asyncify https://www.youtube.com/watch?v=kZrl91SPSpc
Asyncify https://www.youtube.com/watch?v=kZrl91SPSpc
$ emcc example.c -O3 -o a.html -s ASYNCIFY -s 'ASYNCIFY_IMPORTS=["do_fetch"]'
Asyncify
Tooling Updates - Native LLVM + WASM (clang +Binaryen) -
Asyncify, Using asynchronous APIs - Debugging, WAT format, Source map, Native debugging
WAT Debugging
Sourcemap, Native Debugging $ rustc -g --target wasm32-unknown-unknown -O ./src/lib.rs
-o ./pkg/square.wasm
WebAssembly
None
https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/
https://github.com/WebAssembly/interface-types/blob/master/proposals/interface-types/Explainer.md Interface Types
https://hacks.mozilla.org/2019/08/webassembly-interface-types/
WebAssembly