Examining Htmx : A Tool Assisting in Building Interactive Multipage Full Stack Web Applications

Abstract

This thesis explores the option of building web applications using Htmx as an alternative to the commonly used Single-Page Application (SPA). Htmx is a JavaScript library that extends HTML with declarative attributes, enabling asynchronous HTTP requests and content updates without full-page reloads. This thesis evaluates Htmx and compares it to React through a con-trolled experiment involving two prototype applications, one built with ASP.NET Razor Pages and Htmx, and the other with ASP.NET Minimal APIs and React. Performance metrics such as Largest Contentful Paint (LCP), memory usage, and number of lines of code are collected and compared, while other features such as complexity, flexibility, and developer tools are discussed. The results of the thesis indicate that an Htmx application can achieve similar functionality to a React application, with a small performance advantage on low-powered de-vices, maintaining a smaller code base and simpler architecture. Specifically, Htmx performed 15% better in LCP under CPU and Network throttling and 36% better when caching was disa-bled in the same test. However, React still offers advantages such as more flexibility and bet-ter static type checking. The thesis does not provide a definitive answer on choosing between SPA and Htmx, as the results of such an experiment may be different based on the context of the application. Additionally, this thesis provides implementation strategies for Htmx with Ra-zor pages, such as componentization, out-of-bound swap, and form nesting limitation.