Final week, Peter Amiri – maintainer of the CFWheels framework for ColdFusion – despatched me a hardcover copy of Hypermedia Techniques by Carson Gross, Adam Stepinski, and Deniz Akşimşek. This e-book argues for the advantages of “Hypermedia Pushed Purposes” (HDA); and the way leaning into the foundational nature of the net as a unified interface and hypermedia platform makes functions simpler to construct and extra accessible whereas nonetheless reaching a high-bar of interactivity. This e-book is evident, concise, and fairly compelling. Coming in at round 300 pages, I completed studying it in two day—I simply could not put it down.
Carson Gross, the first creator, can also be the creator of a JavaScript framework known as htmx. htmx—or, “hypertext markup extensions”—gives an attributes-based strategy for including wealthy interactivity to your internet software. Abstractly, htmx seeks to meet 4 lacking alternatives within the present implementation of HTML:
-
Alternative 1: Enable any ingredient to concern an HTTP request.
-
Alternative 2: Enable any occasion to set off an HTTP request.
-
Alternative 3: Add the lacking HTTP verbs (
PUT,PATCH,DELETE). -
Alternative 4: Enable HTTP responses to be transcluded into the present DOM.
For instance, you’ll be able to configure a <button> ingredient to dynamically substitute sections of your webpage with freshly-fetched (AJAX) content material utilizing nothing however declarative hx-get and hx-target attributes.
Apart: if this method sounds acquainted to my readers it is as a result of comparable ideas are utilized by Hotwire Turbo; which, on the time of this writing, is what powers my ColdFusion weblog.
The Hypermedia Techniques e-book is about htmx; however, it is not solely about htmx. In reality, your entire first part of the e-book covers the historical past of the net, the idea of hypermedia as a unified interface, the true and unique which means of REST (REpresentational State Switch), and makes the argument that HTML and HATEAOS (Hypermedia because the Engine of Software State) has many benefits over the extraordinarily tight coupling required by at this time’s Single-Web page Software (SPA) frameworks.
This primary part of the e-book could be very compelling! After I began utilizing Hotwire Turbo (an alternative choice to htmx), I used to be drawn to David Heinemeier Hansson’s (DHH) imaginative and prescient of freedom; and the flexibility to construct functions utilizing the languages that you just love. This identical philosophy could be very a lot true with htmx. However, the e-book comes at it from a unique angle. Extra than simply utilizing the server-side languages that you just love, the e-book argues that constructing functions utilizing HTML because the driving drive can result in extra resilient, extra versatile, extra forgiving, extra accessible, and in the end lighter-weight options.
As I learn this primary part of the e-book, I discovered myself nodding in violent settlement! The argument for this strategy (HDA) is laid-out very clearly. And when the authors drive us to consider how a lot we take hypermedia without any consideration, and luxuriate in the truth that it “simply works”, it feels virtually laughable that our business has dedicated so totally to JSON-based APIs.
Apart: to be clear, the authors of the e-book don’t have anything in opposition to JSON APIs for non-hypermedia-based shoppers (equivalent to one server speaking to a different server). However, they posit that for almost all of browser-based functions, JSON-based APIs are unnecessarily complicated and fragile.
Within the second part of the e-book, the authors construct a easy Multi-Web page Software (MPA) that gives CRUD (Create, Learn, Replace, Delete) operations on an inventory of contacts. Then, they iterate on this MPA instance, layering in htmx performance to create richer and extra dynamic interactions.
This second a part of the e-book could be very properly crafted. The authors explicitly omit a variety of the code that might distract from the mission (for instance, they omit all the “mannequin layer” implementation particulars). And, the code that they do embrace is laid-out with line-by-line explanations of what’s taking place.
The iterative nature of the second part actually highlights the truth that leaning into HTML and hypermedia makes it comparatively easy to evolve an software over time; particularly because the browser itself would not need to know something in regards to the software area mannequin. In reality, many of the upgrades that they make to the contacts app are “progressive enhancements”. That’s, the appliance would proceed to work appropriately even when the JavaScript did not load.
Apart: not all the enhancements are “progressive”; and, the authors discuss this within the e-book. Whereas they do attempt to use progressive enhancement methods the place ever they will, the authors settle for the truth that some modes of interactivity merely want JavaScript to work; and, they’re OK with that when utilized in measure.
Full disclosure, I skimmed the final part of the e-book which covers a hypermedia-based strategy to constructing cellular functions. It sounds cool; however, I can solely maintain a lot in my head. I am completely satisfied to know that “Hyperview” exists; and, if and once I construct a cellular software, I will come again and skim that part of the e-book in additional element.
Even in the event you do not use htmx, I extremely advocate this e-book. If nothing else, it is a palette cleanser for these of us which were eating on thick-client functions for the final 15 years. Studying it forces us to step again and query why we’re utilizing the applied sciences that we use; and, whether or not or not we will deliver extra nuance and perception to our choices.
If nothing else, I am sort of itching to throw hx-boost on a side-project and simply see what occurs!
SOAP BOX: I Could not Care Much less About PUT, PATCH and DELETE
One of many arguments that the authors of the e-book make—and that many different folks make—is that we’re restricted by HTML’s constraint of GET and POST actions. I’ve personally by no means felt restricted by this in any respect. And, I strongly imagine that arguing over PUT vs PATCH vs no matter is nothing however pedantry. And, frankly, is a leaky abstraction wherein the buyer of an API mistakenly believes that they’ve any concept what is definitely occurring underneath the hood.
The irony of the argument that we’d like PUT, PATCH, and DELETE is that the e-book additionally talks about “assets” as any uniquely addressable URL. Which implies, if we will create distinctive URLs that characterize “put”, “patch”, and “delete” intentions, then there isn’t any precise must have PUT, PATCH, and DELETE actions. And albeit, having the identical URL react in another way to totally different actions makes the server-side code extra complicated.
It is also non-sense from a semantic perspective. As a thought experiment, think about that you just concern a DELETE request to a “contact” useful resource. If the server would not truly delete the given information however, as an alternative, strikes the information into a unique tables (ex, contact to contact_archive), your DELETE operation was truly extra like a POST.
Or, much more merely, what in case your DELETE request did nothing however flip an isDeleted column or set a deleteAt time-stamp. In that case, your DELETE was actually extra like a PATCH operation. In fact, you did not know that is what was going to occur.
And, that is my level! Cease pretending like you will have any concept what the server goes to do along with your request. All it’s essential know is that GET operations have the intention of studying state and POST operations have the intention of adjusting state. Something past that’s out of your management.
And now I will get off my soap-box.
https://bennadel.com/4769
