Mustache - Handlebar

[Gaetanbrl]

Mustache.js est logic-less et ne permet donc pas l'intégration de logique simple (if, else, each, etc...).

Il existe probablement d'autres librairie qui pourrait compléter ou étendre mustache.js. L'objectif serait de trouver un élément qui soit compatible avec la syntaxe mustache.js actuelle. Je pense ici à Handlebar.js.

[bchartier]

C'est effectivement intéressant. Si cela ne casse rien à ce que supporte Mustache on pourrait faire le tester assez facilement.

Sur le github de Handlebar.js il est fait mention de templates précompilés qui seraient plus performants que ceux de Mustache. A voir donc.

C'est vrai qu'en cherchant un peu on trouve des alternatives à Mustache : https://colorlib.com/wp/top-templating-engines-for-javascript/ Je ne sais pas ce que cela vaut. Je n'ai pas regardé plus que cela.

[spelhate]

Intéressant. J'émets quelques réserves cependant sur les templates précompilés. Pour avoir testé ces derniers dans un projet avec Vue.js, ce n'est pas adapté pour des templates chargés dynamiquement tels que ceux utilisés pour mettre en forme la fiche d'information. La précompilation nécessite en effet une déclaration de la ressource au moment du build du projet. Après c'est peut-être différent dans Handlebar.

[Gaetanbrl]

En effet, je n'ai pas vu que c'était des templates pré compilés. L'expérience identique à celle de @spelhate que nous avons eu ne nous encourage pas vers ce type de mécanique. Je vais tout de même jeter un coup d’œil ...

[bchartier]

Quelle suite donnons-nous à cet échange ?

[Gaetanbrl]

Pas encore testé.

[Gaetanbrl]

La branche feature-155 vient d'être crée pour cette issue.

[Gaetanbrl]

Test de portabilité des templates existants vers handlebarJS.

Je viens de tester rapidement sur la démo cluster.xml.

• Dans le fichier index.html: https://github.com/geobretagne/mviewer/blob/cbdc33cf47f6359f75f50861c8fdbf11c41b585a/index.html#L587
• Dans le fichier info.js pour la méthode applyTemplate: https://github.com/geobretagne/mviewer/blob/cbdc33cf47f6359f75f50861c8fdbf11c41b585a/js/info.js#L679-L681

Le template défini par défaut dans cluster.mst ne nécessite aucune modification pour être compatible et "compilé" par HandlebarJS.

• Résultat :

Le lien n'est pas cassé. Aucune différence perceptible.

[Gaetanbrl]

La documentation HandlebarJS est disponible ici :

• site officiel
• devdoc

Voici les points forts de HandlebarJS:

• Insérer des helpers (méthode js) pour ajouter une logique avancée au template
• Propose HTML-escaping pour appliquer une logique type regex
• Partials : La réutilisation de bloc de template pouvant intégrer leur logique JS propre

Pour la précompilation, elle n'est pas obligatoire et je ne l'utilise pas dans mon test précédent. C'est surtout pour une utilisation avec npm que cela peut être intéressant pour renvoyer des template déjà compilés.

Je n'ai pas l'impression que cela change de MustacheJS pour l'aspect rendu (render) / compilation.

[bchartier]

@Gaetanbrl : Merci pour ce test intéressant. L'objectif c'est de remplacer complètement Mustache, c'est ça ? On peut intervenir directement sur cette branche pour apporter des améliorations ?

[Gaetanbrl]

Aucun soucis @bchartier pour réaliser des modifications sur cette branche.

[Gaetanbrl]

L'objectif c'est de remplacer complètement Mustache, c'est ça ?

Si tout est bien iso avec les templates Mustache, je ne vois pas de raison de garder Mustache en effet.

[spelhate]

Si tout est bien iso avec les templates Mustache, je ne vois pas de raison de garder Mustache en effet.

