Vous cherchez à intégrer rapidement et facilement du front dans un projet ? Surtout si vous êtes un développeur orienté backend ? Et tout ça en vous débarrassant de toutes dépendances à Node ? Laissez-moi vous présenter un combo qui vous fera gagner du temps et qui vous rendra la vie plus facile : TailwindCSS et DaisyUI couplés à AssetMapper.
Plus de node_modules immense à maintenir, plus de fichiers de configuration obscurs. Nous allons voir dans cet article des framework CSS et comment intégrer dans un projet Symfony avec AssetMapper, en quelques commandes et avec le minimum de lignes possible.
Depuis de nombreuses années, Webpack Encore est le standard en termes de gestion des assets mais récemment un nouveau venu du nom d’AssetMapper vient simplifier la vie des développeurs.
Depuis plusieurs années, Webpack Encore est le standard pour compiler du JavaScript, Sass, etc. C’est un bundle qui utilise Webpack dont le rôle est de créer des bundles JavaScript. Concrètement, Webpack importe des fichiers d’entrée en tant que modules avec des processus comme de la compilation ou de la minification. Ces fichiers peuvent être du JavaScript, du SCSS, des PNG et bien d’autres types encore. Ils sont fusionnés en un ou plusieurs fichiers de sortie nommés output et ces fichiers qui seront appelés dans les pages HTML via les balises <link> et <script>.
L’avantage principal est qu’il n’y a pas besoin de recharger la page entière lors d’une modification, même minime, ce qui permet de réduire le temps de chargement. Néanmoins, le problème de Webpack est qu’il a besoin de Node.js et par conséquent du dossier node_modules qui peut allonger le temps de build si sa taille est grande. De plus, la maintenance et les fichiers de configuration peuvent nous rendre la tâche plus complexe.
Symfony 6.3 introduit AssetMapper qui a une politique de « zero-build ». En effet, ce dernier se débarrasse de la notion de build. Comment ça marche ? AssetMapper transpose les fichiers présents dans le dossier assets/ vers le dossier public/assets/. Cela permet de rendre vos scripts et images immédiatement disponibles pour le navigateur, sans avoir à maintenir un processus de build global à chaque modification.
Cela met également fin à la dépendance à Node. Plus besoin d’installer Node.js, plus de commandes npm, plus de node_modules. Autre avantage, AssetMapper utilise les Import Maps qui téléchargent seulement les modules nécessaires plutôt que de fusionner tous les fichiers JS.
Les performances sont aussi augmentées grâce au versioning. Si on modifie app.js le nom du fichier généré aura un nom différent (ex : app.sd5d2.js). Le navigateur garde les fichiers en cache et procède à la mise à jour quand il détecte une modification. Seule la partie changeante est modifiée, ce qui ne bouge pas reste en cache.
Son intégration dans Symfony se fait en une ligne de commande :composer require symfony/asset-mapper symfony/asset symfony/twig-pack
Une fois la gestion des assets simplifiée, nous pouvons nous concentrer sur le style pur avec TailwindCSS. Un framework offrant une flexibilité plus grande directement dans les fichiers HTML.
TailwindCSS est un framework CSS dit « utility-first », c’est-à-dire qu’il a pour but de tout centraliser dans le fichier HTML (ou Twig dans le cas de Symfony). Tailwind propose des classes utilitaires qui sont comme des raccourcis vers des propriétés CSS.
Par exemple la classe flex donne la propriété display-flex, mb-x donne la propriété margin-bottom : x.
Désormais, dès que l’on veut styliser notre page, on a juste à mettre la classe voulue dans le champ class. Plus besoin de créer un fichier CSS de quelques lignes tout en cherchant un énième nom pour nos classes. Le bundle s’en retrouve plus léger, le moteur Tailwind scanne les fichiers Twig et génère un fichier CSS qui comporte seulement les classes dont on a besoin.
Le responsive et les interactions aussi sont aussi simplifiés avec les préfixes comme md : w-full md:w-1/2 qui par défaut prend toute la largeur mais sur un écran qui rentre dans la taille de md la largeur sera la moitié. Même fonctionnement pour hover : bg-blue-500 hover:bg-blue-700.
Maintenant que vous êtes familier avec Tailwind, installons le dans un projet Symfony :composer require symfonycasts/tailwind-bundlephp bin/console tailwind:init
La première commande va installer le bundle Tailwind et la deuxième va initialiser la configuration. Depuis la version 4 de Tailwind, le fichier tailwind.config.js n’est plus généré car il se veut « CSS-first ». Suite à cette commande, l’import de Tailwind va être injecté dans le fichier app.css.
Ensuite il faut inclure le fichier dans le base.html.twig
Après cela, vous pouvez lancer la commande pour observer les changements et recompiler quand c’est nécessaire :php bin/console tailwind:build –watch
Nous avons maintenant à notre disposition toutes les classes utilitaires de Tailwind, utilisables dans les fichiers HTML et Twig comme dans les contrôleurs. Voici un exemple simple qui ajoute du margin-bottom et une couleur de fond orange :
Sur des composants complexes, Tailwind peut vite devenir verbeux et remplir de manière conséquente les fichiers HTML/Twig. La structure de l’HTML devient confuse et changer une classe présente dans plusieurs composants éparpillés demande une grande rigueur. La solution ? @apply. Tailwind permet de fusionner des classes utilitaires dans une classe CSS personnalisée via la directive @apply.
Néanmoins, il ne faut pas en abuser sinon on perd l’intérêt de Tailwind et on revient à du CSS classique. @apply reste pratique pour des composants répétitifs comme des liens par exemple.
Certains plugins aident à l’organisation comme Prettier pour TailwindCSS. Ce plugin trie les classes selon un ordre particulier : les classes qui ont un grand impact sur la mise en page d’abord puis les classes qui sont seulement décoratives.
Mais il existe une librairie qui peut pallier ce problème : DaisyUI.
Malgré les qualités de Tailwind, ce dernier peut s’avérer verbeux. C’est ici que DaisyUI entre en jeu. Cette surcouche de Tailwind permet de condenser des dizaines de classes utilitaires en un seul composant.
DaisyUI est un plugin de TailwindCSS, c’est une librairie de composants. Il faut imaginer Tailwind comme le moteur et DaisyUI comme la carrosserie. Ce dernier propose des noms de composants sémantiques. Au lieu d’écrire un bouton class="inline-block px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800" on peut simplement écrire class="btn btn-primary".
Bien sûr tout est personnalisable mais au moins nous pouvons construire rapidement des composants avec quelques classes. Je vous mets l’exemple de la documentation officielle qui est assez démonstratif. Voici le visuel du composant souhaité :
Son HTML avec Tailwind :
Son HTML avec Tailwind + DaisyUI :
Nous pouvons voir qu’avec DaisyUI nous gagnons pas mal de lignes de code et c’est beaucoup plus lisible. Et vu que c’est un plugin PHP, tout ce que j’ai mentionné au-dessus comme la directive @apply est utilisable.
Voici quelques autres avantages de DaisyUI :
Installons DaisyUI dans un projet Symfony. Pour ce faire on passe par AssetMapperbin/console importmap:require daisyui@latest
Puis on ajoute cette ligne dans app.css (le fichier cible peut changer selon la version)@import "../vendor/daisyui/daisyui.min.css";
Tout comme Tailwind, DaisyUI est installé en quelques secondes !
Maintenant, je peux styliser un bouton en quelques classes :
Et voilà ! Ce combo AssetMapper, Tailwind et DaisyUI, c’est un vrai soulagement pour ceux qui, comme moi, préfèrent passer leur temps sur du code métier plutôt que de se battre avec des configs JS interminables. Pas de commandes npm à lancer, pas de gros fichiers de configuration. On peut maintenant styliser notre application avec les composants de DaisyUI et les classes utilitaires de Tailwind.
AssetMapper est spécifique à Symfony mais TailwindCSS et DaisyUI s’intègrent facilement dans n’importe quel autre framework. Cet article est une introduction à ces technologies et peut-être qu’elles vous seront utiles un jour. Moi je les utilise maintenant dans tous mes projets chez Adimeo.
Crédit photo : Deagreez