HTMX en prod | Aleth Gueguen février 2025

layout: true
<div class="my-footer"><p>NantesJs Février 2025</p><p>alethgueguen.com</p></div>
---

class: middle center

# HTMX en production

## HTMX, qui connait ?

---
class: middle

<div class="dflex my-brand-wrapper flexcol">
  <div class="dflex">
    <img src="images/symbol_color_bgtransparent_screen.png">
    <span class="my-brand">Aleth Gueguen conseil IT</span>
  </div>
  <div class="dflex">
    <div class="mlm mrb">
      <h2>
        Consultante indépendante depuis 2006
      </h2>
      <p class="my-brand-subtitle">Je développe des logiciels sur mesure pour les PME</p>
    </div>
    <img src="images/portrait_665×665.jpg" style="width: 23%; border-radius: 50%; ">
  </div>
</div>
---
class: middle

## intercooler.js - jQuery = HTMX

Carson Gross   
@htmx_org   
https://grugbrain.dev  
Founder - HyperMedia Research Group, Montana State University  
Enseigne CS
📖 hypermedia.systems

<span>#MontanaBaguette</span>

---
class: middle center

# Principe HTMX

## HOWL = HTML Over Whatever you Like

### Donnez à manger du HTML au navigateur : c'est ce qu’il aime

---
class:  dflex, space-around

<div -1">
  <h2>navigateur = client universel</h2>
  <h3>peut afficher</h3>
  <h4>openstreetmap</h4>
</div>
<div class="flex-1">
  <img src="images/osm.jpg">    
</div>

---
class:  dflex, space-around

---
class:  dflex, space-around

<div class="" >
  <h2>navigateur = client universel</h2>
  <h3>Peut afficher</h3>
  <h4>une appli bancaire</h4>
</div>
<div class="flex-1">
  <img src="images/app_bancaire.jpg">    
</div>

---
class:  dflex, space-around

<div class="" >
  <h2>navigateur = client universel</h2>
  <h3>peut afficher</h3>
  <h4>Réseaux sociaux</h4>
</div>
<div class="flex-1">
  <img src="images/mastodon.jpg" height="620">    
</div>
---
class:  dflex, space-around

<div class="" >
  <h2>navigateur = client universel</h2>
  <h3>Peut afficher</h3>
  <h4>un roman de Victor Hugo</h4>
  300 pages :D
</div>
<div class="flex-1">
  <img src="images/victor_hugo.jpg">    
</div>
---

# HTMX
## Basé sur les custom attributes pour “augmenter” HTML
`hx-get|post|put|patch|delete`

```html
<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML">
    Click Me!
</button>
```

---
<style>
  .dflex.bottom{
    flex-direction: column;
    justify-content: flex-end;
  }
  .dflex.bottom>pre{
    margin-top: 50%;
  }
</style>
<img src="images/get_then_html.png" class="absolute" style="right: 18%; width: 32%; top: -0.5%;">
<img src="images/server.png" class="absolute" style="right: 9%; width: 11%; top: 11.5%;">
<img src="images/replace_html.png" class="absolute" style="bottom: 4%; width: 87%; right: -1%;">
.dflex.space-around[
.flex-1[
```html
<div hx-target="this" hx-swap="outerHTML">
    <div><label>First Name</label>: Joe</div>
    <div><label>Last Name</label>: Blow</div>
    <div><label>Email</label>: joe@blow.com</div>
    <a hx-get="/contact/1/edit" href="/contact/1/edit">
    Click To Edit
    </a>
</div>
```
]
.flex-1.dflex.bottom[
```html
<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn">Submit</button>
  <a class="btn" hx-get="/contact/1"
                href="/contact/1">Cancel</a>
</form>
```
]
]

---
class: center, bottom, color-white
background-image: url(../_images_bateau/combo-mini-phare-ilot.jpg)

# RTFM :D

---

# Défauts bien conçus

Requête déclenchée automatiquement 
- Form -> submit
- input, textarea & select -> change
- Le reste -> click

---
class: middle

# La sauce interne :
## Utilise XMLHttpRequest plutôt que fetch
 ➡️ appel synchrone  
 ➡️ affichage du progress lors de l'upload de fichiers

---
class: cover, color-white
background-image: url(../_images_bateau/cygne.jpg)

# Goodies

Indicators / spinners

Support SSE & WebSockets

---
<style>
  #cyclo{
    max-height: 69vh;
}
</style>

<div class="dflex">
<div>
<h1>En prod : cyclodiag.lafabriquedelalogistique.fr</h1>
<p>Projet public</p>

<p>Gros formulaire + de 40 questions / 5 étapes   </p>
<p>Réponses possible dans le désordre / sur plusieurs séances</p>
</div>
<div>
  <img src="images/cyclodiag.jpg" id=cyclo>
</div>
</div>

---

# Reflexion sur le markup

💡 element `<fieldset>` peut contenir plusieurs elements `<form>`

1 question ➡️ 1 `<form>`

amélioration progressive : doit marcher sans HTMX.

---

# Vérifier la présence de `HX-Request` dans les headers
## si présence, on ne renvoie que le HTML à remplacer
## sinon, la page