comment ça se passe pour les boucles sur les features ? dans les templates utilisant Mustache, on boucle sur les features comme ceci : {{#features}}{{/features}} Si j'ai bien compris, avec Handlebar, il faut faire : {{#each features}}{{/each}}, ce qui nous oblige à reprendre tous les templates existants. Mais je me trompe peut être.

[Gaetanbrl]

ce qui nous oblige à reprendre tous les templates existants

Je ne suis même pas certain que ce soit obligatoire. Pour mon test avec les clusters, je n'ai pas eu à modifier le template cluster.mst. Pourtant on utilise bien {{#features}}.

[Gaetanbrl]

Les deux sont pour moi fonctionnels.

Voici un exemple : https://codepen.io/gaetanbrl/pen/GRgGOGX

[spelhate]

Ok.

[bchartier]

J'ai poussé une mise à jour de la branche feature-155. J'ai remplacé toutes les occurrences de Mustache par Handlebars (y compris dans la doc). J'ai testé que cela fonctionne bien sur les principales fonctions dont les tooltips carto, la recherche avec fuse, le widget de changement de fond de carte. C'est utilisé ailleurs aussi (démo ELS par exemple) mais je n'ai pas ce qu'il faut pour tester. Je pense que cela vaudrait la peine que d'autres personnes testent avant de proposer de fusionner cela sur la branche develop.

[Gaetanbrl]

C'est utilisé ailleurs aussi (démo ELS par exemple) mais je n'ai pas ce qu'il faut pour tester.

Idem. Il faut que j'installe un ELS. C'est faisable mais pas tout de suite tout de suite...

Je pense que cela vaudrait la peine que d'autres personnes testent avant de proposer de fusionner On peut créer une liste ici du type :

• [X] test 1
• [ ] test 2
• [ ] test N

Peux-tu initialiser cette liste, cocher ce que tu as testé actuellement et mettre ce que tu as en tête ensuite ? On complétera :)

[bchartier]

Pour ELS : je pense que le plus facile pour @spelhate car il faut des données dispo à la fois via GeoServer et dans Elastic, ainsi qu'un paramétrage spécifique des index pour tester.

Pour la liste :

• Tests fonctionnels
  • [ ] panneau de la liste des thèmes et des couches
  • [ ] fiche d'information d'un objet
  • [ ] tooltip d'un objet
  • [ ] carrousel des fiches d'information
  • [ ] widget de sélection du fond de carte
  • [ ] recherche avec Fuse
  • [ ] customlayer ELS
  • [ ] customlayer inventaire
  • [ ] exemples du répertoire démo
• Documentation et autres
  • [ ] Readme
  • [ ] Commentaires
  • [ ] Import lib Handlebars.js

[spelhate]

Ok. Je m'y attèle dès que possible.

[Gaetanbrl]

Merci @bchartier

[bchartier]

@Gaetanbrl : j'ai noté que tu importes la dernière version de Handlebars. Je pense qu'il est préférable de se fixer une version particulière pour éviter toute régression non anticipée due à une évolution trop forte de la bibliothèque. De temps en temps il faudra regarder l'évolution de la bibliothèque pour passer à quelque chose de plus récent comme on le fait avec OpenLayers.

[spelhate]

Pour info, j'ai commencé à tester. A partir de l'exemple disponible dans demo/sirene.xml et avec la couche Base sirene, j'ai deux cas qui ne semblent pas fonctionner

• l'utilisation de triples accolades {{{html}}} qui permet dans Mustache d'afficher de l'html non échappé,
• le test sur l'absence présence de valeur{{#field1}}Champ1: {{field1}}{{/field1}} qui ne fonctionne pas.

[Gaetanbrl]

A partir de l'exemple disponible dans demo/sirene.xml et avec la couche Base sirene

Je vais regarder ce qui n'est pas compatible avec ce cas cette semaine... c'est étrange.

[bchartier]

Où est-ce qu'on en est de ce ticket ? Est-ce que c'est abandonné ou est-ce qu'il faut qu'on y mette un peu d'énergie ?

[Gaetanbrl]

J'ai un peu oublié ce ticket... je me le laisse et me le note quand j'aurai un moment...