I started building the website from the template Yew webpack template. Using this template reduced my development effort thanks to hot reloading. To speed up I have used bulma css framework
- I need to ensure the app is responsive
- It should have a good light house score
- SPA should have multiple routes
Yew has a router library named
yew-router which we are using to setup routing. When SPA is deployed as static site it, routers need extra configuration. We have to configure
index.html as fallback url so any site would first reach
index.html. Now the routes simply append the
href in url bar because of relative url. To avoid this I have used added base tag in head.
Even though I used bulma css to speed up, there are some complex layouts, where we need to use
Unlike mature frontend frameworks like Next js, Gatsby, Yew didn't have code splitting. This costs the website performance. The wasm file size is around 450kb. This is one of the main downsides of writing a whole website in yew.
Cover Image from Unsplash