Hypermedia-Driven Applications with Flask and HTMX

Abstract

In recent years, the predominant architectural pattern for web apps has consisted of a client-side single-page application (SPA) that communicates with backend services by sending and receiving JSON data over HTTP requests. Commonly known as REST, this architecture provides benefits such as flexibility, scalability, and ease of maintenance. However, this architecture also has some drawbacks. It can introduce unnecessary complexity by adding intermediary layers of abstraction between the server-side “source of truth” for application state and user-facing components. It can also make client-server APIs less resilient to change by requiring out-of-band information to properly consume JSON data. These issues can be avoided by following a core design principle of REST application architecture, hypertext as the engine of application state (HATEOAS). Based on this principle, the JavaScript library htmx extends HTML with features necessary to build interactive web applications, allowing the server to represent state updates as hypertext, rather than as JSON. In this workshop, we’ll build a full-stack web application demonstrating HATEOAS using htmx and Flask, a popular HTTP framework for Python. We’ll also discuss what is meant by hypertext and its relationship with REST architecture, the tradeoffs that we make when we choose between htmx and something like React, and what we can learn even if we don’t adopt htmx in production.

Workshop Requirements

Participants should have some high-level familiarity with software/web development concepts, such as application state, REST architecture, and HTTP methods, as well as some practical experience with Python and HTML. Bring a computer with a working Python development environment if you wish to run the workshop code, but it won’t strictly be necessary.

Bio

Shuwen Qian is a current OMSCS student specializing in Computing Systems and a Senior Software Engineer at Squarespace. He lives in New York City.