P4Pillon/Krys4lide
4
2
Fork 0
Code Issues 27 Pull Requests 3 Actions Packages Projects 1 Releases Activity

Implémentation "HATEOAS" de l'interface pour HTMX et update des URLs qui fonctionne ! #57

Merged
florian_briand merged 12 commits from feat/54_update_url_on_navbar_navigation into main 2024-08-30 18:25:53 +02:00
Conversation 1 Commits 12 Files Changed 42 +560 -790
florian_briand commented 2024-08-23 20:16:33 +02:00
Owner
Copy Link

Détails

Implémente une approche plus respectueuse de "HATEOAS" comme nécessité par HTMX.

Dans cette approche, les routes des pages, comme /index ou /cps, ont, par défaut, un rendu "complet", comme cela serait si l'on n'utilisait pas HTMX.
Certains helpers sont utilisés pour éviter la duplication de code (entre particulier une "macro" Jinja pour la navbar).

Un "Extractor" issu de axum-htmx permet d'identifier quand une requête sur ces pages est issue d'un appel htmx, et permet de générer un rendu "simplifié", ne contenant (quasiment) que les éléments HTML ayant leur contenu qui change.
Par exemple, la page /cps, dans le cadre d'une requête htmx (hx-request=true), ne retourne que : une nouvelle balise <title>, la navbar (pour changer le design de l'élément "courant") et le contenu de la page. Tout le contenu de <head> ou les div qui encapsulent l'ensemble de la page ne sont pas re-envoyé.

Cela permet de mettre à jour les URLs dans la barre du navigateur, sans provoquer les problèmes de rechargement de page identifié dans le ticket #54.

Au passage, cette PR organise les templates d'une manière qui me parait un peu plus "claire" qu'avant :

  • Les "pages", correspondant à des routes réelles, sont définies dans app/src/pages
  • Les "composants", comme la navbar, qui ont vocation à être "inséré" (plutôt par des includes ou des appels de fonctions), sont définis dans app/src/components

L'avantage de leur présence dans le dossier src est qu'on peut sans problème mettre à côté les fichiers .rs qui leur correspondent.

Pourquoi ?

La PR #53 et le ticket #54 avaient éclairé un problème lorsqu'on souhaitait pouvoir refléter la navigation dans l'URL du navigateur. Cette PR corrige ce problème en adoptant une approche plus respectueuse de la philosophie de HTMX.

