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
port-monolith-to-wasm-for-chrome-extension
Search
Linda_pp
January 27, 2020
Programming
0
500
port-monolith-to-wasm-for-chrome-extension
Presented at Rust LT #8
https://rust.connpass.com/event/160225/
Linda_pp
January 27, 2020
Tweet
Share
More Decks by Linda_pp
See All by Linda_pp
actionlint の Linter 設計
rhysd
6
6k
ripgrep をライブラリとして使う
rhysd
0
530
Fuzzing Rust Text Editor
rhysd
1
3k
Vim compiled to WebAssembly
rhysd
5
2.3k
about-neovim-0.4.0-floating-window
rhysd
3
2.3k
reply.vim
rhysd
0
1.3k
Vim ported to WebAssembly (VimConf 2018)
rhysd
4
3.4k
go-selfupdate-github で ツールを自己アップデートする
rhysd
5
4.4k
小さく始めて育てるコンパイラ
rhysd
13
4.9k
Other Decks in Programming
See All in Programming
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
120
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
330
Vibe coding コードレビュー
kinopeee
0
460
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
8
3k
AWS Serverless Application Model入門_20250708
smatsuzaki
0
120
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
940
Honoアップデート 2025年夏
yusukebe
1
830
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
880
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
960
Flutterと Vibe Coding で個人開発!
hyshu
1
260
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
Constant integer division faster than compiler-generated code
herumi
2
680
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
Into the Great Unknown - MozCon
thekraken
40
2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
The Cult of Friendly URLs
andyhume
79
6.5k
Unsuck your backbone
ammeep
671
58k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf 2023
tenderlove
30
1.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Become a Pro
speakerdeck
PRO
29
5.5k
Designing for Performance
lara
610
69k
Transcript
Monolith Λ Wasm ʹҠ২͠ ͯ Chrome ֦ுͭͬͨ͘ at Rust LT
#8 (2020/1/27) @Linda_pp @rhysd
monolith https://github.com/Y2Z/monolith
monolith • ࢦఆͨ͠ URL ͷϖʔδΛ1ͭͷ HTML ϖʔδͱ ͯ͠อଘ͢Δ CLI πʔϧ
• ϨεϙϯγϒͳϖʔδͳͲී௨ͷΣϒϖʔδ ͱͯͦ͠ͷ··ϩʔΧϧʹอଘͰ͖Δ • HTML ϖʔδΛύʔε͠ɼϦιʔεΛऔ͖ͬͯͯ Data URL ͱͯ͠ຒΊࠐΉ͜ͱͰ࣮͞Ε͍ͯΔ
monolith-of-web https://github.com/rhysd/monolith-of-web
monolith-of-web • monolith Λ wasm ʹҠ২͠ɼChrome ֦ுͱ ͯ͠ϒϥβ͔Β͑ΔΑ͏ʹͨ͠ͷ • ϒϥζ͍ͯ͠Δϖʔδͷ
HTML Λͦͷ·· ୯Ұͷ HTML ϖʔδʹͯ͠อଘͰ͖Δ
σϞ
:; NPOPMJUI SIZTE NPOPMJUI NPOPMJUIOQN QBDLBHF NPOPMJUIPGXFC CBDLHSPVOEQBHF GPSL XBTNQBDL
JOTUBOUJBUF
େ·͔ͳ wasm ͷҠ২ͷखॱ • wasm-pack buid ͕௨ΔΑ͏ʹ͢Δɽwasm ະରԠͷϞδϡʔ ϧ͕͋Δ߹#[cfg(target_arch =
"wasm32")] ͰॲཧΛ͚ Δ • wasm-bindgen Λ͍ɼ#[wasm_bindgen] Ͱ JS ଆʹݟͤΔ API Λఆٛ͢Δ #[cfg(not(target_arch = "wasm32"))] use reqwest::blocking::Client; #[wasm_bindgen(js_name = monolithOfUrl)] pub async fn monolith_of_url( url_target: String, options: MonolithOptions, ) -> Result<String, JsValue> { // ... }
network ϦΫΤετ • monolith Ϧιʔεͷ fetch ͷͨΊʹ reqwest ͷϒϩοΩ ϯά
API Λ͍ͬͯΔ • JavaScript ͷ fetch() ͱ async-await Λͬͯॻ͖͑ • js_sys::Promise std::future::Future ͷม؆୯ʹͰ͖Δ use wasm_bindgen_futures::JsFuture; let window = web_sys::window().unwrap(); let resp_value = JsFuture::from( window.fetch_with_request(&request) ).await?; let resp: Response = resp_value.dyn_into().unwrap();
࠶ؼؔͷ async-await Խ • ࠶ؼؔ await ࣌ʹอଘ͓ͯ͘͠ঢ়ଶͷαΠζ͕੩తʹ ܾ·Βͳ͍ͷͰɼasync ؔʹͰ͖ͳ͍ɽ •
monolith Ͱ DOM Λ࠶ؼతʹࠪ͠ͳ͕ΒϦιʔεΛ fetch ͍ͯͨ͠ͷͰɼ͜ͷΛ౿ΜͰ͍ͨ // ίϯύΠϧΤϥʔ async fn recursive() { recursive().await; recursive().await; }
࠶ؼؔͷ async-await Խ • ঢ়ଶʢFutureʣΛ Box ʹೖΕͯಈతʹཧ͢Δ͜ͱͰճ ආͰ͖Δ use std::pin::Pin;
use std::future::Future; fn recursive<'a>() -> Pin<Box<dyn Future<Output = ()> + 'a>> { Box::pin(async move { recursive().await; recursive().await; }) }
·ͱΊ • Rust ͷ CLI πʔϧ monolith Λ wasm ʹҠ
২ͯ͠ Chrome ֦ுʹͯ͠Έͨ • https://github.com/rhysd/monolith-of-web • async-await wasm Ͱ wasm_bindgen_futures Ͱ؆୯ʹ͑Δ @Linda_pp @rhysd presented by