In this episode, we'll port our native GUI app (headlines) to make it run in a web browser. We're gonna learn how to use WebAssembly with Rust. We'll also implement the solution to the last exercise in the previous video of implementing the refresh button handler.

Link to previous videos: Part A: https://www.youtube.com/watch?v=NtUkr... Part B: https://www.youtube.com/watch?v=SvFPd...

Code repository (git tag: ep8): https://github.com/creativcoder/headl...

This is in continuation of exploratory style videos that am making on Rust. We'll start a new series after this, where we'll start with the language from the very basics.

For context on the newsapi crate watch episode 6, 5 and 4 in the channel.

This video wouldn't have been possible without the amazing people in the Rust community building high quality libraries. So a big thanks :)

TImecode: 0:00 - Context 0:33 - Overview 1:10 - What changes we're doing 1:52 - What is WebAssembly (a quick intro) 4:33 - adding fetch_web to newsapi 6:29 - rectoring headlines into a cdylib 8:21 - exposing headlines to wasm 9:07 - what is wasm-bindgen 9:31 - initialising app with wasm specific APIs 10:24 - adding a wasm specific logger 11:02 - marking it as cdylib and generating wasm module 11:41 - importing wasm module in index.html 13:28 - creating build scripts 14:45 - debugging wasm module gen issues 15:31 - replacing thread and fetch with wasm alternatives 18:13 - finally runs, but 19:48 - using setInterval to replace loop 20:41 - saving app state 24:10 - ex solution: implementing refresh button 26:03 - fixing canvas repaint issue 26:28 - closing thoughts

Target audience: Programmers who are new to Rust and want a bird's eye overview of the development experience in Rust.

Crates: wasm-bindgen: https://github.com/rustwasm/wasm-bindgen wasm-bindgen-futures: https://rustwasm.github.io/wasm-bindg... gloo-timers: https://crates.io/crates/gloo-timers tracing-wasm: https://github.com/storyai/tracing-wasm egui: https://github.com/emilk/egui tracing: https://github.com/tokio-rs/tracing serde: https://github.com/serde-rs/serde

Good to know resources (if you like rabbit holes :P): WebAssembly with LLVM: https://richardanaya.medium.com/write... WebAssembly official spec: https://webassembly.github.io/spec/core/ HTML Canvas API (used by egui on web): https://developer.mozilla.org/en-US/d... egui_web: https://github.com/emilk/egui/tree/ma...

---------------------------------------------------------------- This series is aimed at programmers who already have some experience with at least one imperative language such as Python or C/C++, but are new to Rust.

What is Rust and why should you invest time in learning it?

Rust is the most loved programming language according to the Stack Overflow survey for 6th year in a row (2016-2021). Read more in the following blog: https://stackoverflow.blog/2020/06/05...

Thanks for watching!

This channel is dedicated in helping people become better at programming.

Social Platforms: 🐤 Twitter: https://twitter.com/creativcoder 📒 Github: https://github.com/creativcoder 📗 Polywork: https://www.polywork.com/creativcoder 🕸️ Blog: https://creativcoder.dev

Support:

Patreon: https://www.patreon.com/creativcoder Ko-fi: https://ko-fi.com/creativcoder

Your support is very much appreciated!

Free and open source software that I use: 🌐 Firefox: https://www.mozilla.org/en-US/exp/ 📽️ Open Broadcaster Software: https://obsproject.com 🎬 Kdenlive: https://kdenlive.org 🎨 GIMP: https://www.gimp.org/ 🔊 Audacity: https://www.audacityteam.org/ 🖌️ MyPaint: http://mypaint.org/

Have a great day :)