Building a front app with Rust (yes you can) and Yew

Terry Raimondo
Sep 11 · 5 min read

JS/TS is killing me. Now that I use Rust everyday, I have to try Yew, a front framework for Rust to create WASM apps, I spotted it long time ago but it wasn’t mature enough for my use case… guess what — now is the time ! The project is still alive and well !

Rust fullstack dev it is.

Part 1: Setup and basics

Let’s start with the basics, how to install it.

cargo new project

cargo add yew # (Using cargo-edit)

Create file app.rs:

app.rs
main.rs

Obviously I have to call it in my main.rs

And… yeah, that’s it. In this example I added Header and Root in app.rs, (we will come to it), and I must say this is a really simple setup, the hardest part would be handlings assets and js libs in the build process to finish the setup. So how did I do ?

I created a small ruby script, why ? because no JS, thanks. I could have used yarn or something like this to handle the build pipeline, but I’d rather write it in Ruby since I know it well and it is not JS + it is a good language to write scripts. You can write it in your favorite language, it doesn’t matter here, the goal is just to make system calls to compile Sass files, create files, move files and so on… I used Filewatcher (a ruby gem (to watch files duh)) to listen to changes on my Sass files and recompile them when needed, the Sass files are compiled, minified and appended to app.css and external libs like Material, same thing in libs.css.

The file structure looks like this:

I like to put style.scss where it belongs, for example, `coupons` is a container, listing every `coupon`, the list style is in app/pages/coupons/style.scss whereas the style for the coupon element is one level deeper in coupons/coupon/style.scss — That’s why there is many style.scss files.

If you come from front development, you already should have your prefered way of doing this kind of things, where to put containers and components and their associated stylesheets.

The routing service comes from the Yew Github repo, I found it a bit hard to understand at first.

My script compiles scss here in static/ folder along with an index.html.

What is routing, why and how ?

Routing makes your app more usable, instead of having all your app and pages on https://your-url.com/ you may want to have unique URLs for each section like this: https://your-url.com/section-1

Note that on a static server (like with cargo web start), going straight to your URLs will end up in a 404, my front apps are hosted on GCloud and 404 resolves to index.html (there is a setting on your Google Storage bucket for this) so my routing works as expected.

Yew is still in development, and I think it lacks some killer features like routing, gladly they have a routing example in their repo: dwhttps://github.com/yewstack/yew/tree/master/examples/routing

The learning curve is a bit steep at first (especially because I was a stranger to the actore model), but once you get it, everything’s crystal clear. I added the routing service in my app, it works really well and I think is a great example of what you can achieve with Yew and WASM, you should definitely checkt it out.

Easy peasy

I’m not done yet, this front app is just a draft and I may encounter some issues in the future, but for now I can’t see how you could convince me to use JS (except for maintaning my old apps) anymore.

Bonus: My WASM binary is only 300ko when compield with opt-level = ‘s’

Hours later…

Part 2: A real web app

I had a bit of a struggle to get my head around the actors model, and I think that Yew is a bit verbose, but you know, you can’t have your cake and eat it (not sure if I’m using this expression right), what I mean is Rust is a powerful and safe language, I’ll never have to fully rewrite my apps or fear the refactoring process (thanks to the compiler) which saves me a LOT of time. All the time you give writing a Rust app transforms in an advantage later.

Requesting web APIs

Yew has its own FetchService, as you have to check everything when you write some Rust, your code quickly becomes verbose if you don’t split correctly the logic of your app, I opted to make each model responsible of its data and write all the routes with my HttpClient which is just an overlay on top of FetchService, it manages credentials (JWT) and uses the routes to match correct verbs data etc... Let me show you.

Routes:

HttpClient (first version, it’s a draft):

I won’t give you much more details on the code as this post will be too long, but here are some screenshots of the result:

Login page
Home page — coupons

Should I use Rust and Yew to write my web apps ?

As you can see, you can achieve what you need with Rust and Yew, I think that Rust is so strong I will always answer yes to “should I use Rust for…”, but you should note that Yew ecosystem is not really mature yet and if you run into troubles like I did for routing (lucky that a routing example has been put in the repo), you may have to write something from scratch for it. If you are used to write the less code possible by using libs, this may not be for you, adding too much crates to the app really add up in size and you don’t want a 4Mo binary and there is not much out there to help you (again the routing example).

Maybe in the coming months we’ll see the Yew ecosystem broaden and it will be easier to write something quickly but for now the time you’ll take to dev your app entirely is consequent. Of course you will always save much by avoiding maintenance and bugs hassle thanks to Rust, so it is up to you:

  • Either you want your app available soon — use something else
  • Or you want something solid and avoid bugs — it is for you

Last but not least, there is a steep learning curve, if you don’t want to get your hands dirty, this may not be for you.

Thanks for reading, if you want some examples or ask question, drop a line ;)

The Startup

Medium's largest active publication, followed by +540K people. Follow to join our community.

Terry Raimondo

Written by

Rust/Ruby dev & CTO @ Getpro

The Startup

Medium's largest active publication, followed by +540K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade