The world of front-end web development is evolving rapidly. While many developers focus on popular frameworks like React, the overall architecture of web apps is splintering into different paradigms. Each approach offers a unique way to handle data and user interfaces, creating new options for building modern websites and applications.

The Rise of Reactive Frameworks

For over a decade, reactive frameworks such as React, Angular, Vue, and Svelte have dominated the front-end scene. These tools bring a stateful, dynamic approach to building user interfaces. Developers using these frameworks typically run a sophisticated engine in the browser that manages the app’s state and updates the UI efficiently.

In this setup, the client often communicates with a backend API via JSON, syncing data and triggering re-renders as needed. The server remains relatively simple, mainly responsible for providing data and executing business logic. This model has become the standard because it offers a smooth, responsive user experience and a clear separation between frontend and backend.

Hypermedia and the RESTful Return

On the other side of the spectrum, hypermedia-driven applications focus on keeping the data on the server. Instead of heavy client-side logic, this approach relies on the server to produce markup that the front end simply displays. This method emphasizes a true RESTful architecture where the client is mostly a visual layer.

Tools like HTMX, Hotwire, and Unpoly facilitate this style by enabling server-generated HTML snippets to update parts of the page. This reduces complexity in the browser and keeps data management on the server, making it easier to develop and maintain, especially for simpler or content-focused sites.

In essence, hypermedia apps treat the server as the main source of truth, with the client acting as a passive viewer. This approach simplifies the architecture but might limit interactivity and real-time updates compared to reactive frameworks.

The Local-First and Client-Side Data Movement

An emerging approach combines aspects of both worlds by placing SQL databases directly in the browser. This “local-first” model enables apps to store and manipulate data on the client side, syncing with a remote database like Postgres when needed.

In this setup, the backend API is often used only for specialized functions, not for persistent data storage. The data is distributed to each client and kept in sync automatically, providing resilience and fast access even when offline.

This architecture is gaining interest because it offers a decentralized way to handle data, making apps more resilient and responsive. Developers can still use reactive frameworks with local SQL, blending the strengths of each approach.

Comparing the Different Architectures

Each approach has its pros and cons. Reactive frameworks provide a highly interactive user experience but require more complex client-side code. Hypermedia apps are simpler, with less client-side logic, but might lack the interactivity needed for certain applications. Local-first SQL offers resilience and speed but introduces complexity in syncing data across devices.

Interestingly, these paradigms are not mutually exclusive. Developers are increasingly combining them to build more flexible and robust applications. For example, a project might use React for interactivity, hypermedia principles for simple pages, and local SQL for offline capabilities.

Ultimately, choosing the right architecture depends on the app’s goals, data needs, and developer preferences. The mix of options reflects a broader shift towards more diverse and adaptable front-end solutions, moving beyond the one-size-fits-all model of the past.

Inspired by

• https://www.infoworld.com/article/4163910/the-front-end-architecture-trilemma-reactivity-vs-hypermedia-vs-local-first-apps.html

Sources

• react.dev
• angular.dev
• vuejs.org
• svelte.dev
• solidjs.com