Rewriting My React Website in WebAssembly

Hey guys, welcome back to another video.

Today I want to share with you one more way of building a website. And that is, building a website using Rust and WebAssembly. More specifically, I'll be showing how I rewrote my old personal website using Rust and WebAssembly.

React website source code: https://github.com/kamiyaa/website-react
Wasm website source code: https://github.com/kamiyaa/website-wasm

Find me elsewhere:
Instagram:   / jeff.no.zhao  
Github: https://github.com/kamiyaa

Books I've been reading:
The Lean Startup by Eric Ries: https://amzn.to/3hwbg3J
Late Bloomers by Rich Karlgaard: https://amzn.to/2DcmCLo
Disclaimer, these are affiliate links. If you make a purchase, I will receive a commission.

I initially wrote my website in React because I wanted to learn react at the time. But ever since learning React, I've also been exploring alternatives to it
like Svelte and WebAssembly. Not because I don't like React, but I think its nice to see what other tools are available.
When I tried Svelte, I couldn't get html bookmarks to work properly with their
routing system. So I ended up not using it for my website. But this time with WebAssembly, I actually got something working that I'm genuinely happy with. And it'll be replacing my old react website moving forward.

I used a Rust library called Yew (https://yew.rs). Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly. What you'll find is that its very similar to React's component system. It features jsx-like syntax, has a virtual DOM and is interoperable with Javascript

It took me about 4-5 days to finish the website. It was a pretty close 1-to-1 mapping between the React version and WebAssembly version; I basically reused all my component logic. Since its a personal website, most of the content is static
The only problem I ran into was how arrays work in Javascript and Rust.
In Javascript, global arrays can be mutable. So I had an array of projects. And whenever I fetch the github metrics for it, I would add those metrics to that projects attributes so I don't need to re-fetch them later. This is to reduce the amount of API calls my website makes because Github has a limit on their APIs. In Rust, global arrays are static, meaning they're immutable. So I couldn't apply the same technique. So I ended up creating a global hashmap that mapped the `username/repoman` to their github metrics.

My thoughts on Yew.rs is that the project is progressing very well. It does have minor quirks where class attributes are inconsistent or their fetching APIs are hard to use. I wish they would follow React hooks more in the future.

There are disadvantages to using WebAssembly though.
1. There is much more boilerplate code to write
2. The language is statically-typed and not garbage collected so its much less forgiving than a language like Javascript that is garbage collected and dynamically typed.
3. Only recent releases of the major web browsers support WebAssembly. So most legacy systems won't even be able to access your website.
4. Ecosystem around WebAssembly is still lacking in terms of features and documentation, compared to the node/react ecosystem.

There are also advantages to using WebAssembly as well:
1. This technology will be much more used in the future, so learning it now could be beneficial
2. Performance benefits. My new website is about half the size as my react website.
3. Cool factor :)

So, do I recommend writing your website in WebAssembly?
Probably not for the entire website like what I did. There's just too much boilerplate
code to write to get anything substantial working. At least for the Yew library. You have to explicitly state all the messages and props that can be passed to a specific component. The tooling for it is still not as feature rich as node/react. But if you want to use WebAssembly for a small portion of your website to speed things up, or you're building a big Single-Page Application like Google Maps or Google Docs where you want more performance, then you might want to look into WebAssembly.

Music:
Imagine by lukrembo
Michikusa by PeriTune (Licensed under https://creativecommons.org/licenses/...)

Timestamps:
00:00 Intro
01:43 Website Demo
02:52 What I used
04:11 Code examples
07:07 Thoughts on tools
08:00 Advantages/Disadvantages of Wasm
09:20 Should You Use Wasm For Your Next Website (Conclusion)