In this tutorial, we will look at how htmx makes dynamic web page updates possible, using a very simple Sinatra app for our backend.

htmx is a JavaScript library created by Carson Gross (Senior Software Engineer; Professor at the Montana State University CS Department). htmx is a successor to intercooler.js (in development since 2013), which grew organically out of a single JavaScript function.

htmx aims to revive the concept of HTML as true hypermedia — namely that:

hypertext = (representation of) information + action controls.

For the example application in this tutorial, I had two conditions:

• domain complexity must be minimal so that we can focus on htmx;
• it must illustrate a common scenario in web development.

To that end, we'll be covering this basic use case:

letting the user submit a contact form without redirecting them to a new page, and including a personal thank-you message in the response.

A quick demo: here's our inputs page — and here's our output page.

Along the way, we'll touch on the fundamentals of "web as platform":

• HTTP which defines the protocol for client-server communication (HTTP verbs, addressable resources) on application level
• REST which describes how information resources (served over HTTP) should be defined, organized, accessed, and manipulated
• hypermedia: how these information resources should be represented to be operable by the user (potentially the least understood aspect).

I very much enjoy dealing with these core concepts, and I think there's a huge value for web developers in re-visiting these basics over and over again.

Why Sinatra for the back-end?

Sinatra is:

• Minimalist: maps a Ruby DSL to HTTP verbs, and leaves the REST (haha) to you.
• Declarative: logic in a Sinatra app is triggered by the route (which is a pairing of an HTTP method with an URL-matching pattern). First you declare the route using the Sinatra DSL, then inside the route's block you specify the logic you want triggered. The value returned from the block is the HTTP response body that gets sent to the client.
• Simple: adds just a single layer of abstraction above Rack, which is the Ruby interface for client-server communication.

For these reasons, doing web development in Sinatra feels like you're dealing directly with HTTP. It's a bare-bones, direct workflow with a minimum of intermediation.

And, since htmx involves HTTP, REST, and hypermedia at a core level, Sinatra makes for a great playground for exploring this stack.