Skip to content

Conversation

@jpaoad31
Copy link

This PR rewrites flash.comma.ai (again) using Svelte 5 (with runes) + SvelteKit.

You can visit the Svelte version of flash at flash.jpadams.xyz

Summary:
General page performance is about the same, perhaps slightly in favor of Svelte if you squint, but any current differences aren't noticeable, and likely won't be until the application is larger (i.e. if this is used for comma.ai/connect). Build times are longer with Svelte, but the result is smaller bundle sizes (≈ 25% smaller for this application) and therefore slightly faster load times. However, using Lighthouse locally and in the cloud didn't show any consistent differences for LCP or other metrics, see Page Speed Reports below.

Features:

  • HTML Pre-rendering + hydration (although with so little static content this basically no impact)
  • Example Unit and End-to-End testing.
  • GitHub Actions (for tests + deploying to GitHub Pages)

Notable changes:

  • New separated components for CopyText (from index.jsx) DeviceState, LinearProgress (from Flash.jsx)
  • Re-encoded the base image for qdl-ports-four.svg from png to webp to reduce size (162KB vs 2.6MB)
  • Updated Tailwindcss to version 4 (a few classes were updated to reflect this)

Performance (M3 Max MacBook Pro, 16-core CPU + 48GB RAM)

Stat (source) React Svelte
Build Time (Vite) 600ms 1300ms
Bundle Size (Chrome Network Tab) 279kB 211kB
LCP (Chrome Perf Tab) <0.1s* <0.1s*
Refresh Latency (VS Code Live Preview) 120ms* 90ms*

*with such a small application, transient slowdowns in network and page rendering can change these values by more than 100%. These values aren't really that useful.

Page Speed Reports:

⚠️ Disclaimer:
I don't own any comma hardware devices, so I am unable to verify that this new version still works! I'd appreciate if someone could verify this for me.

@jpaoad31 jpaoad31 marked this pull request as ready for review December 25, 2025 20:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace React with something simple

1 participant