Build A Rust Frontend (Really FAST Web Apps with Yew)

How to build a simple web app frontend using 100% Rust - no JavaScript. WebAssembly opens the door for frontend developers to use languages that don't necessarily compile to JavaScript, including Rust.

00:00 Introduction
00:40 What We'll Build
00:59 Environment/Project Setup
06:22 Styles
06:59 Build & Test
07:16 Conclusion

[Hobbitstomper]

From what I understand, WASM doesn't have access to the HTML DOM and anything that wants to access the DOM, has to do so via WASM DOM API which uses JavaScript. The official Yew docs mention that "using DOM APIs from WebAssembly is still slower than calling them directly from JavaScript". This is something that they are hoping to fix in the future, so that WASM has direct access to the DOM. So for now it seems, anything that accesses the HTML DOM is being compiled into JavaScript. The only performance gain we get is the server side execution of front end functions. Anyone, feel free to correct me, as I am only 99% sure.

[tprar]

I'm a systems developer and I love rust for that purpose.
But what I love even more is to see how this basically helps with applications that usually rely on Python, Ruby, JavaScript and so on.
Although mostly not yet production ready for all of this. This really is a hell of a language. Can't wait for all these crates to mature.

[dr-maybe]

Cool video, but it might be better with a “limitations” section. Accessing the DOM, window or document is a real hassle, the rust GUI browser frameworks are not mature and the performance isn’t actually better than JS in these frameworks. I’m a huge rust fan, but wouldn’t recommend yew over react for serious projects yet.

[MeizanoAM]

Your content is really great. The expertise on rust is on point. And no time is wasted.

[kg]

Really liked how it was quick and shows enough similarity with react, so easier to try it

[boipr]

I've been waiting for a video tutorial like this, thank you.

[santiagop.a]

This caught my attention immediately as I scrolled down my YouTube news feed. I’m react dev and I feel like it’d be a good strategy to keep an eye on these new players in the web landscape. Rust feels weird though, but willing to shift if needed, as for now I’ll keep writing js code. Thanks, really insightful video.

[emilcrafter]

This is really cool and all, didn't expect to see a "react equivalent" in Rust. I'm betting we'll see much more like this in the future. HOWEVER, if I were to ever use wasm on a project, you best believe that project has to be something I'm so passionate I'm willing to die for it because no one in the world is going to want to maintain that code for me.

[anotidaisheneilmisi]

First 40 seconds in and I'm impressed, great channel. Love the graphics and this is one of the few times I get to watch something that no one else is talking about, I know WASM and Rust obviously but I'd never heard of Yew

[danygagnon]

Okay this intro is beyond amazing. Nice video. Only thing with yew is the lack of community made components.

[skydivertyler]

For anyone coding along, there is a bug in the code shown in the video:
At 5:06, he mentioned to not put a semicolon in this place, but there _should_ be both a closing parentheses, then a semicolon ");"

(CTTM, if you're reading this, a pinned comment would be very helpful)

Another issue I encountered: If you use "rand" (version 0.8.3) as a dependency in the Cargo.toml file, you'll get the compiler error "the wasm32-unknown-unknown target is not supported by default" (I wonder if "getrandom" version 0.2.7, which appears to be installed by Trunk, causes some conflict?)

[JacoblBroughton]

Pretty intrigued, i’m a react dev but i’m very open to shifts in the web landscape. Last thing i’d want is to be left behind.

After playing the DOOM port that was compiled to web assembly and served on the browser, i realized that this wasm thing might something to pay attention to.

I’ve always written javascript, never really branched out much, so the Rust syntax looks pretty weird but there are also some similarities.

[matthewpaquette]

Beautiful is an interesting word of choice

[emrecaniklioglu]

Really great tutorial, I have been trying to learn Rust for a while now. And these kinds of tutorials were just what I needed to advance to the next step. I really appreciate it thanks a lot :)

[shimadabr]

For a systems development language, that seems very straightforward. Hope to see future progress in this.

[BbB-vruh]

Awesome, simple tutorial. Will definitely need to check out more example Yew projects on your channel.

[yt-sh]

This was pretty cool, you explained all the necessary details while keeping the video short.

[anthonypetruzzi]

It's not just 30 something line of code. It's code plus a whole convoluted ecosystem of tools to create a simple web app. And I'm not just bashing Yew, the entire front end ecosystem can become really convoluted very quickly. This is why I really believe a good engineer knows what to use for the job at hand. For instance, something this simple, you can do completely with either vanilla js or jQuery. I'm sure Yew has this place in the web development world but I'm not going to use it for something this simple. I still think the greatest example of showing the power of a framework and how it can incrementally be used to create a wonderful application is the rails 7.0 demonstration that dhh does. If you haven't seen that yet you should really check it out.

[BG-fosi]

Really good tuto. I'd love to see more of these in the future, as I am currently working on react and I feel like Rust has a potential to take over the web in some time in the future.

[glennmiller]

I've watched several of your videos on the way to learning Rust. Beneficial stuff!