Rust & Emscriptenの話

Transcript

1. Rust & Emscriptenͷ࿩ ͓ͷ͏͑ (@_likr) 2015/11/21 2016೥ͷAltJSʹ͍ͭͯޠΔձ
2. ࣗݾ঺հ • ͓ͷ͏͑ ( @_likr ) • ՄࢹԽͷݚڀͱ͔΍ͬͯΔ • ng-kyotoͱGDG KobeͰελοϑ΍ͬͯΔ • D3.jsɺAngularJSɺReactͱ͔΍ͬͯΔ
3. ஫ҙ • ωλൃදͰ͢ • ͙͢ʹ࢓ࣄͰ࢖͑Δٕज़Ͱ͸͋Γ·ͤΜ • Angular΍GoogleςΫϊϩδʔͷ࿩΋͋Γ·ͤΜ • AltJSͷ࿩΋͋·Γ͋Γ·ͤΜ
4. ΦϨͷߟ͑ͨ࠷ڧͷ ࣍ੈ୅ϑϩϯτΤϯυ։ൃ ͓ͷ͏͑ (@_likr) 2015/11/21 2016೥ͷAltJSʹ͍ͭͯޠΔձ
5. ΍Γ͍ͨ͜ͱ • େن໛ɾߴ଎ͳWebϑϩϯτΤϯυΞϓϦͷ։ൃ
 (਺஋ܭࢉɾΞϧΰϦζϜͳͲͷ΢ΣΠτ΋େ͖͍)
