IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

[Article] Petit guide du templating client


Sujet :

Bibliothèques & Frameworks

  1. #1
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut [Article] Petit guide du templating client


    Avez-vous déjà manipulé de grands pans de HTML en JavaScript, et trouvé ça peu lisible et fastidieux ? Les templates sont là pour vous simplifier la vie et produire du code plus lisible et maintenable.

    Cet article, de Sylvain Pollet-Villard, fait le tour des principales solutions de templating existantes en JavaScript pour vous permettre de trouver la bibliothèque qu'il vous faut.

    N'hésitez pas à faire des commentaires sur son article !

    Petit guide du templating client

  2. #2
    Membre éclairé

    Homme Profil pro
    Développeur Java
    Inscrit en
    Février 2007
    Messages
    179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2007
    Messages : 179
    Points : 653
    Points
    653
    Par défaut
    AngularJs ne peut pas faire parti de la liste ?
    C'est un petit framwork qui monte bien en se moment.

    [edit] désoler j'ai un peu trop vite lu on dirait.
    L'expérience est une lanterne que l'on porte sur le dos et qui n'eclaire jamais que le chemin parcouru.

    La nature fait les choses sans se presser, et pourtant tout est accompli.

  3. #3
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    "Petit" n'est pas la qualificatif le plus adéquat pour parler d'AngularJS

    J'en parle section VII-A.
    One Web to rule them all

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour et merci Sylvain.

    J'ai fini par lire ton article et le moins que l'on puisse dire c'est qu'il est limpide .
    Peut être reverrais je mon approche de création d'éléments dynamiques si le besoin s'en fait réellement sentir, restera à trouver le templating le mieux adapté, il y a pléthore.

    J'aurais un seul petit "reproche", il manquerait un lien vers PURE dans l'article.

  5. #5
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Merci NoSmoking, c'est corrigé.

    Effectivement il y a beaucoup de choix et c'est plutôt une bonne chose. J'ai écrit cet article en voulant observer les avantages et inconvénients de chacun. Je compte m'en servir pour trouver le meilleur compromis possible et bosser sur ma propre librairie de templating. Mais ce n'est pas pour tout de suite
    One Web to rule them all

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    je sais qu'une petite recherche est pas bien compliquée, d'ailleurs je suis directement tombé sur le lien ajouté, mais quand on a tout sous la main c'est mieux.

    La multitude pose quand même un problème de choix judicieux.
    Je connaissais déjà, partiellement, celui de John Resig, mais le dernier PURE me paraît digne d'intérêt, à voir et à tester à l'occasion.

  7. #7
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Oui PURE m'a intéressé aussi au premier abord, pour ses templates DOM-based et sa simplicité de binding entre classe et nom de variable (ce qu'ils appellent auto-rendering). En se servant des classes comme point de liaison entre modèle et vue, on met plus de proximité entre les données et le CSS associé à la présentation de ces données.

    Le problème c'est que l'auto-rendering est très limité, par exemple on ne peut pas toucher aux attributs HTML. C'est pour ça qu'il y a les directives. Seulement les directives se trouvent du côté JS et non du côté HTML. Ce n'est vraiment pas pratique pour lire rapidement un template, il faut le HTML et le JS ouverts côté à côte pour bien comprendre le résultat. D'ailleurs tous les exemples du site utilisent des scripts inline précisément à cause de cet inconvénient...
    One Web to rule them all

  8. #8
    Membre émérite
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 165
    Points : 2 778
    Points
    2 778
    Par défaut
    Excellent article. Je croyais avoir mis un commentaire mais je me rend compte qu'il n'est pas là, je n'avais pas dû envoyer

    Tu ne travaillais pas sur la création d'une solution de templating DOM-based logic less ?

  9. #9
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    En effet, je bosse sur ma propre solution. J'en parle rapidement section VI. J'en suis encore au stade des spécifications, mais je dois mettre ce projet de côté jusqu'à février car j'ai un contrat sur l'écriture d'un bouquin.
    One Web to rule them all

  10. #10
    Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2013
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2013
    Messages : 1
    Points : 4
    Points
    4
    Par défaut Merci d'avoir retenu PURE pour ton article
    Salut Sylvain,

    C'est l'explication la plus claire et précise que j'ai lu sur PURE en français.

    Pour ton info, la première version était avec des data-xyz dans l'HTML.
    Mais je voulais un HTML vraiment vide de logique.
    Et aussi, avoir la possibilité d'associer des fonctions javascript anonymes.

    Les directives sont donc arrivés avec le lien entre un selecteur CSS et sa logique(boucle, string ou fonction).

    Le lien automatique entre class et le JSON est venu plus tard, pour rendre la librairie plus accessible. Mais aujourd'hui je le regrette. Ce n'est pas net, et fort limité.

    -Mic

  11. #11
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Salut Mic,

    C'est un plaisir d'avoir un commentaire d'un des auteurs de PURE sur mon article. Pour ceux qui se poseraient la question, Mic est CTO et co-fondateur de BeeBole.

    L'auto-binding est un sujet intéressant, à explorer davantage. Ce que j'apprécie beaucoup avec ce système, c'est que cela force à ajouter des classes pour désigner les données, ce qui permet de rendre plus lisibles les surcharges CSS propres aux éléments correspondant à une certaine donnée :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    .prenom { text-transform: capitalize; }
    .nom { text-transform: uppercase; }

    Une des limitations que j'avais sur PURE était qu'on ne pouvait pas mélanger auto-rendering et rendering via directives au sein d'un même template. Ce qui fait qu'un template conçu en auto-rendering doit parfois être réécrit avec une directive lorsque l'on veut rajouter un lien sur un attribut, par exemple.

    J'avais imaginé pour ma solution un mélange des deux options de cette façon :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <span data-bind="prenom">
    attribut data-bind vide = auto rendering selon ID ou classe
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <span class="prenom" data-bind>

    Mais ça ne colle pas à l'optique de PURE "zéro logique dans le HTML". Pour ma part un attribut à rajouter dans le HTML ne me dérange pas, ça donne un aperçu rapide à la lecture du template de quels éléments ont un lien et quels éléments n'en ont pas. Et ça réduit le risque de lien cassé ou indésirable, notamment quand le HTML peut être modifié par un tiers qui n'y connait rien (le designer de mon équipe par exemple )
    One Web to rule them all

Discussions similaires

  1. [Article] Petit guide du templating client
    Par vermine dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 18/12/2013, 12h58
  2. Réponses: 4
    Dernier message: 20/01/2006, 17h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo