Website
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
Key takes
- I need to ensure the app is responsive
- It should have a good light house score
- SPA should have multiple routes
Routing
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.
<base href="https://yew-portfolio-iwfte.ondigitalocean.app/">
Layout
Even though I used bulma css to speed up, there are some complex layouts, where we need to use css grid.
Bundle size
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.
Light house scores
More Info
Cover Image from Unsplash
Top comments (0)