6d39919b99
* Add description to architectural-sympathy And fix some typos * Add description to codin-dirty * Add description to complexity-budget * Add description to does-hypermedia-scale * Add description to future and fix date * Add description to hateoas * Add description to how-did-rest-come-to-mean-... * Add description to htmx-sucks * Add description to hypermedia-apis-vs-data-apis * Add description to hypermedia-clients * Add description to hypermedia-driven-applications * Update hypermedia-friendly-scripting.md * Update hypermedia-on-whatever-youd-like.md * Update is-htmx-another-javascript-framework.md * Update locality-of-behaviour.md * Update lore.md * Update mvc.md * Update no-build-step.md * Update prefer-if-statements.md * Update rest-copypasta.md * Update right-click-view-source.md * Update spa-alternative.md * Update splitting-your-apis.md * Update template-fragments.md * Update rest-explained.md * Update two-approaches-to-decoupling.md * Update vendoring.md * Remove double-quote characters from descriptions * Add description block to demo.html * Update view-transitions.md * Update web-security-basics-with-htmx.md * Update webcomponents-work-great.md * Update when-to-use-hypermedia.md * Update why-gumroad-didnt-choose-htmx.md * Update why-tend-not-to-use-content-negotiation.md * Update you-cant.md * Fix description for htmx-sucks * Use `authors` built-in variable Instead of the custom `author` taxonomy * Descriptions and typos in interviews * That double word is actually correct
2.8 KiB
+++
title = "Another Real World React -> htmx Port"
description = """
In this article, Carson Gross summarizes a real-world case study of Adrian McPhee porting the OpenUnited platform
from React to htmx, documenting significant reductions in code complexity and development time while highlighting
how content-focused web applications can benefit from a hypermedia architectural approach."""
date = 2023-09-20
updated = 2023-09-20
authors = ["Carson Gross"]
[taxonomies]
tag = ["posts"]
+++
The Mother of All htmx Demos you can see the real world results of a port from a React-based front end to an htmx-powered front end. The results are very good, although we qualify the experience with the following:
These are eye-popping numbers, and they reflect the fact that the Contexte application is extremely amenable to hypermedia: it is a content-focused application that shows lots of text and images. We would not expect every web application to see these sorts of numbers.
However, we would expect many applications to see dramatic improvements by adopting the hypermedia/htmx approach, at least for part of their system.
As luck would have it, we have another application (again, based on Django on the server side) that has been ported from a React front end to an htmx front end: OpenUnited.
Here is a graphic from the original LinkedIn post by Adrian McPhee, showing the total Lines of Code in the code base before and after the port:
Before/After Source Code
A very nice aspect of this port is that, because OpenUnited is open source, in contrast with Contexte, the before and after code is available to examine:
Before: https://github.com/OpenUnited/old-codebase
After: https://github.com/OpenUnited/platform
Executive Summary
Here is a high-level summary of the port
- They reduced the code base size by 61% (31237 LOC to 12044 LOC)
- They reduced the total number of files by 72% (588 files to 163 files)
- They reduced the total number of file types by 38% (18 file types to 11 file types)
- Subjectively, development velocity felt at least 5X faster
- Rather than prototyping in Figma and then porting to HTML, UX development was done directly in HTML
Analysis
Once again we have some eye-popping results. This is because the OpenUnited application is extremely amenable to hypermedia: like Contexte, it is a content-focused application that shows lots of text and images.
This experience again demonstrates that, for at least a certain class of web applications, htmx and the hypermedia architecture can be an excellent choice.