```php
if ($request->headers->has('HX-Request')) {

return new Response(
        $this->twig->load('my_template.html.twig')->renderBlock('my_block', [/.../]));
} else {
    return new Response(
        $this->urlGenerator->generate('my_page', [/.../])
    );
}

```

---
class: middle
<style>
  .end{align-items: flex-end;}
</style>
.dflex[
.no-op[
# Out of Band swap
## hx-swap-oob 
### remplacer directement un element identifié par son id

> some content in a response should be swapped into the DOM somewhere other than the target

à chaque question soumise, le serveur renvoie la question complétée et son statut   
➕ un élément qui renseigne le niveau de complétion mis à jour
]
.dflex.end[
![](images/OOB.png)]]

---
<style>
  #sort{
    max-height: 59vh;
}
</style>

<div class="dflex space-around">
  <div>
    <h1 id="autre-cas">Autre Cas</h1>
    <h2 id="re-ordonner-une-liste-la-vol-e">Re-ordonner une liste à la volée</h2>
    <h3 id="page-https-htmx-org-examples-sortable-">page <a href="https://htmx.org/examples/sortable/">https://htmx.org/examples/sortable/</a></h3>
    <blockquote>
      <blockquote>
        <p>copy pasta 🍝</p>
      </blockquote>
    </div>

---

# Ce que j'ai appris

Par défaut HTMX n'agit que pour des réponses serveur < 300

Soit on gère soi-même avec qq lignes de JS

```js
// https://github.com/bigskysoftware/htmx/discussions/1746#discussioncomment-6859968
document.body.addEventListener("htmx:responseError", function (event) {
  // Process the error
  // console.log(event.detail)
  if (event.detail.xhr.status >= 400) {
    document.getElementById('form-error').innerHTML = event.detail.xhr.response
  }
})
```

---

## Soit on configure avec `responseHandling`

pour swapper la réponse HTML générée par le serveur pour les cas d'erreur

https://htmx.org/docs/#response-handling

```js
htmx.config.responseHandling = [
  {code:"204", swap: false},   // 204 - No Content by default does nothing, but is not an error
  {code:"[23]..", swap: true}, // 200 & 300 responses are non-errors and are swapped
  {code:"[45]..", swap: false, error:true}, // 400 & 500 responses are not swapped and are errors
  {code:"...", swap: false}    // catch all for any other response code
]
```

---

# Paramètres dans une requête

Par défaut une Requête déclenchée par un élément inclura sa valeur.   
Si c'est un formulaire, toutes les valeurs des contrôles seront incluses   
On peut régler avev `hx-include=<sélecteur CSS>` pour ajouter d'autre valeurs

Et `hx-params` pour spécifier les paramètres qu'on veut filtrer  
https://htmx.org/docs/#parameters

---
<style>
  #demo2 {
    position: absolute;
    bottom: 29%;
    right: -2%;
    /* max-width: 216px; */
}
</style>

<div class="dflex">
  <div>
    <h1 id="ce-qui-est-top">Ce qui est top</h1>
    <h2 id="simplicit-">Simplicité</h2>
    <p>On comprend le concept en 1h<br>Excellente page d'exemples avec des vrais exemples de la vraie vie<br><a href="https://htmx.org/examples/">https://htmx.org/examples/</a> (+ screenshot)
    Doc très claire</p>
    <p>fixi.js encore plus minimaliste si pas besoin de tout les fonctionalités de HTMX</p>    
  </div>

---
class: middle

# Ce qui serait bien
## Des bons exemples pour gérer correctement l'accessibilité (attributs ARIA)

---
class: middle

# Conclusion

## Courbe d’apprentissage tranquille

- Léger (48KB)
- Ça fait ce qui est marqué sur la boite
- La doc top
- Couvre probablement 80% des besoins sur les cas d’usage appli métier.

???
(pour le reste je ne m'avance pas, je n'ai pas d'expé pro)

---
class: middle

#Trucs exotiques tentés avec HTMX

App en mode hors ligne avec les requêtes HTMX servies par SW

C'est astucieux, mais pas convaincue que ça soit pertinent

---
class: center, bottom, cover
background-image: url(../_images_bateau/rubber-duck.jpg)
.glazed.mbs[
# [Lisez hypermedia.systems](https://hypermedia.systems/)
]

---
class: middle, center

### Slides ici : https://alethgueguen.com/talks/

### Demander un accompagnement sur Hypermedia/HTMX

![](images/smile.png)
---

class: middle, bkg-cover
background-image: url(../_images_bateau/scilly-2023.jpg)
<style type="text/css">
      .contact-p{line-height: 1.5; font-size: 65%;margin-left: 2rem; color: #554552;}
  
  .glazed{
    padding: .5em;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    border-radius: 0.1em;
  }
 .glazed.form.mauto {width: 67%; margin-top: -3rem; text-align: center; }
 .glazed.w25.mauto{width: 32%;margin-top: 10em;}
</style>

.glazed.w25.mauto[
.contact-p[Contact]
.contact-p[Aleth Gueguen  
conseil@alethgueguen.com  
+33 (0)675 90 86 06    
]
]