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

Pas de contribution ? 

A+

Last up ! 

A+

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 ?

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+

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 ?

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

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.

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

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