HTML over the wire

Written by Michael Anckaert - Published on - Posted in Software Development

In this article, I would like to talk about the concept of HTML over the wire. In recent years it has gained traction and several vocal advocates and frameworks have risen. In a way, you could say it's a counter-movement against the overload of modern Javascript usage and the popular Single Page Applications that are being developed.

The case against modern SPAs

To understand more about the need or desire to use HTML over the wire, it makes sense to explore the case against modern SPAs. This is not intended to be a black/white criticism against SPAs. I believe there is an actual use case for and benefit to using an SPA design and framework. Currently, my largest project is fronted by a large VueJS powered frontend. But as we all know, not all problems require the same tool to solve, so a more nuanced view is always welcome.

Modern Frontend frameworks now focus on calling APIs to retrieve data. That data, usually in JSON format, is then used to update the frontend UI. That UI is built by having Javascript code compose the DOM elements. These elements are generally composed into HTML components that are then filled with data taken from a REST API.

This paradigm allows a web page to behave as a traditional application and offer more interactivity and a more natural feel when using it. Full page refreshes are no longer required which decreases the interruptions the user experiences when using the application. This is what most modern Web Applications are currently using.

Popular Frontend frameworks are React, VueJS and Angular.

The Backend - Frontend dance and why your API is just a translation between frontend and backend

In this section I would like to describe the Backend - Frontend dance, a ritual performed in many development teams.

The user story that the product owner has written goes like this

As a user, I want to view the list of orders I currently have open. I click my order history and can see a list of orders which include the order date, status and name of the product I have ordered.

A nice and clear user story right? The frontend developer goes to work and examines the APIs he can call on the backend. Fortunately, the clean API design already exposes two useful API endpoints: the order list API and the product detail API:

/api/orders?user=1

[
 {
   id: 1,
   date: "2021-10-1",
   status: 9,
   products: [7, 12, 3]
 }
] 


/api/products/7

{
 id: 7,
 name: "Geeky t-shirt"
}

To build his frontend view, the developer has to first make an API call to the order list API. Then, for each order, he has to make an additional API call to retrieve all product details. Notice that we're also missing a human readable representation of the order status. So that includes another API call for each order.

Sure, you have a nice and clean API design but the work for the frontend developer is getting pretty complex and has a lot of API calls just to display a table of orders.

So we do the thing everyone does, we change our API to return the data needed by the frontend, for that particular view. Now your API is tied to your frontend view and serves a single purpose: to build a view on the frontend.

The Backend - Frontend dance goes like this: The frontend developer needs an API to build his view, the backend developer writes the API based on the information needed. If only there was a way to skip this dance and do the work in one step...

What is HTML over the wire?

It's a technique where the frontend retrieves new HTML fragments from a backend service and injects them into the DOM. Imagine you want to refresh part of your application, let's say a list of todos. The frontend calls a URL on the backend that returns an HTML fragment, containing the full HTML DOM for that part of the UI. The frontend then replaces the contents of the existing DOM element with the newly retrieved HTML fragment.

The benefit of this technique is that when generating the initial page, the code that generates the initial page can be re-used to generate the updated fragments.

Benefits of HTML over the wire

I think the true benefit of using this technique can easily be described as simplicity. This in turns leads to stability, security and productivity. Let's take a look at some benefits I found while using and researching HTML over the wire.

The same framework can be used on both the backend and the frontend. It makes onboarding new developers much faster and removes the distinction between frontend and backend developers. A distinction which can decrease speed of development and add an overhead to teams that shouldn't be there. See the Backend - Frontend dance above.

This is in my opinion a tremendous benefit as it allows for true Full Stack Developers, a title which in my opinion shouldn't exist anyway. The term Full Stack Developer is a fallacy in modern software development (mainly because of SPAs). Because let's be honest, when using a modern SPA framework who can really call himself/herself a full stack developer? I think it's hard to believe that there are plenty of full stack developers out there who have both mastered Angular on the frontend and Django/DRF on the backend. Start using HTML over the wire and call yourself a developer, plain and simple.

Code reuse: Rendering a part of your application on the backend and reusing the same code when parts of the page need to be updated has tremendous benefits. You avoid implemented similar logic on both the frontend and the backend, thus duplicated logic and bugs.

Validation: This is something that needs to happen on both the client and the server. By using HOTW, only the server side validation needs to be implemented. It is true that each validation then results in a request to the backend. Using client side validation for simple validations will be faster then making a request to the backend.

Why prefer this over traditional SPA's?

Quote: I feel that it empowers me as a Backend developer and makes me productive on both the BE and the FE. For one it adds a simple set of primitives I need to learn on top of HTML (a basic tech to know), so no large JS frameworks or patterns to learn.

Secondly, it's fast with regards to development speed, application speed and just getting up to speed in general. A basic MVC framework (such as Django but others also) is all you need in addition to the primitives I talked about above. With modern frameworks such as Vue or React, I need a backend with basically the Model and Controller part and then a different framework for the View part.

Resources

This is a list of resources I have consulted to write this article.

Note that these links leave this website and I have no control over your security or privacy

Articles

Frameworks and tools