Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cybozu Google I/O 2023 LT会 - WebAssembly
Search
SiLeader
June 09, 2023
Programming
0
1k
Cybozu Google I/O 2023 LT会 - WebAssembly
元の動画
WebAssembly: A new development paradigm for the web
https://youtu.be/RcHER-3gFXI
SiLeader
June 09, 2023
Tweet
Share
More Decks by SiLeader
See All by SiLeader
Cybozu Android Dev Summit 2022 LT会 - Something about storage on Android
sileader
0
1k
Other Decks in Programming
See All in Programming
チーム開発の “地ならし"
konifar
8
7k
手軽に積ん読を増やすには?/読みたい本と付き合うには?
o0h
PRO
1
140
Media Capture and Streams: W3C仕様と現場での知見
nowaki28
0
130
TUIライブラリつくってみた / i-just-make-TUI-library
kazto
1
300
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
tomohisa
5
17k
モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜
fuuki12
0
180
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
clockmaker
16
6.4k
CSC305 Lecture 17
javiergs
PRO
0
270
dotfiles 式年遷宮 令和最新版
masawada
1
590
分散DBって何者なんだ... Spannerから学ぶRDBとの違い
iwashi623
0
160
AIエンジニアリングのご紹介 / Introduction to AI Engineering
rkaga
2
960
Level up your Gemini CLI - D&D Style!
palladius
1
160
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Practical Orchestrator
shlominoach
190
11k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Optimizing for Happiness
mojombo
379
70k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
Documentation Writing (for coders)
carmenintech
76
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
690
GitHub's CSS Performance
jonrohan
1032
470k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Transcript
WebAssembly Webの新しい開発パラダイム Google I/O 2023 LT会 みやもと
Why use WebAssembly ? • ⾼いパフォーマンス • ⾼いポータビリティ • 安全
• ⼈が読める • デバッグできる
WebAssemblyの利⽤ Emscripten SwiftWasm Kotlin/Wasm ...
JavaScriptとWebAssembly トランスパイル + 最適化 コンパイル + 最適化 JS Engine 内部表現
Wasm Engine 内部表現 解釈 解釈 + 最適化 トランスパイルと ⼈の⼿⼊⼒の 可能性がある 実⾏前に 最適化が必要 最適化済みが ほぼ保証される 最適化を スキップできる
WebAssemblyの利⽤ • FigmaはC++でWebAssemblyを使⽤ • ロード時間が3倍以上改善
Kotlin MultiplatformとWebAssembly Web Kotlin Multiplatform Kotlin/Native Kotlin/JVM Kotlin/JS ビジネスロジック を共有!
Kotlin MultiplatformとWebAssembly Web Kotlin Multiplatform Kotlin/Native Kotlin/JVM Kotlin/Wasm 2倍⾼速化! ビジネスロジック
を共有!
FlutterとWebAssembly Web Dart AOT Dart AOT Dart JS UIとビジネスロジックを 共有!
FlutterとWebAssembly Web Dart AOT Dart AOT Dart Wasm UIとビジネスロジックを 共有!
2倍⾼速化!
まとめ • WebAssemblyの利点 • ⾼速な動作 • 複数の⾔語が対応 • 多くのブラウザで利⽤可能 •
Kotlin/Wasmにより⾼速なWebアプリがKotlinで記述可能 • Dart WasmによりFlutterアプリの⾼速化が可能
出典 • YouTube • WebAssembly: A new development paradigm for
the web • https://youtu.be/RcHER-3gFXI • Figma • https://www.figma.com/ja/blog/webassembly-cut-figmas-load- time-by-3x/