Making hypermadia-driven applications feel faster

When Basecamp introduced their new fizzy.do application, they pitched it as "Trello in the good old days." I loved the old Trello. A lot of people probably did, considering how fast it grew. And itt's true that it's gotten a lot slower and bloated.

Fizzy fixes the feature bloat. But it still doesn't feel as snappy as the old Trello. Being built with Hotwire (as a hypermedia-driven application), there's limitations and it's never going to feel as fast as an SPA. But it could be better in some ways. Opening cards and the modal to create a new card in particular still feel a little sluggish.

Anyway, I was having the same issue with Postomator. And while we are using Unpoly instead of Hotwire, it's the same concept of loading HTML over the wire instead of JSON, and it comes with the same limitations.

We were able to get a pretty good performance improvement with some simple changes.

Preload all the things

The quick win was adding up-preload to all sorts of links. So when the drafts page is loaded, Unpoly will preload all individual drafts in the background.

Try it for yourself on the Postomator homepage (no need for an account.)

The problem with this was that once you'd update a draft, you'd see stale content upon your return to the drafts page.

Unpoly has this covered too. You can use up-evict-cache to clear the cache so that everything is reloaded again. You can also explicitly ask it not to use the cache with up-cache="false" for specific links so that you get the latest content.

Caveat

Connection and distance to the server plays a role too, and I live much close to the Postomator server than the Fizzy server.