Post

After reading the Github write up on their PR page performance improvements I wanted to see how quickly I could prototype a performant diff viewer using Datastar. largediff.fly.dev largediff.fly.dev/doc

1 repost5 likes

That's awesome! I've been recently convinced that web-applications should've remained server-side. The "look-and-feel" that SPA's gave us can now be achieved through morphing, web-components and modern CSS. Less code. No business-logic duplication. Happier users and devs.

The approaches here aren't ground breaking. Virtualizing/windowing. Only render what the user is seeing and a little extra to mitigate artifacts like a gap in rendered content which is typically negligible.

- Initial render actual page (SSR) - User interactions POST to backend to send necessary client state - Server builds a new projection based on that client state rendering a single template - Pushes the entire UI over SSE using brotli compression - Datastar morphs the update in to the dom

You can think of it like gaming streaming services GeForce Now. Immediate mode rendering and treating the server as the authority. You get a really simple mental model and a ton of levers to optimize performance.

500-file synthetic PR review, ~200k lines, fat-morph SSE. • 94% brotli savings on the wire (one warm encoder per session) • ~2,900 DOM nodes (file-windowed) • 0 forced reflow, 0 CLS, no style recalc flagged • idle scroll = 0 events, fingerprint skip