HTML over-the-wire is a promising future of Web Development

In this post, we are going to take a look at some of the frameworks and libraries which emphasise sending HTML Over the wire instead of JSON, which is the traditional data-interchange format between the client and the server for Single Page Applications(SPA). It also challenges the SPA approach, by looking at a more simplistic way of creating real-time, modern and rich user experiences for the web without shipping huge amounts of JavaScript to the browser.

How it all started?

In his 2019 ElixirConf keynote, Chris McCord, creator of the Phoenix framework for Elixir introduced LiveView, an alternative to the SPA. His presentation captured the same promise and excitement that Rails had in the early days.

Hotwire - StimulusReflex

Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML over the wire, instead of JSON.

The heart of Hotwire is Turbo, which is a set of complementary techniques for speeding up page changes and form submissions, dividing complex pages into components, and stream partial page updates over WebSocket. All without writing any JavaScript at all.

While Turbo usually takes care of at least 80% of the interactivity, there are still cases where we need custom JavaScript. Stimulus makes this easy with a HTML-centric approach to state and wiring.

Here is Nate Hopkins showing how to build a Twitter clone in 10 minutes with Rails, CableReady, and StimulusReflex.

Django Sockpuppet

Sockpuppet is a new way to craft modern, reactive web interfaces with Django. It extends the capabilities of both Django and Stimulus by intercepting user interactions and passing them to Django over real-time web sockets. These interactions are processed by Reflex actions that change application state. The current page is quickly re-rendered and the changes are sent to the client. The page is then updated using a fast and lightweight DOM diffing/patching library called morphdom to reflect the new application state. This entire round-trip allows us to update the UI in 20-30ms without flicker or expensive page loads.

Phoenix LiveView

Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML. LiveView uses a declarative model to render HTML on the server over WebSockets with optional LongPolling fallback. It has got smart templating and change tracking - after connected, LiveView sends only what changed to the client, skipping the template markup and reducing the payload.

It also got live form validation with file upload support by having a rich integration API with the client with phx-click, phx-focus, phx-blur, phx-submit, etc. phx-hook is included for the cases where you have to write JavaScript.

We can reuse code via components, which break templates, state, and event handling into reusable bits, which is essential in large applications. It supports live navigation to enrich links and redirects to only load the minimum amount of content as users navigate between pages. It comes with a latency simulator so you can emulate how slow clients will interact with your application. It has got a bunch of testing tools that allow you to write a confident test suite without the complexity of running a whole browser alongside your tests.

Here is Chris McCord showing how to build a Real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5.

Laravel Livewire

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

Livewire renders the initial output with the page (like a Blade include). This way, it's SEO friendly. When an interaction occurs, an AJAX request is made to the server with the updated data. The server re-renders the component and responds with the new HTML. Livewire then intelligently mutates DOM according to the things that changed.

Here is a video which gives you a quick introduction to Laravel Livewire.

Unpoly

Unpoly is the unobtrusive JavaScript framework for server-side web applications. It enables fast and flexible front-ends while keeping rendering logic on the server. It has no dependencies and plays nice with existing code.

Here is a TodoList demo built using Quarkus with Qute and Unpoly.

htmx

htmx is the successor to intercooler.js. It swaps parts of the page, not the whole page like Turbolinks. htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

It is small (~10k min.gz'd), dependency-free, extendable & IE11 compatible. htmx is straight forward, well-documented and has a healthy community.

Here is a Twitter Clone I built with htmx

Reactor

Reactor is a LiveView library for Django. It enables you to do something similar to Phoenix LiveView using Django Channels.

The Comparison

I have also built a comparison website which compares all the above mentioned frameworks based on the capabilities and features supported by each and every framework. This will help you to choose the right framework based on your backend platform and language requirements.

So which is your favourite framework/library to build a modern, real-time, simple and performant web application without too much JavaScript? Do you agree with me that SPAs are overrated or do you justify the amount of JavaScript we need in the browser? Please let me know your feedback / queries in the comments section.

Blog