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
550
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
Deep Dive into Kotlin Flow
jmatsu
1
370
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
1
170
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Design Foundational Data Engineering Observability
sucitw
3
210
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
🔨 小さなビルドシステムを作る
momeemt
4
690
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
RDoc meets YARD
okuramasafumi
4
170
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
260
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Building Adaptive Systems
keathley
43
2.7k
Facilitating Awesome Meetings
lara
55
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Bash Introduction
62gerente
615
210k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Git: the NoSQL Database
bkeepers
PRO
431
66k
A Tale of Four Properties
chriscoyier
160
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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