Skip to content

Hypermedia: The New/Old Architecture Set to Revolutionize Web and Mobile Development

Hypermedia, Datastar, and Hyperlith

Hypermedia is the tech everyone is talking about, yet it remains a bit of a mystery for many. After diving deep, I’m convinced this new/old approach is not just a trend—it’s poised to disrupt how we build applications on both the web and mobile.

Here are my thoughts, inspired by the powerful concepts driving this shift.

What is a Hypermedia Driven Application (HDA)?

Section titled “What is a Hypermedia Driven Application (HDA)?”

The Hypermedia Driven Application (HDA) architecture—championed by projects like htmx —is an ingenious fusion of old and new.

It takes the simplicity and flexibility of traditional Multi-Page Applications (MPAs) and marries it with the smooth user experience (UX) typically found only in complex Single-Page Applications (SPAs).

After struggling to grasp this concept myself, I decided the best way to understand it was to build one. That journey led me to the fascinating world of Hyperlith and Datastar . The ideas behind Hyperlith are truly revolutionary. Hyperlith stands for Hypermedia and Monolith.

The Philosophy: Dumb Terminals, Smart Backend

Section titled “The Philosophy: Dumb Terminals, Smart Backend”

In the HDA model, your application’s logic, state, and rendering all reside in the backend.

  • Your distributed application runs entirely on the server.
  • The browser or mobile app becomes a dumb terminal.

Pages are conceptually replaced by views (for both web and mobile). When a user interacts with a control (like a button), it triggers an action on the server. This action recalculates the current view, which is then pushed to all relevant users.

Think about a traditional leaderboard implemented as a web page: instead of polling or building complex real-time infrastructure, the view automatically updates for all online users as soon as the data changes on the server. The multiplayer capabilities are practically trivial!

This server-side approach has several game-changing implications for development:

With frameworks like Hyperlith and Datastar, you can achieve amazing results without starting from scratch. Instead of managing separate SPAs or native mobile apps, you manage a single backend that renders views suitable for any client.

Mistake a typo in your app? Need to tweak a UI element? In the HDA model, you simply fix the code on the server. You don’t have to upload a new mobile app version and wait for store approval. The changes are live instantly for all users.

Since all rendering happens on the server, implementing server-side A/B testing becomes incredibly simple. You can easily serve different versions of a view to different user segments without complicated client-side routing or code splitting.

The HDA architecture makes it easier to create views that are shared among users (like a stock ticker) and then progressively make portions user-specific (like a profile widget).

It’s easier to start with a shared view and then make it specific than to start with isolated pages and struggle to add shared portions later.

Many people worry that sending the complete HTML on every change won’t scale, especially on mobile networks. This concern is often misplaced.

Instead of thinking of it as constant full-page refreshes, imagine it as a stream of bytes, highly compressed with algorithms like Brotli.

The compression acts as your caching and diffing mechanism, achieving compression ratios of 100 or more! This efficiency is critical: a $1.5 MB/s sustained throughput on the server is equivalent to handling $150 MB/s without compression, drastically reducing infrastructure costs.

Seamless User Experience with DOM Morphing

Section titled “Seamless User Experience with DOM Morphing”

Modern apps like YouTube and Spotify offer that polished mini-player experience, letting you keep watching content while navigating to a new page. This amazing user experience is a natural fit for HDAs, thanks to a technique called DOM morphing.

Instead of completely swapping out the entire page (like in a traditional MPA) or relying on complex client-side routing (like in an SPA), the HDA backend sends the new rendered view. The client then intelligently morphs the existing DOM to match the new version. This means that persistent elements—like an ongoing video player or music widget—can retain their place, focus, and internal state, resulting in a smooth, interruption-free user flow.

The strategic shift towards Hypermedia Driven Applications (HDA) fundamentally alters the economics of development, making internal solutions significantly more viable. As the cost of building web and mobile experiences drops, so too does the traditional calculus of “build vs. buy.”

To capitalize on this change, our next major step is integrating Internal Developer Portal capabilities directly into BigConfig. This addition completes BigConfig’s transformation into the essential, comprehensive library for scalable operations, providing core building blocks like configuration as code, workflow orchestration, scaffolding, robust persistency, auditing, control planes, and now, internal developer portals.

I’m working on the code right now. Stay tuned, I will update the blog post as soon as I have the first version.

Alt text

I built a simple HDA example to prove the concept. When you open it in two separate browser tabs and interact with one, the other updates instantly.

The most incredible part? Zero JavaScript was required to implement the real-time, multiplayer capabilities. The state is managed centrally and seamlessly on the server.

The future of application development is here, and it looks a lot like the past—just smarter, faster, and much more scalable.

Would you like to have a follow-up on this topic? What are your thoughts? I’d love to hear your experiences.