This is a recreation of this balt311 page. The page is very interactive, so it's a perfect candidate to experiment with using simpler tools to increase development speed and app performance.

• responsive layout, best viewed on wider screens (for now)
• click service request card to show location in map
• scroll down to load more service requests
• data for this page was generated by replicating the structure of the original page's responses with placeholder content

TL:DR: As you scroll down to load more service requests, they should load instantly. I was able to build this in a weekend without AI. And improved latency for loading new service requests by 96%, specifically from 1500ms to 50ms. While using the same amount of data as the original page.

The total HTML/JS/CSS size on initial load also decreased by 95% from 11.24MB to 0.45MB or 450kB. Granted it is not feature-complete, but implementing the remaining features should not take 10MB to do it.

You can compare them yourself by opening the network tab dev tools, and watch the response times as you load more service requests.

End user
• Snappy experience thanks to the low latency and file sizes
• Accessible: it should stay responsive on low bandwidth and low memory devices
OPI
• Development speed: moving most of the logic to the backend simplifies the frontend
• Rust on the backend catches bugs at compile time instead of at runtime. Decreasing bugs in production

The tech stack:

Frontend
• Web Components
• HTMX
• Alpine.js
Backend
• SQLite (PostgreSQL alternative)
• Rust (tradeoff: frontend simplicity for backend efficiency)
Deployment
• Simple dockerfile on fly.io

More technical discussion here.