htmx.md

Hypermedia-Driven Applications with HTMX

If anyone is interested in this talk, please contact me (see below for contact information). I am currently preparing a one-day workshop.

next public talk(s):

• tbd

past public talks

• 2024-05-21 - Zürich - Switerland (English), no recording
• 2024-05-14 - Basel - Switzerland (English), no recording
• 2024-04-30 - Bern - Switzerland (Deutsch), no recording
• 2024-04-24 - Lucerne - Switzerland (Deutsch), no recording

Talk Resources

• Slides - Deutsch,German
• Sides - English
• example project - based on the book (see below)
  • subproject with spring boot, thymeleaf, kotlin
  • subproject with ktor, kotlin, typesafe html dsl

HTMX resources

• htmx.org
• book about Hypermedia Systems
• Video with Carson Gross - creator of HTMX and @ThePrimeagen
• Video with good explaination about state management and what to choose when
• Video with more details about HTMX (big thx Lars for showing me the video)
• Video - From React to htmx on a real-world SaaS product: we did it, and it's awesome!

HTMX + JVM (Java, Kotlin, ...) related stuff

• Spring Boot and Thymeleaf library for htmx
• Typesafe HTML DSL

Comparisons with other frameworks

JVM

• Efficient Full-Stack Development with Java | Simon Martinelli (big thx to Simon for making it! und Peti for showing me the video)

Oliver Nautsch

• LinkedIn
• X (aka Twitter)

notes for myself

most noticeable things / todo

1. When I use the kotlinx html dsl and use the domain model directly, I get hints in the HTML (as the DSL) from the compiler. At this point everyone becomes very attentive. For example, at compile time I get an error if I remove an attribute in the domain model but still use it in the UI code. So no runtime error, which is very good. I should do all the examples with the typesafe html dsl.
2. We need a component library for the kotlins html dsl. I have no idea at the moment what makes sense, but the listeners keep asking.
   • Ossi:: the problem here is, that this is always language depenced. Designer might not want that, or can not do it.
3. The string literals when setting the attribute values of HTMX in the DSL feel unnatural. An extension of the DSL would also make sense here.
4. Make an example with inline editing
5. Look at fritz2 - web components?
6. ✅ Somehow I have to get the type save routing (see: https://ktor.io/docs/server-resources.html#resource_url) from Ktor into the DSL when I configure the HTTP methods with HTMX.
   • see Building links from ressources

a(classes = "text-red-600 hover:text-indigo-900") {
    id = "contact_${contact.id}"
    href = "#"
    attributes["hx-delete"] = application.href<Contacts.Id>(Contacts.Id(id = contact.id))

...


@Resource("contacts")
class Contacts {
    @Resource("{id}")
    class Id(val parent: Contacts = Contacts(), val id: UuidAsString)
}

feedback

• Guter Mix von Einführung/Basics, Thema und dann der Aspekt Frontend Team. (translated: Good mix of introduction/basics, topic and then the frontend team aspect.)
• Einleitung/Einstieg war etwas schwierig, wenn man sich vorher noch nicht HTMX angeschaut hat. (translated: Introduction/entry was a bit difficult if you haven't watched HTMX before.)
• Wichtiges Thema. Wes? Frontends ist mehr als Angular, Vue, React,... (Frontend Architektur) (tranlasted: Important topic. What? Frontends is more than Angular, Vue, React,... (Frontend architecture))
• Sehr spannende Erkenntnis bzgl. Code Completion und Überprüfung zur Build-Zeit im Beispiel mit Kotlin. (translated: Very exciting insight regarding code completion and check at build time in the example with Kotlin.)
• Super workshop heute!