commaai / flash

https://flash.comma.ai
5 stars 14 forks source link

Rewrite app with astro with preact #49

Open yaodingyd opened 2 months ago

yaodingyd commented 2 months ago

Fix #42.

This is my attempt to update app with a lighter, more performant way framework/library. It consists two major changes:

  1. use astro (https://astro.build/) for meta framework. Astro is designed to best work for static content heavy sites, and uses islands (https://docs.astro.build/en/concepts/islands/) architecture to selectively hydrate certain parts of the app, with user's choice to different loading strategy. It also supports different ui library component, so even if we don't use preact (I think we should), we can keep astro with a different UI component lib.
  2. use preact (https://preactjs.com/) to replace react. Preact is fast 3kB alternative to React with the API, so we keep all existing react components/hooks usage to reduce the cognitive load for a different UI lib, while getting better performance and smaller size.

preview site: https://flash-peach.vercel.app/

also take a look at the comparison: first image is current side, second is the astro/preact rewrite

loadtime: 400ms vs 100ms componet js load: 49.8kb vs. ~10kb (5.2+3.1+1.5)

Screenshot 2024-06-21 at 10 18 40 PM Screenshot 2024-06-21 at 10 18 09 PM
incognitojam commented 2 months ago

I wonder if the perf gains come from switching to Preact, since most of the text content was already just in the index.html, is there anything for Astro to statically generate?

yaodingyd commented 2 months ago

I already manually converted the previous app to index.astro so in this case, perf gains mostly come from Preact. Although this site is really simple enough that we have very distinct static and dynamic split. I think adding Astro here is to future-proof any feature additions that does not have this, that we can adopt to static generation