HTMX - Hungary Webkonf 2026

class: center, middle, inverse

# HTMX for Simpler Web Development

<small>by Sakib Hadžiavdić</small>

---
# Who am I?

### Sakib Hadžiavdić

- Based in Sarajevo, Bosnia 🇧🇦
- Software Engineer @ Snowplow
- Doing OSS work: FlowRun, Sharaf, Deder...
- https://github.com/sake92

---
class: center, middle, inverse

# State of the WEB

---
background-image: url(content/MPA.png)

# WEB dev before 😎

- HTML built in PHP, JSP..  
  all server side
- CSS
<br>
<br>
- sprinkle of jQuery

```jsp
<div id="weather-temp">Temp goes here</div>
......
```

```js
$.ajax({
  url: "/api/getWeather",
  data: { zipcode: 97201 },
  success: function(result) {
    $("#weather-temp").html("<strong>" + result + "</strong> degrees");
  }
});
```

---
background-image: url(content/SPA.png)
# WEB dev now 😰

- React, Vue, Angular..
- bundlers, minifiers
- build tools, compilers
<br><br>
- server-rendering is back??  
  absolutely.  
  but not really

---
# What WEB/HTML *should* be? 🤔 💡

- why only `<a>` & `<form>` for triggering HTTP requests?
- why only `GET` & `POST` methods?
- why only `click` & `submit` events?
- why only replace the **entire screen**?

---
class: center, middle, inverse
# HTMX

*High power tools* for HTML

---
background-image: url(content/HTMX.png)
background-position: right
# HTMX: TLDR

- HTML-first, server-first library
- works with **any backend**
- progressive enhancement
- no build tools needed
- awesome community
- memes 🐴 #we-are-so-back

<br><br><br>
- very popular! https://risingstars.js.org/2024/en#section-framework

---
background-image: url(content/the_floor_js.jpg)
## HTMX: in a nutshell

---
background-image: url(content/htmx_protec.jpg)
## HTMX: in a nutshell

---
## HTMX basics

```scala
val routes = Routes {
  case GET -> Path() =>
    Response.withBody(IndexView)
  case POST -> Path("html-snippet") =>
    Response.withBody(
      html"""
        <div> <b>Look ma, no JS! 😎</b> </div>
      """
    )
}

def IndexView = html"""
    <!DOCTYPE html>
    <html>
    <head>
      <script src="/htmx.min.js"></script>
    </head>
    <body>
      <button hx-trigger="click" hx-post="/html-snippet" hx-swap="outerHTML">
        Click here!
      </button>
    </body>
    </html>
  """
```

---
# RESTful APIs: HATEOAS

- **Hypermedia** as the Engine of **Application State**
- HTML == Hypermedia
- state representation + controls/actions
- "widgets" all the way

<hr>
- browser is the *ultimate* (universal) thick client
- browser is one "SPA" to rule them all

---
## HTMX: demo time!

- demo1: Hello world
- demo2: Server Sent Events
- demo3: AWS dashboard

<hr>

http://localhost:8181/

---
## HTMX: even more power 🛠️
- lazy loading, infinite scroll
- active search, cascading selects
- polling, throttling, filtering trigger events
- dialogs, tabs, animations
- out of band swaps
- boosting
- integrates well with JS libraries

20+ ready examples:
https://github.com/sake92/sharaf/tree/main/examples/htmx

---
## HTMX: benefits ✅
- no API churn (backend for frontend)
- less security issues VS e.g. GraphQL
- less code to maintain (67% less [vs React](https://htmx.org/essays/a-real-world-react-to-htmx-port/))
- less dependencies (96% [vs React](https://htmx.org/essays/a-real-world-react-to-htmx-port/))
- reduced time-to-interactive
- less (no?) build time
- less memory usage
- more power to the BE, less state in FE

---
## HTMX: limitations 🙅
- many dynamic interdependencies (think Excel)
- offline mode
- lots of events
- e.g. google sheets, maps, games..

---
class: center, middle

# Conclusion

Try HTMX for a bit of fresh air!

Or [fixi.js](https://github.com/bigskysoftware/fixi) for a minimalistic version of it.

<br>

https://htmx.org

https://grugbrain.dev

https://github.com/sake92/sharaf

<br>

Thanks for listening!

---
# Extras

## Error handling

per HTTP code:  
https://htmx.org/extensions/response-targets/

form field errors, inline:  
https://dev.to/yawaramin/handling-form-errors-in-htmx-3ncg

or you can piggyback on responses to swap anything:  
https://htmx.org/attributes/hx-swap-oob/