Syntax - Tasty Web Development Treats

726: Is HTMX a Joke?

Feb 5, 2024

32:15

Snipd AI

The hosts discuss HTMX and its differences from React, as well as the humor in HTMX's documentation. They also talk about server rendering, templating, and using HTMX to remove someone from a team. The chapter on HTMX's functionality explores server communication and DOM manipulation, including the use of fetch function and client-side routing. Finally, they discuss server sent events, client-side JavaScript, and meta frameworks that utilize HTMX for interactivity.

AI Summary

AI Chapters

Episode notes

Podcast summary created with Snipd AI

Quick takeaways

HTMX is a small library for swapping out parts of the UI with server-generated HTML, providing a streamlined development experience with less reliance on client-side JavaScript.

HTMX offers features like client-side routing, progressive enhancement of forms, Ajax-like dynamic updates, and compatibility with web components, web sockets, and server-side events, making it a compelling choice for web development.

Deep dives

Overview of HTMX

HTMX is a small library for swapping out parts of your UI with a response from a server. It is often compared to React, but it has a more specific focus. HTMX requires a server that can send HTML to the client, and it knows how to swap out specific parts of your app based on the response. It does not care about the backend technology or the templating engine you use. It has a simple and straightforward approach to handling UI updates and does not require as much client-side JavaScript as other frameworks.

Introduction

5min

Discussion on HTMX, server rendering, templating, and client-side JS

2min

Using HTMX to Remove Someone from a Team and the Advantages of DOM Manipulation in Svelte

2min

HTMX: Server Communication and DOM Manipulation

20min

Exploring Server Sent Events, Client-Side JavaScript, and Meta Frameworks

3min

Scott and Wes unravel the mysteries of HTMX, exploring the essentials for getting started, its powerful capabilities, limitations, and possible stacks for building primarily server rendered applications.

Show Notes

00:00 Welcome
02:07 Brought to you by Sentry.io
02:53 What exactly is HTMX?
04:30 What you need to know before working in HTMX.
- 04:35 You need a server.
- 05:35 You’ll most likely need a templating engine.
- 06:42 You most likely do not need as much client-side JS.
- 08:33 You don’t work in JSON
- 11:15 Not something you can swap out your UI with in a SPA.
- 11:48 Brings back AJAX
13:32 So, what can it do?
15:20 And what it doesn’t do.
- 18:25 It doesn’t do server-side responses.
19:09 What about animations?
19:20 What about CSS?
19:57 What about Web Components?
20:06 What about third-party client-side JS?
20:18 What about WebSockets and SSE?
HTMX WebSockets
20:30 What about extensions?
HTMX Extensions
21:00 Wes’ “bomb” question.
24:16 What Scott likes about HTMX.
25:45 What Scott doesn’t like about HTMX.
HTMX Multi-Swap
30:33 Hype, Meta Framework.
Hype