Rust Front-end with Yew

Transcript

1. Ciro Nunes 14 Sep 22 Rust Front-end with Yew 🦀🇦🇺
2. Agenda ⁉ What is Yew? Why Wasm & Rust? 🪄 Simple tutorial 🤩 My impressions 🗺 Where to go from here
3. What is Yew? Why Wasm & 🦀?
4. What is Yew?
5. Yew Rust / Wasm client web app framework
6. Yew Multi-threaded front-end web apps using WebAssembly 🏎💨
7. Yew Multi-threaded front-end web apps using WebAssembly 🏎💨 • Component-based
8. Yew Multi-threaded front-end web apps using WebAssembly 🏎💨 • Component-based • Great performance
9. Yew Multi-threaded front-end web apps using WebAssembly 🏎💨 • Component-based • Great performance • JavaScript interoperability
10. Why Wasm?
11. WebAssembly Low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages like Rust with a compilation target that can run in modern web browsers.
12. WebAssembly Not a silver bullet for improving performance of web apps 🤪
13. WebAssembly Not a silver bullet for improving performance of web apps 🤪 • DOM APIs from Wasm are still slower than directly from JS
14. WebAssembly Not a silver bullet for improving performance of web apps 🤪 • DOM APIs from Wasm are still slower than directly from JS • Perfect for heavy computation applications
15. WebAssembly Not a silver bullet for improving performance of web apps 🤪 • DOM APIs from Wasm are still slower than directly from JS • Perfect for heavy computation applications • Multi-threading via Web Workers
16. Why Rust?
17. Rust Helps developers write safer code with its rich type system and ownership model
18. Simple tutorial
19. Let’s build a To-do app
22. # [ derive(Clone)] struct Todo { text: String, completed: bool, }
23. struct TodoComponent { todos: Vec<Todo>, new_todo_txt: String, }
24. enum Msg { AddTodo, UpdateNewTodo(String), }
25. impl Component for TodoComponent { type Message = Msg; type Properties = (); fn create(_ctx: &Context<Self>) - > Self {} fn update(&mut self,_ctx, msg: Self : : Message) - > bool {} fn view(&self, ctx: &Context<Self>) - > Html {} }
26. fn create(_ctx: &Context<Self>) - > Self { Self { todos: vec![Todo { text: "Learn Rust".to_string(), completed: true, }], new_todo_txt: "".to_string(), } }
27. fn view(&self, ctx: &Context<Self>) - > Html { let link = ctx.link(); let on_cautious_change = link.batch_callback(|e: Event| { let input = e.target_dyn_into: : < HtmlInputElement>(); input.map(|input| Msg : : UpdateNewTodo(input.value())) }); html! { <div> <ol> { self.todos.iter().map(|todo| html! { <li> <input type="checkbox" checked={todo.completed} / > <span>{format!("{}", todo.text)} < / span> < / li> }).collect: : < Html>()} < / ol> <div> <input type="text" value={self.new_todo_txt.to_string()} onchange={on_cautious_change} / > <button onclick={link.callback(|_| Msg : : AddTodo)}>{ "Add" } < / button> < / div> < / div> } }
28. fn update(&mut self, _ctx: &Context<Self>, msg: Self : : Message) - > bool { match msg { Msg : : AddTodo = > { let new_todo = Todo { text: self.new_todo_txt.to_string(), completed: false, }; self.new_todo_txt = "".to_string(); self.todos.push(new_todo); true } Msg : : UpdateNewTodo(new_txt) = > { self.new_todo_txt = new_txt; true } } }
29. use yew : : prelude : : *; fn main() { yew : : start_app: : < TodoComponent>(); }
30. My impressions
31. My impressions Yew
32. My impressions Yew • Very similar to React, but it’s Rust
33. My impressions Yew • Very similar to React, but it’s Rust • Easy to setup and learn the basics
34. My impressions Yew • Very similar to React, but it’s Rust • Easy to setup and learn the basics • Good documentation
35. My impressions Yew • Very similar to React, but it’s Rust • Easy to setup and learn the basics • Good documentation • Looks promising
36. Where to go from here
37. Where to go from here Yew
38. Where to go from here Yew • Check out the docs yew.rs
39. Where to go from here Yew • Check out the docs yew.rs • Learn about Properties, Function Components, Hooks, Agents and the Router
40. Where to go from here Yew • Check out the docs yew.rs • Learn about Properties, Function Components, Hooks, Agents and the Router • Checkout stylist for CSS-in-Rust
41. Where to go from here Yew • Check out the docs yew.rs • Learn about Properties, Function Components, Hooks, Agents and the Router • Checkout stylist for CSS-in-Rust • Take advantage of Rust parallelism in Wasm for heavy computations
42. Thanks for listening ✌