port-monolith-to-wasm-for-chrome-extension

Presented at Rust LT #8 https://rust.connpass.com/event/160225/

Transcript

1. Monolith Λ Wasm ʹҠ২͠
   ͯ Chrome ֦ுͭͬͨ͘࿩
   at Rust LT #8 (2020/1/27)
   @Linda_pp
   @rhysd
   
   

   View Slide

2. monolith
   https://github.com/Y2Z/monolith
   
   

   View Slide

3. monolith
   • ࢦఆͨ͠ URL ͷϖʔδΛ1ͭͷ HTML ϖʔδͱ
   ͯ͠อଘ͢Δ CLI πʔϧ
   • ϨεϙϯγϒͳϖʔδͳͲ΋ී௨ͷ΢Σϒϖʔδ
   ͱͯͦ͠ͷ··ϩʔΧϧʹอଘͰ͖Δ
   • HTML ϖʔδΛύʔε͠ɼϦιʔεΛऔ͖ͬͯͯ
   Data URL ͱͯ͠ຒΊࠐΉ͜ͱͰ࣮૷͞Ε͍ͯΔ
   
   

   View Slide

4. monolith-of-web
   https://github.com/rhysd/monolith-of-web
   
   

   View Slide

5. monolith-of-web
   • monolith Λ wasm ʹҠ২͠ɼChrome ֦ுͱ
   ͯ͠ϒϥ΢β͔Β࢖͑ΔΑ͏ʹͨ͠΋ͷ
   • ϒϥ΢ζ͍ͯ͠Δϖʔδͷ HTML Λͦͷ··
   ୯Ұͷ HTML ϖʔδʹͯ͠อଘͰ͖Δ
   
   

   View Slide

6. σϞ
   
   

   View Slide

7. :;
   NPOPMJUI
   SIZTE
   NPOPMJUI
   NPOPMJUIOQN
   QBDLBHF
   NPOPMJUIPGXFC
   CBDLHSPVOEQBHF
   
   GPSL
   XBTNQBDL
   JOTUBOUJBUF
   
   

   View Slide

8. େ·͔ͳ 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 {
   // ...
   }
   
   

   View Slide

9. 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();
   
   

   View Slide

10. ࠶ؼؔ਺ͷ async-await Խ
    • ࠶ؼؔ਺͸ await ࣌ʹอଘ͓ͯ͘͠ঢ়ଶͷαΠζ͕੩తʹ
    ܾ·Βͳ͍ͷͰɼasync ؔ਺ʹͰ͖ͳ͍ɽ
    • monolith Ͱ͸ DOM Λ࠶ؼతʹ૸ࠪ͠ͳ͕ΒϦιʔεΛ
    fetch ͍ͯͨ͠ͷͰɼ͜ͷ໰୊Λ౿ΜͰ͍ͨ
    // ίϯύΠϧΤϥʔ
    async fn recursive() {
    recursive().await;
    recursive().await;
    }
    
    

    View Slide

11. ࠶ؼؔ਺ͷ async-await Խ
    • ঢ়ଶʢFutureʣΛ Box ʹೖΕͯಈతʹ؅ཧ͢Δ͜ͱͰճ
    ආͰ͖Δ
    use std::pin::Pin;
    use std::future::Future;
    fn recursive<'a>() -> Pin + 'a>> {
    Box::pin(async move {
    recursive().await;
    recursive().await;
    })
    }
    
    

    View Slide

12. ·ͱΊ
    • Rust ੡ͷ CLI πʔϧ monolith Λ wasm ʹҠ
    ২ͯ͠ Chrome ֦ுʹͯ͠Έͨ
    • https://github.com/rhysd/monolith-of-web
    • async-await ͸ wasm Ͱ΋
    wasm_bindgen_futures Ͱ؆୯ʹ࢖͑Δ
    @Linda_pp
    @rhysd
    presented by
    
    

    View Slide