feat: article blog #1
Conversation
…nd adjust base template structure
|
|
||
| ## Prérequis | ||
|
|
||
| Une application Symfony >= 6.3 et Twig >= 3.0. Voir la documentation officielle : [Installing & Setting up the Symfony Framework (Symfony Docs)](https://symfony.com/doc/current/setup.html). |
There was a problem hiding this comment.
pour les prérequis pas totalement certain des versions minimum
je vais devoir verifier ca
There was a problem hiding this comment.
Ça me semble cohérent en tout cas mais oui vaut mieux double check
There was a problem hiding this comment.
Le contenu est intéressant ! Mais la forme est pour moi assez confuse.
On est entre le compte-rendu de projet, l'atelier pratique avec les pré-requis et le repo a bootstrapper, et l'article technique.
J'aurais choisis l'une des trois approches
- soit prends une posture subjective, tu expliques que t'as bossé sur x projet, que vous avez choisi ces solutions là pour y raison, et tu expliques vos déconvenus, ce qui vous a plu, et ce que tu retiens,
- soit tu prends une posture plus objective, ou tu présentes deux technos, leur synergies et leur limitations,
- soit tu fais un guide pas a pas je met en place des twig component et tailwind sur une application symfony et comment ça s'utilise.
Mais j'aurais pas fait les trois en meme temps.
Moi ce que je trouve le plus intéressant ici c'est la synergie entre les twig components et tailwind. Donc j'aurais plutot choisi la premiere ou la 2eme option.
blog-article.md
Outdated
| }, | ||
| ``` | ||
|
|
||
| Ajoutez des couleurs personnalisées, raduis, etc. dans la clé `extend` : |
| Le filtre `tailwind_merge` permet de fusionner les classes CSS de manière intelligente. Par exemple, si vous surchager votre composant avec d'autre classes Tailwind en doublon ou en conflict, `tailwind_merge` les fusionnera et appliquera le style surchager en dernier. Cela évite l'utilisation pas très propre du `!` devant vos classes Tailwind. | ||
|
|
||
| ```twig | ||
| <twig:button as="a" href="https://knplabs.com" size="lg" class="bg-red-500">Rouge KNPlabs</twig:button> |
There was a problem hiding this comment.
l'exemple n'a pas l'air d'illustré le filtre en question ?
There was a problem hiding this comment.
J’ai un style par défaut avec une classe bg-primary, et ici je surcharge avec ma classe bg-red-500. Dans le résultat final, la classe bg-primary n’apparaît plus, donc les conflits entre les classes ont bien été résolus. Peut-être que l’exemple n’est pas assez explicite, ou peut-être même inutile pour cet article, je ne sais pas trop ? 🤷♂️
blog-article.md
Outdated
|
|
||
| ### Live Twig Components | ||
|
|
||
| Comme je le disais, vous pouvez aussi créer des composants avec des classes PHP, pour des cas plus complexes nécessitant une certaine logique métier. |
There was a problem hiding this comment.
c'est peut etre un abus de language de parler de "logique métier" ici ? Ça permet d'ajouter de la logique, métier ou non.
blog-article.md
Outdated
|
|
||
| Avec cette approche, vous pouvez : | ||
|
|
||
| - **Séparer la logique métier du rendu** : La méthode `formatPrice` encapsule la logique de formatage. |
There was a problem hiding this comment.
je ne sais pas, implémenté dans un live component, je n'ai pas vraiment la sensation que la "logique est séparer du rendu", ça me semble assez couplé au contraire. Je suppose que tu veux dire qu'elle ne fait pas partie du template ? C'est déjà ce que font les filtres twig non ?
Voici comment sont présentés les live components dans la doc symfony :
Live components builds on top of the [TwigComponent](https://symfony.com/bundles/ux-twig-component/current/index.html) library to give you the power to automatically update your Twig components on the frontend as the user interacts with them.
C'est présenté comme une solution pour ajouter de l'interactivité sur un composant, c'est assez loin de la description que tu en donnes ici.
There was a problem hiding this comment.
y'a pas une confusion, ce que tu décris ce sont des twig components non, pas des live components ?
There was a problem hiding this comment.
Effectivement, c’est peut-être un abus de dire que c’est un Live Twig Component juste parce qu'il a un petite logique. Je me suis sans doute un peu égaré entre les Anonymous Components, les Live Components, et les simples Twig Components sans nom particulié
There was a problem hiding this comment.
Par contre, quand je parle de séparation entre le rendu et la logique, je veux dire que d’un côté, tu as ton template avec le style, etc., et de l’autre, ta classe PHP qui gère la logique. Contrairement à certaines utilisations des extensions Twig qui retournent directement une string contenant des balises HTML. C’est pour illustrer ce point que je donne cet exemple.
blog-article.md
Outdated
|
|
||
| ### Conseil sur les conventions de nommage | ||
|
|
||
| Dans notre équipe, lors d'une refonte graphique avec des maquettes Figma, nous n’avions pas défini de convention claire pour les variables de style. Résultat : des classes en `Camel-Case` (`bg-Grey-Light`), peu adaptées à Tailwind. Après discussion, nous avons opté pour une convention en `kebab-case` (`bg-grey-light`), respectant les conventions Tailwind et facilitant la maintenance. |
There was a problem hiding this comment.
quelle équipe ? La notion d'équipe n'a pas été introduite, tu ne présentes pas un projet client ici
Aussi, je ne comprends pas pourquoi figma est évoqué, pourquoi cet outil mérite-t-il sa place ici ? Il est lié à votre problématique de nommage ?
blog-article.md
Outdated
|
|
||
| ## Conclusion | ||
|
|
||
| L’utilisation de Twig Components avec Tailwind CSS est une approche puissante et moderne pour développer le frontend d'un monolithe Symfony. Certes, cette méthodologie a ses limites, comme la lisibilité parfois complexe du DOM, dû aux parfoit nombreuses classes Tailwind et à Twig qui peut parfois rendre le code plus verbeux, ou bien la nécessité de trouver un équilibre entre logique PHP et Twig. Cependant, ces défis peuvent être surmontés avec une bonne organisation, un découpage rigoureux des composants et des conventions claires. |
There was a problem hiding this comment.
dû aux parfoit
parfois
dût ?
There was a problem hiding this comment.
Ce que je veux dire, c’est que ce n’est pas systématique d’utiliser une multitude de classes Tailwind pour styliser une balise, ce qui pourrait alourdir le HTML.
blog-article.md
Outdated
|
|
||
| L’utilisation de Twig Components avec Tailwind CSS est une approche puissante et moderne pour développer le frontend d'un monolithe Symfony. Certes, cette méthodologie a ses limites, comme la lisibilité parfois complexe du DOM, dû aux parfoit nombreuses classes Tailwind et à Twig qui peut parfois rendre le code plus verbeux, ou bien la nécessité de trouver un équilibre entre logique PHP et Twig. Cependant, ces défis peuvent être surmontés avec une bonne organisation, un découpage rigoureux des composants et des conventions claires. | ||
|
|
||
| Selon notre d'expérience, nous sommes pleinement satisfaits de cette approche. Elle nous a permis d'intégrer nos maquettes de manière de plus en plus rapide et efficace grâce à une bibliothèque de composants que nous avons enrichie au fil du projet. Cette productivité accrue n’aurait pas été possible sans Tailwind CSS, qui simplifie et accélère grandement le stylage de nos composants et du reste de notre interface. En somme, cette combinaison s'est révélée être un excellent choix pour nos besoins. |
There was a problem hiding this comment.
Suite à notre d'expérience, nous sommes pleinement satisfaits de cette approche.
tournure un peu étrange ? Nous sommes pleinement satisfaits de notre expèrience de cette approche ?
Cette productivité accrue n’aurait pas été possible sans Tailwind CSS
faut peut-etre pas s'enflammer, imho il vaudrait mieux parler d'une aide/d'un gain de productivité apporté par Tailwind
blog-article.md
Outdated
|
|
||
| ##### Bonus: Testez vos composants | ||
|
|
||
| Vous pouvez tester vos composants Twig avec PHPUnit d'une simplicité deconcertente. Voici un exemple de test pour notre composant `Price`. |
There was a problem hiding this comment.
| Vous pouvez tester vos composants Twig avec PHPUnit d'une simplicité deconcertente. Voici un exemple de test pour notre composant `Price`. | |
| Vous pouvez tester vos composants Twig avec PHPUnit avec une simplicité déconcertante. Voici un exemple de test pour notre composant `Price`. |
| ### Anonymous Components | ||
|
|
||
| Prenons un exemple simple, un bouton avec des variantes de couleur et de taille. | ||
|
|
||
| Il existe un approche appelée **CVA** (*Class Variant Authority*), qui centralise la gestion des classes CSS conditionnelles, rendant vos composants modulaires, faciles à faire évoluer et à maintenir. Initialement popularisé dans le monde JavaScript, elle est désormait disponible dans Twig ! |
There was a problem hiding this comment.
C'est intéressant de présenter CVA, cependant j'aurais présenté le avant/après histoire de voir les avantages et inconvénients.
There was a problem hiding this comment.
Juste mettre un très court exemple sur le background color par exemple 👍
There was a problem hiding this comment.
je pense que de rajouter une explication de comment on peut faire sans ca rajouterait du texte pour pas grand chose, les lecteurs auront forcement une idee de comment on peut faire sans.
Peut etre juste rajouter une phrase pour dire : "Fini les multiples fichiers ou vos multiples conditions pour gerer vos diferents variants"
article-v2.md
Outdated
| </{{ as }}> | ||
| ``` | ||
|
|
||
| Voici notre composant bouton qui accepte trois props : `as`, `variant`, et `size`. Cette approche de composant dite "polymorphic" permet de rendre par défaut le composant comme une balise `button`, mais vous pouvez le changer en `a`, `div`, ou autre en passant la prop `as`. |
There was a problem hiding this comment.
IMO c'est un peu dommage de parler de div pour remplacer un bouton, ça casse le role de ton composant. Par contre le a lui reste un élément clickable donc c'est okay.
article-v2.md
Outdated
| @@ -0,0 +1,224 @@ | |||
| # Pourquoi associer Tailwind CSS et Twig Components est une excellente combinaison pour le frontend d'un monolithe Symfony | |||
There was a problem hiding this comment.
Ça va plus loin que ça puisque tu parles aussi des class components et des tests.
Un frontend simple et efficace grace aux Twig Components et a Tailwind, quelque chose comme ça, me paraitrait plus ouvert.
article-v2.md
Outdated
| @@ -0,0 +1,224 @@ | |||
| # Pourquoi associer Tailwind CSS et Twig Components est une excellente combinaison pour le frontend d'un monolithe Symfony | |||
|
|
|||
| Symfony, avec Twig pour le templating, reste un choix incontournable dans l’écosystème PHP, tandis que Tailwind CSS s’est imposé comme un des leader des framework CSS. Associés, ces outils apportent des synergies intéressantes. | |||
There was a problem hiding this comment.
idem, le contenu de l'article va plus loin que ça
article-v2.md
Outdated
|
|
||
| ## Pourquoi associer Tailwind CSS et Twig Components ? | ||
|
|
||
| Symfony est réputé comme un solide framework backend, mais son écosystème frontend est souvent perçu comme limité. Twig, le moteur de templates, fournit une syntaxe plus ou moins apprecié pour vos vues, tandis que Tailwind CSS permet un stylage rapide et cohérent grâce à ses classes utilitaires. |
There was a problem hiding this comment.
C'est subjectif mais je suis pas d'accord avec ce point.
Avec la suite Symfony UX et le fait que Symfony est un framework php on peut pas vraiment dire que son ecosysteme front est pauvre imho. Ils semblent avoir fait beaucoup d'effort dans ce sens et leurs concurrents ne font pas mieux.
Idem pour twig, "plus ou moins apprécié"... C'est un moteur de template comme tu le dis, ça a ses avantages et ses inconvénients.
article-v2.md
Outdated
|
|
||
| Symfony est réputé comme un solide framework backend, mais son écosystème frontend est souvent perçu comme limité. Twig, le moteur de templates, fournit une syntaxe plus ou moins apprecié pour vos vues, tandis que Tailwind CSS permet un stylage rapide et cohérent grâce à ses classes utilitaires. | ||
|
|
||
| Les Twig Components, sont introduits pour encourager la réutilisabilité et la clarté dans les vues, et peuvent s’intègrer harmonieusement avec Tailwind CSS. Tailwind permettent de styliser rapidement les composants Twig, tandis que les Twig Components facilitent la réutilisation de ces composant. |
There was a problem hiding this comment.
Pour moi, ça marche bien parce que :
- Tailwind c'est du inline, tu déclares ton style dans ton DOM/template,
- les twig components permettent d'encapsuler/réutiliser du DOM/template,
- ====> associer les deux permet d'encapsuler a la fois la structure et le visuel d'un composant. Et avec les class components, son comportement aussi.
Enfin c'est ce que j'avais compris quand tu m'as montré votre stack, je pense que c'est ça qui devrait etre mis en avant. C'est tres concret, on peut aller plus loin que de dire que c'est harmonieux et rapide.
J'imagine que c'est ce que tu veux dire ici mais imho c'est un peu vague.
No description provided.