In this late-night live coding session, the presenter embarks on an exploratory journey into HTMX, a library that allows HTML to directly make AJAX requests, driving UI updates primarily from the server. He begins by integrating HTMX via a CDN into a basic Rust Actix web application, aiming to implement simple features like a "click to edit" element and a to-do list. The session highlights the practical challenges of setting up a Rust backend for HTMX, including managing shared mutable state (demonstrated with an AtomicUsize counter) and configuring development tools like cargo watch. The presenter delves into the philosophical underpinnings of HTMX, likening it to building "dumb clients" where the server dictates nearly all UI behavior, and discusses its potential implications for future web development. Throughout, the stream is interspersed with humorous audience interactions, memes, and an unscripted, raw exploration of the technology.
Summarizing the HTMX and Rust Exploration:
0:00 Initiating HTMX & Rust Project: The presenter begins a late-night session to build a "click-to-edit" feature using HTMX, noting the need for a server-side component.
0:15 HTMX CDN Integration: He quickly integrates HTMX into an index.html file using a CDN link for client-side functionality.
1:10 Initial HTML Structure: A basic HTML paragraph is set up to display "hello milkies statistically average I love you," which will later be targeted by HTMX.
2:26 Debugging Setup & Humor: The presenter grapples with editor highlighting issues and stream glitches, injecting humor with references to "Karen" and various inside jokes.
3:35 Understanding HTMX in a Nutshell: He reviews HTMX documentation, focusing on core concepts like hx-trigger, hx-get, hx-post, hx-target, and hx-swap for server-driven UI updates.
3:49 First HTMX Attempt & Error: He implements a simple HTMX click action that attempts to fetch from a /clicked endpoint, resulting in a 404 error, which he embraces as progress.
4:48 Course Tease & Motivation: The presenter reveals a private message, hinting at upcoming "Front End Masters" courses, including one on HTMX, which motivates his current exploration.
8:56 HTMX in a Real Backend (Attempt 1 - Actix/Axum): He plans to create a new Rust route for the /clicked endpoint. He initially uses Actix, considers switching to Axum (Rust web framework), but eventually reverts to Actix due to setup complexities.
12:50 Backend State Management Challenges: The core difficulty arises in managing shared, mutable state for a counter. He explores Arc, Mutex, and ultimately settles on AtomicUsize to safely increment the counter across requests.
24:40 Implementing the Counter: A functional counter is implemented, where each click on an HTMX-enabled button sends a POST request to the server, which increments the AtomicUsize and returns the new count as HTML to update the client.
30:08 HTMX Philosophy - Dumb Client, Server-Driven UI: The presenter explains his mental model of HTMX: creating "extremely stupid clients" where the server performs almost all logic and sends back HTML snippets for the client to display, akin to real-time game systems.
31:22 HTMX Differentiated: He clarifies that HTMX is not a programming language, a template engine, or a replacement for React/Next.js, but rather a set of HTML attributes that facilitate server-side rendering and interaction without much client-side JavaScript.
33:28 Bold Claims on Future of Web Apps: He speculates that by 2030, clients will largely disappear, with server-driven applications becoming the norm, acknowledging it's a "bold claim."
38:58 Starting a To-Do List Application: He transitions to building a more complex example: a to-do list, starting with an input box wrapped in an HTMX-enabled form.
41:15cargo watch for Auto-Refresh: Frustrated with manual server restarts, he installs and configures cargo watch to automatically recompile and run his Rust server on file changes.
44:10 Humor and Memes: Continues with lighthearted jokes, references to "ADHTMXD," and teasing other programming communities.
48:38 Component Structure with Leptos: He plans to organize the to-do list into modular components, mentioning Leptos (a Rust framework similar to Solid.js) for server-side UI rendering.
50:00 Personal Anecdotes and Linux/Arch: Shares a humorous anecdote about his "Arch user" lifestyle affecting his marriage and discusses the "proper way to learn" programming.
54:55 Data Structure for To-Dos: He defines a ToDo struct with usize (ID), String (description), and bool (completed status).
1:05:30 HTMX vs. Next.js Analogy: Provides a memorable analogy comparing HTMX (a bike) to Next.js (a volcano) to illustrate their fundamental differences.
1:06:50 Shadowing in Rust & View Rendering: Explains the concept of variable shadowing in Rust and attempts to render a list of ToDo items using Leptos's view macro and an iterative for construct.
1:09:45 Leptos For Loop for Dynamic Rendering: Discovers and plans to use Leptos's For component for declarative list rendering, akin to Solid.js.