What is htmx?
htmx is this tool I have been flirting with for creating dynamic web applications. It is a heretical tool of sorts. Cutting my teeth, writing Javascript every day with the latest framework is something I have been doing day to day for the last 10 years. This tool (htmx) is a pragmatic choice for developing modern web applications using a technique that would be common in a web app from 2004. Our industry runs in a cycle, and this tool is the return of a productive and useful trend in my opinion.
Old ways and New ways
Back in 2004, javascript was entering it's heyday and becoming a useful tool for building dynamic web applications. But we still had sites like craigslist, ebay and online banking. Fast forward, today we can do all of this and much more. Javascript is a much better language in 2021 than 2004. So what is the problem?
Modern web frameworks and architecture is optimized for big teams. It is a tool born out of the need to scale huge amounts of developers to all work on one interface. We do not need the overhead of the current frameworks. They bring more weight than they need.
We ship so much javascript to the client side, it just slows down the experience. Your browser is becoming a huge drain on your battery power, and the rest of us are being excluded from the web.
The modern web application stack can take a few different shapes and forms, so bear with me explaining the straw man. You start with a component framework like React. Sprinkle in something for state, let's say RXJS. Put on an npm i react-router to manage routing to pages. Drop in the data layer, your API is graphql so you put on an apollo client.
At this stage you've loaded 100's of kb's of javascript and you're not even rendering the page yet.
The architecture is optimized for teams with a backend and frontend separation, but that does not represent all the teams and produces and ways that we rwork.
Testing becomes a nightmare as you have more layers for units, and debugging means getting to the bottom of more connection and boiler plate code.
What is old but gold? plain old forms and a sprinkle of javascript to make it pop. You can still get the benefit of using ajax to make dynamic sites. htmx is the tool of choice for wiring it together, without needing to write a heavy javascript app.
You load htmx in the <head> and it brings about ~10kb of minified javascript to the page. From here, you can sprinkle the hx- directives in to your markup to instruct the framework on how the browser should make AJAX requests to the backend. Your backend responds with plain old html templates that will be substituted in to the page . A casual smile builds on your face as you realize you've delivered the boring part of your app without the hassle of wiring components, state and back-end API's together.
When you write your application with a tool like htmx, you get to spend more time focusing on the cool parts. Javascript is still the right choice for making components that extend the dom to do new and excellent things.
Writing javascript is the right choice if you are building maps, games, interactive visualizations or advanced editing experiences. You can mix htmx with code, and write nice isolated components for the purpose.
Controlling the experience
The future internet will run on a several generations old android, an overused battery with a healthy amount of vendor bloatware. This is a reality I have been living the last few months as my solid modern android phone was lost and replaced by an Acatel 1E. Sure it cost $40, but it comes with a web browser, and those of us with a $40 android should be able to use the web too. Most web application suck on a phone like this, loading more than two mb of javascript probably means you are going to have a less than ideal experience.
I'm convinced, how do I get started!
The original reason why I got in to this was because my good friend Matt asked me to give a talk at Christchurch Javascript meetup. I explained to a room of 20 people why they shouldn't write so much code, and it actually was really well recieved. It turns out that a lot of people who have been writing code for the front end share the same pain points, and are interested in a new (but actually old) way.
My example code is posted on github.
I love the process of explaining this stuff to people and I would love to share some infrequent writing with you too! If this interests you, please put your internet points towards this, and I will attempt to bring new and interesting stuff to your feed. I'm not internet famous, so feel free to reach out
Get started with the documentation at https://htmx.org/.
Top comments (0)