Partage
  • Partager sur Facebook
  • Partager sur Twitter

Twig : librairie de composants html

    14 septembre 2020 à 16:16:44

    Bonjour,

    J'ai fait un développement plutôt conséquent d'un système de smart home et d'autres app. Je suis autodidacte sur Symfony et twig et j'ai commencé avec la version 2.x et j'utilise maintenant la 4 ou la 5 suivant les projets

    Le développement ayant pris quelques années, outre les changement de versions de Symfony mais aussi de bootstrap que j'utilise, j'ai codé des composants html directement dans les vues twig avec parfois des rendus non uniformes voire des incohérences au fil du temps.

    J'ai donc pensé à faire une sorte de bibliothèque de composants html qui ainsi garantirait l'uniformité et serait plus facilement maintenable.

    J'ai par exemple codé les différents boutons possibles (une quinzaine) en terme de class, icon, name en utilisant les possibilités de twig extension. Pour aller encore plus loin, j'ai mis en oeuvre les macros twig pour faire des composants html complets. Ces composants sont donc appelés dans les vues en leur passant les bons paramètres sans s'occuper du style qui est généré par la bibliothèque.

    ==> avez-vous un avis pertinent sur ce type d'approche ?

    ==> peut-être que j'ai réinventé la poudre ? et dans ce cas, il existe quoi en open-source ?

    Merci pour vos réponses.

    A+

    -
    Edité par monkey3d 15 septembre 2020 à 12:50:34

    • Partager sur Facebook
    • Partager sur Twitter
      15 septembre 2020 à 17:59:50

      Pas de contribution ? :euh:

      A+

      • Partager sur Facebook
      • Partager sur Twitter
        17 septembre 2020 à 8:34:28

        Salut

        Pour moi, il y a trop peu d'information pour que j'ose m'avancer sur l'utilité de ton développement. Tu dis avoir utilisé les macros pour permettre la création d'éléments de composants HTML (d'ailleurs, est-ce que tu fais une différence entre élément/composant et balise, et si oui laquelle ?), aurais-tu quelques exemples concrets à nous montrer ?

        • Partager sur Facebook
        • Partager sur Twitter
        OC à changerFAQ PHP • Et avant celaTutoriel WAMP • Code illisible ? Un p'tit 👍 ici@Zeste de Savoir
          17 septembre 2020 à 8:46:00

          Salut Ymox,

          Exemple basique concret :

          Au lieu de :

          <button class="{{ button_app['search']['class'] }}"  type="submit">
              <i class="{{ button_app['search']['icon'] }}"></i> {{ button_app['search']['name'] }}
          </button>

          ceci :

          {{ components.button('search', 'submit') }}

          Cela te renseigne plus ?

          A+

          • Partager sur Facebook
          • Partager sur Twitter
            17 septembre 2020 à 10:06:57

            Oui, même si j'avoue que j'aurais espéré voir l'implémentation du composant aussi. Quid des traductions et des autres attributs ?

            • Partager sur Facebook
            • Partager sur Twitter
            OC à changerFAQ PHP • Et avant celaTutoriel WAMP • Code illisible ? Un p'tit 👍 ici@Zeste de Savoir
              17 septembre 2020 à 10:12:57

              Extension twig globals :

              $button = [
              'search' => [
                              'name' => $this->translator->trans('shu.button.search', [], 'app'),
                              'class' => 'btn btn-info btn-sm',
                              'icon' => 'fas fa-search-plus'
                          ],
              ....

              Extension components sous forme de macro :

              {% macro button(name, type="button", style) %}
                  {% if name is not null %}
              	<button class="{{ button_app[name]['class'] }}" style="{{ style }}" type="{{ type }}">
                  	<i class="{{ button_app[name]['icon'] }}"></i> {{ button_app[name]['name'] }}
                  </button>
                  {% else %}
                  <div class="alert alert-danger" role="alert">
                  	{{ 'shu.components.button_ko' | trans }}
              	</div>
                  {% endif %}
              {% endmacro button %}

              Message avec traduction classique dans fichier yaml de langue.

              ==> Qu'en penses-tu ?

              A+


              -
              Edité par monkey3d 17 septembre 2020 à 10:13:39

              • Partager sur Facebook
              • Partager sur Twitter
                17 septembre 2020 à 10:25:36

                D'accord, donc c'est vraiment pour rendre des composants génériques et non personnalisables, c'est ça qui m'échappait, j'ai cru un instant que tu avais par exemple une macro pour créer un bouton à laquelle tu donnais tous les paramètres (classe, texte/contenu, attributs), donc très générique.

                Du coup, je trouve l'approche intéressante. Je ne sais pas s'il existe autre chose, probablement que oui.

                • Partager sur Facebook
                • Partager sur Twitter
                OC à changerFAQ PHP • Et avant celaTutoriel WAMP • Code illisible ? Un p'tit 👍 ici@Zeste de Savoir
                  17 septembre 2020 à 10:32:12

                  Merci pour ton avis.

                  Effectivement ce sont des composants génériques qui dépendent de bootstrap et de font awesome : ils ne sont donc pas personnalisables.

                  L'intérêt que j'y vois c'est l'homogénéïté sur tout l'applicatif avec une écriture relativement simple.

                  Je continue alors sur cette approche.

                  Je ne sais si ce genre de biblio offre un intérêt à être partagé sur une forge ?

                  Je clos le sujet car je me doute que ce genre de question ne va pas intéresser grand monde dans le forum.

                  Bye

                  • Partager sur Facebook
                  • Partager sur Twitter
                    17 septembre 2020 à 10:33:09

                    Publier ton code est une bonne manière de savoir s'il va intéresser quelqu'un (d'autre) et d'avoir des retours  ;)

                    -
                    Edité par Ymox 17 septembre 2020 à 10:33:32

                    • Partager sur Facebook
                    • Partager sur Twitter
                    OC à changerFAQ PHP • Et avant celaTutoriel WAMP • Code illisible ? Un p'tit 👍 ici@Zeste de Savoir

                    Twig : librairie de composants html

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    • Editeur
                    • Markdown