Life Is The Question, I Am The Answer (Dot Com)

A few months back I impulse bought the domain lifeisthequestioniamtheanswer.com with no idea of what to use it for, I just thought it was a funny domain. Fast forward to last month and I decided to use it as an excuse to learn WebAssembly (WASM) and Rust, so if you go to it right now it should just display a random quote (or image) from this blog. The rest of this post is my feelings on WASM/Rust after I built it.

The entire site is built on Yew a frontend framework for Rust which complies into WASM. This was my first time using anything that isn't JavaScript for frontend dev, so I was pleasantly surprised at how familiar the code examples in the GitHub README looked. Of course that may be just have been because of my knowledge of the languages it was inspired by.

Initial setup was much simpler than I expected as well. I downloaded this project template which had pretty much everything I needed. After setting up the API endpoint on this site to get a random quote, I set to work.

I'm not going to go through all the code, but I do want to show some snippets of how simple it really is.

impl Renderable<App> for App {
    fn view(&self) -> Html<Self> {
        html! {
            <div class="container">
                <h1>{ "Life Is the Question, I Am the Answer" }</h1>
                <small>
                    { "random quotes and images from " }
                    <a href="https://blog.justinduch.com" target="_blank">{ "https://blog.justinduch.com" }</a>
                    { " using /api/quote." }
                </small>
                <div class="quote">{ self.view_quote() }</div>
                <div class="footer">
                    <button onclick=|_| Msg::Quote>{ "refresh" }</button>
                    <small>
                        <a href="https://github.com/beanpuppy/litqiata" target="_blank">
                            { "view the source code" }
                        </a>
                    </small>
                </div>
            </div>
        }
    }
}

This is the root app, you can see it has all the things you would expect from any modern day JS framework including JSX like structures with the html! macro. Yew has a tonne of similarities to React including it's own virtual DOM. State management also seems to be very similar, but I didn't need it for this project so I can't say for sure.

There were some bottlenecks however:

• Yew's documentation is garbage. It took me an hour to figure out how to do HTTP requests.
• It's Rust. Don't get me wrong, I love Rust it's actually my favourite language (I carry Ferris everywhere with me on my backpack)^[1]. But holy shit is it verbose, if I wrote this in React it be at least 50% smaller in terms of LOC. Normally, I would say that Rust's verbosity is one of it's greatest strengths, but it really didn't fit something as small as this.
• Nginx doesn't support the wasm mime type. More of a nitpick as it was an easy fix to just add it but it was annoying nonetheless.

Overall it was a positive experience. I was able to pick it up and become productive quite quickly even compared to my attempts with JS frameworks. While I think it's too early to build any mission critical infrastructure in WASM, I may use it for the small module here and there. I look forward to seeing how it develops and getting rid of JavaScript for a good language, but for now it looks like the fourth rewrite of the blog is going to come much sooner than expected.

If you want to see the source code it's here.

^[1]: