Getting started with Rust 🦀 2021: 8. Building a web app in Rust

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:

Code repository (git tag: ep8):

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
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:

Good to know resources (if you like rabbit holes :P):

----------------------------------------------------------------
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:

Thanks for watching!

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

Social Platforms:

Support:

Your support is very much appreciated!

Free and open source software that I use:

Have a great day :)

[creativcoder]

Next steps: Now try deploying this as a progressive webapp (maybe on github pages). Though you will probably need to use a reverse proxy to deal with CORS.

[herrxerex]

This is awesome although I am not proficient enough yet to understand it all you have done an excellent job, thank you so much for making this!!!!

[lucianochadru]

Bro. Thanks a lot for that. This is wonderful. I'm just starting with web and rust and i just wanted to make proficient webapps. Well it looks like i hopped on a heck of a ride ! I have fun ahead :)
I am scared not gonna lie . But building webapps in rust man... that's wild magic i'm learning right now. Of course learning to cast fire spells will burn your hands sometimes :)

[herrxerex]

Also a request, if you could take out you time to maybe make something using gtk-rs would love to see and learn, love your teaching tyle

Thanks @creativcoder for the series, are you planning to continue it?

[Lucs-kucb]

I think it would be much easier using Trunk

[alexzander__]

thats a very beautiful color scheme, how its called ?

[dibyojyotibhattacherjee]

What's your vs code theme, and in your blog I saw a post about Arduino, why don't you do a series on that topic.

[janmarais]

Will the refresh logic work if there was no API key set at launch time? Seems to me that the match arm dealing with the refresh message is using the API key set at init and therefore won't know what the newly set API key is.

[TheDamisBlaine]

Maybe you are able to show how connect it with e.g. electron?

[naitikmakwana]

after clicking on refresh button my application got stuck on loading page. please help!!!!

[hc]

If API keys aren't supposed to be save in the browser local storage, where should it be saved?

[acimdotnet]

It's much easier to learn JS and use Rust just for the backend. 😀

[filmo]

2022-10 - Using Mac OSX I'm getting an error: no `run_native` in the root when building against the wasm32 target

Not sure if this is Mac specific or what. almost no info found via googling. If anybody has same issue and has solved, please let me know. (It compiles fine when targeting the native desktop, just not 'wasm32')

error[E0432]: unresolved import `eframe::run_native`
--> headlines/src/main.rs:1:26
|
1 | use eframe::{egui::Vec2, run_native, NativeOptions};
| no `run_native` in the root