Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Yewにおけるoff-the-main-thread
Yosuke Onoue
October 20, 2020
1
470
Yewにおけるoff-the-main-thread
Yosuke Onoue
October 20, 2020
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
Think About Front-end Web Development with Rust
likr
2
370
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
100
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
23
10k
Web-based Data Visualization with Rust and WebAssembly
likr
4
4.1k
Introduction to Graph Drawing
likr
0
250
20190707Ionic_Meetup.pdf
likr
0
290
About the end of the web
likr
2
390
Rust + WebAssemblyで広がるWebの未来
likr
15
6k
Ionic + WebAssembly
likr
1
630
Featured
See All Featured
Writing Fast Ruby
sferik
612
57k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
Building Your Own Lightsaber
phodgson
94
4.6k
Infographics Made Easy
chrislema
233
17k
The Cult of Friendly URLs
andyhume
68
4.7k
Robots, Beer and Maslow
schacon
152
7.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.1k
4 Signs Your Business is Dying
shpigford
169
20k
Building Flexible Design Systems
yeseniaperezcruz
310
33k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Code Reviewing Like a Champion
maltzj
506
37k
A Philosophy of Restraint
colly
192
14k
Transcript
͓ͷ͏͑ʢ!@MJLSʣ :FXʹ͓͚Δ P⒎UIFNBJOUISFBE 3VTUͷ-5ձ4IJOKVLVST!ΦϯϥΠϯ ݄
ࣗݾհ w ඌ্༸հʢ:PTVLF0OPVFʣ w ຊେֶจཧֶ෦ใՊֶՊ।ڭत w גࣜձࣾఇࠃσʔλόϯΫ٬һݚڀһ w 3VTUͱ8FCٕज़͕͖Ͱ͢ IUUQTUXJUUFSDPN@MJLS
IUUQTWETMBCKQ
w ϒϥβ্ͷϖʔδͷཧͷଟ͘ ୯ҰͷϝΠϯεϨουʹΑͬͯߦΘΕ͍ͯΔ w ϝΠϯεϨουͷࣄ w %0.ͷॲཧ w ϖʔδͷϨΠΞτ w
ΠϕϯτϋϯυϦϯά w +BWB4DSJQUͷॲཧ w FUD w +BWB4DSJQUجຊతʹγϯάϧεϨου 8FCϒϥβͷϝΠϯεϨουʢ6*εϨουʣ
w ϢʔβʔͷԠͷԼ w ΞχϝʔγϣϯϑϨʔϜϨʔτͷԼ ϝΠϯεϨου༗ͷӨڹ 5BTL &WFOU )BOEMJOH 8BJUJOH5JNF &WFOU
.BJO5ISFBE 5BTL 'SBNF 5BTL 5BTL 5BTL 'SBNF 'SBNF 'SBNF 'SBNF 'SBNF ❌ ❌ .BJO5ISFBE
P⒎UIFNBJOUISFBE w 8FC8PSLFSΛ༻ͯ͠ϝΠϯεϨουͷॲཧΛׂ͢Δ 5BTL 'SBNF 'SBNF 'SBNF 'SBNF 'SBNF 'SBNF
.BJO5ISFBE 5BTL 'SBNF 5BTL 5BTL 5BTL 'SBNF 'SBNF 'SBNF 'SBNF 'SBNF ❌ ❌ .BJO5ISFBE 5BTL 8PSLFS 5BTL 5BTL 5BTL 5BTL 5BTL 5BTL 5BTL
3VTUͱ8FCϑϩϯτΤϯυ։ൃ w ϗοτεϙοτΛ3VTUͰ࣮ w XBTNQBDLͰ+BWB4DSJQU༻ͷύοέʔδΛ։ൃ w 8FC"TTFNCMZͷॲཧΛ8PSLFSʹ w ΞϓϦέʔγϣϯશମΛ3VTUͰ࣮ w
3VTU࣮ͷ8FCϑϩϯτΤϯυϑϨʔϜϫʔΫ w :FXɺ1FSDZɺ4FFEɺFUD w 3VTUͰͷεϨουෛՙࢄΛߟ͑Δඞཁ͕͋Δ
8FCϑϩϯτΤϯυͷεςʔτཧ w 6*G TUBUF w ΞϓϦέʔγϣϯͷঢ়ଶཧͱϏϡʔߏஙΛ w ७ਮؔܕͷύϥμΠϜΛΠϯεύΠΞ IUUQTHJUIVCDPNGBDFCPPLqVYUSFFNBTUFSFYBNQMFTqVYDPODFQUT
εςʔτཧͱP⒎UIFNBJOUISFBE w ϗοτεϙοτͱͳΔΑ͏ͳεςʔτߋ৽Λ8PSLFSʹҕৡ w Πϕϯτൃੜͨ͠Β8PSLFSΛݺͼग़͠ɺ ॲཧ݁ՌΛϝΠϯεϨουʹฦ͢ 4UBUF "DUJPO &WFOU .BJO5ISFBE
8PSLFS 7JFX
:FXͷ"HFOUT w IUUQTZFXSTEPDTFODPODFQUTBHFOUT w ΞΫλʔϞσϧʹΑͬͯ8FC8PSLFSʹॲཧΛҕৡ w 3VTUͰͷ8FC8PSLFSͷݺͼग़͠ΛӅṭ 6QEBUF )BOEMF*OQVU &WFOU
"QQMJDBUJPO 6QEBUF "HFOU 7JFX )BOEMF*OQVU
8PSLFSଆͷίʔυ w ϥΠϑαΠΫϧͷॲཧ w DSFBUF w VQEBUF w IBOEMF@JOQVU 27
impl Agent for Worker { 28 type Reach = Public<Self>; 29 type Message = Msg; 30 type Input = Request; 31 type Output = Response; 32 33 fn create(link: AgentLink<Self>) -> Self { 34 let duration = Duration::from_secs(3); 35 let callback = link.callback(|_| Msg::Updating); 36 let task = IntervalService::spawn(duration, callback); 37 Worker { 38 link, 39 _task: Box::new(task), 40 } 41 } 42 43 fn update(&mut self, msg: Self::Message) { 44 match msg { 45 Msg::Updating => { 46 info!("Tick..."); 47 } 48 } 49 } 50 51 fn handle_input(&mut self, msg: Self::Input, who: HandlerId) { 52 info!("Request: {:?}", msg); 53 match msg { 54 Request::GetDataFromServer => { 55 // TODO fetch actual data 56 self.link.respond(who, Response::DataFetched); 57 } 58 } 59 } 60 61 fn name_of_resource() -> &'static str { 62 "worker.js" 63 } 64 }
ΞϓϦଆͷίʔυ 19 impl Component for Model { 20 type Message
= Msg; 21 type Properties = (); 22 23 fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self { 24 let callback = link.callback(|_| Msg::DataReceived); 25 let worker = Worker::bridge(callback); 26 27 Model { link, worker } 28 } 29 30 fn update(&mut self, msg: Self::Message) -> ShouldRender { 31 match msg { 32 Msg::SendToWorker => { 33 self.worker.send(Request::GetDataFromServer); 34 } 35 Msg::DataReceived => { 36 info!("DataReceived"); 37 } 38 } 39 true 40 } 41 42 fn view(&self) -> Html { 43 html! { 44 <div> 45 <nav class="menu"> 46 <button onclick=self.link.callback(|_| Msg::SendToWorker)>{ "Send to Thread" }</button> 47 </nav> 48 </div> 49 } 50 } 51 52 fn change(&mut self, _props: Self::Properties) -> ShouldRender { 53 false 54 } 55 }
Ϗϧυ w ΞϓϦଆͱ8PSLFSଆΛͦΕͧΕϏϧυ 1 const path = require("path"); 2 const
WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin"); 3 4 module.exports = { 5 plugins: [ 6 new WasmPackPlugin({ 7 crateDirectory: path.resolve(__dirname, "crates/app"), 8 args: "--log-level warn", 9 extraArgs: "--target web --no-typescript", 10 outDir: path.resolve(__dirname, "public"), 11 outName: "app", 12 }), 13 new WasmPackPlugin({ 14 crateDirectory: path.resolve(__dirname, "crates/worker"), 15 args: "--log-level warn", 16 extraArgs: "--target no-modules --no-typescript", 17 outDir: path.resolve(__dirname, "public"), 18 outName: "worker", 19 }), 20 ], 21 devServer: { 22 contentBase: path.join(__dirname, "public"), 23 compress: true, 24 port: 9000, 25 }, 26 };
ݱঢ়ͷ՝ w ϝΠϯεϨουͱ8PSLFSͰͷίʔυͷॏෳ w ݱঢ়Ͱ8PSLFSͷίʔυϝΠϯͷίʔυʹؚ·ΕΔ w γϦΞϥΠθʔγϣϯͷΦʔόʔϔου w Ծ%0.ͷॲཧ·ͩϝΠϯεϨου w
8FC"TTFNCMZ5ISFBET͕͋ΕվળՄೳʁ
·ͱΊ w 8FCϑϩϯτΤϯυ։ൃͰɺϝΠϯεϨουͷΞΠυϧ࣌ ؒΛ૿͢͜ͱ͕ॏཁ w ΞϓϦέʔγϣϯશମΛ3VTUͰ࣮͢Δ߹ɺ ैདྷ+BWB4DSJQU։ൃऀ͕ߦ͖ͬͯͨ 8FCͷϕετϓϥΫςΟεͷ࣮ફ͕ඞཁ w :FXͷ"HFOUTϝΠϯεϨουͷෛՙࢄͰ༗༻
3VTU'FTU(MPCBMͰొஃ͠·͢ʂ w 5IJOL"CPVU'SPOUFOE8FC%FWFMPQNFOUXJUI3VTU w ݄ʙ IUUQTSVTUGFTUFV ࢀՃ͓͍ͪͯ͠·͢ʂ