6. JavaScriptͷਐา • ClassesɺArrow functionsɺModules • DecoratorsɺAsync/Await • Type Annotations • …
7. JavaScript͸ɺWebϖʔδΛνΧνΧͤ͞ΔͨΊ ͚ͩͷػೳ͔Β୤͠ɺେن໛։ൃ΋Մೳͳ ੒ख़ͨ͠ϓϩάϥϛϯάݴޠʹͳΓͭͭ͋Δ
8. Ͱ΋ɺJavaScript͕ͭΒ͍৔໘΋·ͩ͋ΔΑͶʁ
9. ྫ͑͹ɺredux JavaScriptͷΦϒδΣΫτΛpureʹอͭͨΊʹɺ • Array.fromɺObject.assignΛ࢖ͬͨίϐʔ • immutable.jsͷར༻ JavaScriptͰ͸immutabilityͷอূ͸೉͍͠ state action reducer next state ෭࡞༻ͷͳ͍ؔ਺ →stateͷมߋ͸ېࢭʂ immutability: ΦϒδΣΫτ͕มߋ͞Εͳ͍͜ͱ
10. όάͷԹচ • มߋͯ͠͸͍͚ͳ͍஋ͷมߋ • มߋͯ͠΋ҙຯͳ͍஋ͷมߋ • ΞΫηεͯ͠͸͍͚ͳ͍஋΁ͷΞΫηε • ্هΛอূ্ͨ͠Ͱͷtestability
11. ܧ͗଍͠ܧ͗଍͠ͷݴޠ࢓༷Ͱɺ ৽͍͠ύϥμΠϜʹ௥ै͢Δͷ͸ݶքʁ
12. େن໛Ͱߴ଎ͳWebϑϩϯτΤϯυΞϓϦΛ ࣮૷͠΍͍͢ݴޠ͸ʁ
13. ͍ΖΜͳݴޠ… • CɺC++ɺJavaɺScalaɺGoɺ HaskellɺOCamlɺCoffeeScriptɺ TypeScriptɺElmɺHaxeɺClosure Scriptɺ…ʁ
14. Rust
15. Rust • https://www.rust-lang.org/ • Mozilla͕։ൃͨ͠γεςϜϓϩάϥϛϯάݴޠ • 2015೥5݄ʹόʔδϣϯ1.0ϦϦʔε • ݱࡏόʔδϣϯ1.4 • ࠾༻ࣄྫɿ Servo (https://github.com/servo/servo)
16. Rustͷಛ௃ • ࣮ߦ଎౓ • ߴ౓ͳந৅Խͱޮ཰తͳ࣮ߦΛཱ྆ • ϝϞϦηʔϑ • ϝϞϦͷྖҬ֎ΞΫηε΍ϝϞϦϦʔΫΛ๷ࢭ • εϨουηʔϑ • ϚϧνεϨουϓϩάϥϛϯάͷϛεΛ๷ࢭ
17. ݸਓతͳϝϦοτ • Garbage Collection͕ͳ͍ • ThreadɺSIMDΛඪ४ϥΠϒϥϦͰαϙʔτ • Web AssemblyͷରԠ͕༗๬
18. ࠓɺRustͰWebϑϩϯτΤϯυ։ൃ͕Ͱ͖Δͷ͔ʁ
19. Emscripten
20. Emscripten • http://emscripten.org/ • LLVM to JavaScript Compiler • C/C++ϓϩάϥϜΛJavaScriptʹม׵ • ࠷దԽΛ༗ޮԽ͢Δͱasm.jsΛग़ྗ • কདྷతʹ͸WebAssemblyʹ΋ରԠ
21. rust-webplatform • https://github.com/tcr/rust-webplatform • DOM APIͷബ͍ϥούʔ • ηοτΞοϓεΫϦϓτ෇͖ • cargo-build (https://github.com/AerialX/cargo-build) • rust-rt-minimal (https://github.com/AerialX/rust)
22. Hello World 1 extern crate webplatform; 2 3 fn main() { 4 let document = webplatform::init(); 5 6 let p = document.element_create("p").unwrap(); 7 p.html_append("hello world"); 8 9 let body = document.element_query("body").unwrap(); 10 body.append(&p); 11 12 webplatform::spin(); 13 }
23. զʑ͕ཉ͔ͬͨ͠ͷ͸͜Εͳͷ͔ʁ
24. ޮ཰ྑ͍։ൃͷͨΊʹϑϨʔϜϫʔΫ͕ඞཁͩʂ
25. Virtual DOMͬΆ͍΋ͷΛ࣮૷ͯ͠ΈΔ
26. RustͰVirtual DOM • ComponentఆٛͱRendererΛ෼཭͢Δ • Pure RustͷComponentͱɺ
 ϒϥ΢βͱ΍ΓͱΓ͢ΔRenderer • Mithril(https://lhorie.github.io/mithril/)Λਅࣅ͢Δ • ܰྔɺγϯϓϧ
27. ࡞ͬͨ 29 pub fn v(tag: &str, attributes: Vec<Attribute>, children: Vec<Node>) -> Node { 30 Node::Element(Element { 31 tag: String::from_str(tag), 32 attributes: attributes, 33 children: children 34 }) 35 } ཁૉ໊ɺଐੑɺࢠComponentΛड͚औͬͯComponentΛੜ੒͢Δؔ਺ ComponentΛड͚औͬͯHTMLͷॻ͖ग़͠Λߦ͏ؔ਺ 9 pub fn mount<'a, T: 'a + Component>( 10 document: Rc<RefCell<Document<'a>>>, 11 root: Rc<RefCell<HtmlNode<'a>>>, 12 component: Rc<RefCell<T>>) { 13 let target = root.borrow(); 14 target.html_set(""); 15 let node = component.borrow().render(); 16 render(document, target.deref(), node, root.clone(), component); 17 }
28. ࠶Hello World 8 struct Main; 9 10 impl Component for Main { 11 fn render(&self) -> Node { 12 v("div", 13 vec![attribute("class", text_value("hoge"))], 14 vec![ 15 v("p", vec![], vec![ 16 text_node("hello"), 17 ]), 18 v("p", vec![], vec![ 19 text_node("world"), 20 ]) 21 ] 22 ) 23 } 24 } 25 26 fn main() { 27 let main_component = Rc::new(RefCell::new(Main)); 28 let document = Rc::new(RefCell::new(webplatform::init())); 29 let body = Rc::new(RefCell::new(document.borrow().element_query("body").unwrap())); 30 vdom::mount(document.clone(), body.clone(), main_component.clone()); 31 webplatform::spin(); 32 } <div class="hoge"> <p>hello</p> <p>world</p> </div>
29. Data Binding 10 struct Main { 11 state: Rc<RefCell<HashMap<String, String>>> 12 } 13 14 impl Component for Main { 15 fn render(&self) -> Node { 16 let key = String::from_str("message"); 17 let message = self.state.borrow().get(&key).unwrap().clone(); 18 v("div", 19 vec![attribute("class", text_value("hoge"))], 20 vec![ 21 v("p", vec![], vec![ 22 Node::Text(message.clone()), 23 ]), 24 v("input", vec![ 25 attribute("value", AttributeValue::Text(message.clone())), 26 attribute("change", AttributeValue::EventHandler(Box::new({ 27 let state = self.state.clone(); 28 move |e: &mut Event| { 29 let key = String::from_str("message"); 30 let mut st = state.borrow_mut(); 31 let node = e.target.as_mut().unwrap(); 32 st.insert(key, node.prop_get_str("value")); 33 } 34 }))), 35 ], vec![]) 36 ] 37 ) 38 } 39 } onchangeͷΠϕϯτϋϯυϥͰstateΛߋ৽ stateͷ಺༰Λදࣔ
30. • ྑ͔ͬͨ͜ͱɿܕ͕ݫ֨ • mutabilityɺownershipʹΑͬͯ஋͕
 Ͳ͜Ͱมߋ͞ΕΔͷ͔ϋϯυϦϯά͕༰қ • ѱ͔ͬͨ͜ͱɿܕ͕ݫ֨ • ΠϕϯτϋϯυϥΛॻ͘ͷʹҰۤ࿑
31. TODO • ࠩ෼ߋ৽ • σʔλϑϩʔ • RustϑϨϯυϦʔͳUtility • ੑೳଌఆ • …
32. ·ͱΊ • ͍Ζ͍Ζະ׬ • Rustૉఢɺ଎ͯ҆͘શͳ͸ͣ • Virtual DOMΛ࣮૷͠Α͏ • ਺೥ޙʹ͸͜ΜͳWebϑϩϯτΤϯυ։ൃ͕
 ݱ࣮ͷ΋ͷʹͳ͍ͬͯΔ͔΋ʁ
33. ng-kyoto Angular Meetup #3