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
490
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
5.9k
ripgrep をライブラリとして使う
rhysd
0
500
Fuzzing Rust Text Editor
rhysd
1
3k
Vim compiled to WebAssembly
rhysd
5
2.2k
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
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
13k
Team operations that are not burdened by SRE
kazatohiei
1
310
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
10k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
880
5つのアンチパターンから学ぶLT設計
narihara
1
170
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.6k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Goで作る、開発・CI環境
sin392
0
240
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Adopting Sorbet at Scale
ufuk
77
9.5k
How GitHub (no longer) Works
holman
314
140k
Balancing Empowerment & Direction
lara
1
430
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Done Done
chrislema
184
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Visualization
eitanlees
146
16k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Thoughts on Productivity
jonyablonski
69
4.7k
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