Documentation

  • La nouvelle librairie axum-htmx qui offre des helpers pour faire du HTMX dans Axum
  • Un repo' d'exemple intéressant, du même auteur, qui propose certaines approches pour gérer les "partials" (le rendu différentiel selon qu'on a une requête HTMX ou pas)

Closes #46
Closes #54

### Détails Implémente une approche plus respectueuse de "HATEOAS" comme nécessité par HTMX. Dans cette approche, les routes des pages, comme `/index` ou `/cps`, ont, par défaut, un rendu "complet", comme cela serait si l'on n'utilisait pas HTMX. Certains helpers sont utilisés pour éviter la duplication de code (entre particulier une "macro" Jinja pour la navbar). Un "Extractor" issu de `axum-htmx` permet d'identifier quand une requête sur ces pages est issue d'un appel `htmx`, et permet de générer un rendu "simplifié", ne contenant (quasiment) que les éléments HTML ayant leur contenu qui change. Par exemple, la page `/cps`, dans le cadre d'une requête `htmx` (`hx-request=true`), ne retourne que : une nouvelle balise `<title>`, la navbar (pour changer le design de l'élément "courant") et le contenu de la page. Tout le contenu de `<head>` ou les `div` qui encapsulent l'ensemble de la page ne sont pas re-envoyé. Cela permet de mettre à jour les URLs dans la barre du navigateur, sans provoquer les problèmes de rechargement de page identifié dans le ticket #54. Au passage, cette PR organise les templates d'une manière qui me parait un peu plus "claire" qu'avant : - Les "pages", correspondant à des routes réelles, sont définies dans `app/src/pages` - Les "composants", comme la navbar, qui ont vocation à être "inséré" (plutôt par des includes ou des appels de fonctions), sont définis dans `app/src/components` L'avantage de leur présence dans le dossier `src` est qu'on peut sans problème mettre à côté les fichiers `.rs` qui leur correspondent. ### Pourquoi ? La PR #53 et le ticket #54 avaient éclairé un problème lorsqu'on souhaitait pouvoir refléter la navigation dans l'URL du navigateur. Cette PR corrige ce problème en adoptant une approche plus respectueuse de la philosophie de HTMX. ### Documentation - La nouvelle librairie [`axum-htmx`](https://github.com/robertwayne/axum-htmx) qui offre des helpers pour faire du HTMX dans Axum - Un [repo' d'exemple](https://github.com/robertwayne/template-axum-htmx-tailwind) intéressant, du même auteur, qui propose certaines approches pour gérer les "partials" (le rendu différentiel selon qu'on a une requête HTMX ou pas) Closes #46 Closes #54
florian_briand added the
bug
enhancement
module/frontend
 labels 2024-08-23 20:16:33 +02:00
florian_briand self-assigned this 2024-08-23 20:16:33 +02:00
florian_briand added 7 commits 2024-08-23 20:16:34 +02:00
florian_briand added 1 commit 2024-08-23 20:17:26 +02:00
florian_briand changed title from feat/54_update_url_on_navbar_navigation to Implémentation "HATEOAS" de l'interface pour HTMX et update des URLs qui fonctionne ! 2024-08-23 20:21:12 +02:00
florian_briand requested review from kosssi 2024-08-23 20:22:13 +02:00
florian_briand requested review from julien.misiak 2024-08-23 20:22:13 +02:00
florian_briand requested review from theo 2024-08-23 20:22:14 +02:00
florian_briand added spent time 2024-08-23 20:27:58 +02:00
3 hours 30 minutes
kosssi approved these changes 2024-08-26 23:20:51 +02:00
kosssi left a comment
Owner
Copy Link

Génial, je trouve que le rapprochement des fichiers html et rs est une super nouvelle. Encore une fois le code est vraiment compréhensible. Ça fonctionne bien de mon côté. Ça résout le problème de l'autoreload en plus 👍

Un dernier détail : devrions nous pas renommer home.rs en index.rs ?

Génial, je trouve que le rapprochement des fichiers `html` et ` rs` est une super nouvelle. Encore une fois le code est vraiment compréhensible. Ça fonctionne bien de mon côté. Ça résout le problème de l'_autoreload_ en plus 👍 Un dernier détail : devrions nous pas renommer `home.rs` en `index.rs` ?
👍 1
crates/app/src/components/navbar/navbar.html Outdated
@ -0,0 +6,4 @@
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
<img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Krys4lide</span>
kosssi commented 2024-08-26 23:19:57 +02:00
Owner
Copy Link

Le fond de la nav est blanc ainsi que ce titre du coup il n'est pas visible ;)

Le fond de la `nav` est blanc ainsi que ce titre du coup il n'est pas visible ;)
florian_briand commented 2024-08-27 10:58:58 +02:00
Author
Owner
Copy Link

Bien vu ... ce code est totalement faussement compatible avec le mode sombre oO

Bien vu ... ce code est totalement faussement compatible avec le mode sombre oO
florian_briand commented 2024-08-27 11:19:45 +02:00
Author
Owner
Copy Link

C'était lié au CSS de Flowbite, qui "surchargeait" inutilement Tailwind tout en faisant bugguer le darkmode.

Corrigé par d4e5656

C'était lié au CSS de Flowbite, qui "surchargeait" inutilement Tailwind tout en faisant bugguer le darkmode. Corrigé par d4e5656
florian_briand marked this conversation as resolved
crates/app/src/lib.rs Outdated
@ -27,2 +29,3 @@
.merge(templates::get_routes())
.merge(pages::get_routes())
.fallback(fallback)
.layer(AutoVaryLayer)
kosssi commented 2024-08-26 22:40:49 +02:00
Owner
Copy Link

C'est assez subtile l'AutoVaryLayer ça peut valoir le coup d'ajouter un commentaire pour expliquer ? Voir la doc

C'est assez subtile l'`AutoVaryLayer` ça peut valoir le coup d'ajouter un commentaire pour expliquer ? [Voir la doc](https://github.com/robertwayne/axum-htmx?tab=readme-ov-file#auto-caching-management)
👍 1
florian_briand marked this conversation as resolved
florian_briand added 2 commits 2024-08-27 10:56:12 +02:00
florian_briand added 1 commit 2024-08-27 11:18:50 +02:00
florian_briand force-pushed feat/54_update_url_on_navbar_navigation from 080e392c21 to d4e565601a 2024-08-27 11:20:01 +02:00 Compare
kosssi approved these changes 2024-08-27 11:25:14 +02:00
kosssi left a comment
Owner
Copy Link

Nickel les modifs ça permet d'être plus homogène pour la page d'accueil 👍

Nickel les modifs ça permet d'être plus homogène pour la page d'accueil :+1:
crates/app/src/pages/mod.rs Outdated
@ -6,3 +6,3 @@
pub fn get_routes() -> Router {
Router::new()
.route("/home", routing::get(home::home))
.route("/", axum::routing::get(home::home))
kosssi commented 2024-08-27 11:24:34 +02:00
Owner
Copy Link

micro typo axum::routing -> routing

micro typo `axum::routing` -> `routing`
florian_briand marked this conversation as resolved
florian_briand added 1 commit 2024-08-27 11:28:40 +02:00
theo commented 2024-08-30 16:25:15 +02:00
Owner
Copy Link

Je suis pas 100℅ sur de l'intérêt de mix HTML + rust mais j'ai pas plus d'arguments que ca.

Je ne veux pas plus bloquer cette da donc si go

Je suis pas 100℅ sur de l'intérêt de mix HTML + rust mais j'ai pas plus d'arguments que ca. Je ne veux pas plus bloquer cette da donc si go
florian_briand merged commit 90ff593438 into main 2024-08-30 18:25:53 +02:00
florian_briand deleted branch feat/54_update_url_on_navbar_navigation 2024-08-30 18:25:54 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
julien.misiak
theo
kosssi
Labels
Clear labels   
bug

Something is not working

  
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
help wanted

Need some help

  
independant

Tickets réalisables indépendaments des travaux prévus dans la roadmap - très approprié pour des contributions ponctuelles

  
invalid

Something is wrong

  
module/autre

Pour toute autre partie du produit non lié aux autres étiquettes disponibles

  
module/backend

Serveur backend, opérant les accès données et système

  
module/desktop

Encapsulation de la webview dans Tauri

  
module/docs

Documentation (docs)

  
module/frontend

Interfaces utilisateur⋅ices

  
module/scripts

Scripts utiles au setup et/ou au build (scripts)

  
module/sesam-vitale

Moteur SESAM-Vitale

  
module/utils

Librairie de fonctions utilitaires

  
open-source

Les tâches contribuant à l'ouverture et au partage du code

  
question

More information is needed

  
to-triage

À trier

  
wontfix

This won't be fixed

No Label
bug
duplicate
enhancement
help wanted
independant
invalid
module/autre
module/backend
module/desktop
module/docs
module/frontend
module/scripts
module/sesam-vitale
module/utils
open-source
question
to-triage
wontfix
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
florian_briand
3 Participants
Notifications
Total Time Spent: 3 hours 30 minutes
florian_briand
3 hours 30 minutes
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: P4Pillon/Krys4lide#57
No description provided.
Delete Branch "feat/54_update_url_on_navbar_navigation"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?