Sommaire
Bonjour bonjour 🙂,
Comment ça va par ici ? Pas trop froid ?
Cette semaine, on replonge dans le monde de Symfony avec un petit article sur les bundles.
Nous allons voir ensemble quels sont les bundles à connaitre quand on est développeur Symfony.
L'idée ici est de vous regrouper, ceux que je vois et utilise le plus souvent dans mes projets.
Ici, nous ne parlerons pas vraiment des bundles qui font partie du "core" de Symfony, comme le "DoctrineMigrationbundle", que vous retrouverez partout.
Vous êtes prêts ? Alors c'est parti !
Dans cette liste, nous allons prendre les bundles les plus présents au moment ou j'écris ces lignes.
Alors lui, sur tous les petits projets de site web, voire même dans les PME, il est partout. 😮 N'avez-vous jamais passé des heures à faire l'interface « back office » du site ou de l'application sur laquelle vous travaillez ?
En version 3 EasyAdminBundle était déjà fou, mais en version 4, il est encore plus fou.
La version 4 par exemple, vous permet de gérer les uploads de fichier, plutôt que de configurer le tout dans un fichier YAML, cela se fera dans des contrôleurs.
Le premier que vous devrez créer sera le "DashboardController"
Celui-ci vous permettra de customiser la "base" de votre interface d'administration.
Vous pourrez par exemple, via le DashboardController, ajouter votre logo, votre nom... etc.
Ensuite, pour chaque entité que vous souhaitez gérer, vous devrez créer un contrôleur qui héritera de "AbstractCrudController", dans lequel vous définirez : les champs à édité et où les afficher, ou encore des "actions" personnalisées... etc.
Un grand classique du monde de Symfony... 😁
En tant que développeur, vous, votre boulot, c'est de créer du code... mais vous en conviendrez votre code interagis toujours avec des données. En production, c'est facile, ce sont les vraies données, mais en dev, c'est plus compliqué.
C'est là que DoctrineFixturesBundle rentre en jeu.
Il vous permet de créer des fixtures, c'est-à-dire des données de test, qui seront insérées dans votre base de données.
Cela vous permettra de tester votre code, sans avoir à créer des données à la main... enfin, si en fait, vous allez coder des classes qui ajoutent des données, mais... avec une bibliothèque comme Faker, vous pourrez générer des données aléatoires, et donc vous concentrer sur votre cœur de métier, le code.
Faites attention tout de même, Faker n'est plus maintenu.
Encore du lourd !
Il y a des tâches répétitives que vous en avez marre d'écrire ? Je ne sais pas moi, par exemple…
Enregistrer la date de création et la date de modification d'une entité, c'est pas mal non ?
Ou encore, avoir un slug automatique pour vos entités...
C'est ce que font les « doctrines extensions », ce bundle, les rend disponibles dans Symfony.
Il fonctionne très simplement, dans un fichier de configuration, vous pourrez choisir les extensions que vous souhaitez utiliser.
Ensuite, dans vos entités, il n'y a plus qu'à importer les annotations (attributs, pour PHP 8+), et c'est parti.
Dans certains, cas, il n’est pas foufou, je pense par exemple, au translatable, qui sur une requête ou vous avez beaucoup de contenu traduit, va faire énormément de requêtes SQL.
C'est pourquoi, dans ce cas d'usage, j'aime bien KNPDoctrineBehaviorsBundle, qui lui, est plus optimisé dans cet usage, mais d'un autre côté, il ne fait pas de slug "unique".
Cela m'est arrivé également de créer mon propre système de translation, dans les projets ou c'est le "coeur" de l'application.
Celui-ci, il a des "fonctions en commun" avec EasyAdminBundle... 😝
Déjà, à quoi sert-il ?
Comme son nom l'indique, à gérer les uploads de fichier, c'est très simple, dans vos entités, vous avez des champs dédiés à ça.
Puis, il s'occupe de les placer ou il faut sur le disque, et bien sûr, si vous utilisez un PaaS, comme Clever Cloud, il vous permettra de les mettre sur le "bucket" compatible AWS.
Rien de bien particulier à dire, je ne l'ai pas utilisé depuis un moment, car sur les projets récents, j'utilise le champ dédié aux images d'EasyAdminBundle.
Il n'en reste que quand on veut faire de l'upload de fichier, ailleurs que dans le backoffice, il est indispensable.
Sa documentation est disponible ici.
La fin des images qui pèsent une tonne. 😝
Souvent, sur les sites, on voit que les images affichées sont redimensionnées par le code du CSS, côté front.
Le problème ? C'est que le navigateur va télécharger l'image en entier, et ensuite la redimensionner.
Et donc ne télécharger une image très grosse pour pas grand-chose, et ça déjà, c'est naze pour la planète et en plus, donne une expérience médiocre à l'utilisateur.
Sur ce site par exemple, vous retrouverez plusieurs fois les mêmes images, dans les catégories, dans les articles... sur la page d'accueil.
Sauf qu’elles n'ont pas les mêmes dimensions sur chacune de ces pages, du coup, plutôt que de les donner tel quel au navigateur, elles sont traitées côté serveur, mises en cache puis distribuées.
Et là, chaque image a la bonne taille pour son emplacement 😁, elle n’est pas belle la vie ?
Il y a encore autre chose, un JPEG, ça peux être optimisé, par exemple avec du "JPEG progressif", qui permet de commencer à afficher l'image en flou pendant qu'elle charge (et pas de haut en bas).
LiipImagineBundle supporte parfaitement l'optimisation avec JPEGOptim, dites-lui simplement, ou est le binaire de JPEGOptim, faites lui un petit espace TMPFS pour ses fichiers temporaires et laisser l’optimisez pour vous vos images, le tout, via la config de LiipImagineBundle.
Et pour aller encore plus loin ?
JPEG est vieillissant, aujourd'hui on retrouve le webp, qui est plus léger, supporte la transparence ... etc.
(Il y a également AVIF, mais pas encore pris en charge à l'écriture de ces lignes)
WEBP est parfaitement géré par LiipImagineBundle, il suffit de lui dire de convertir dans votre filtre, puis avec la balise HTML5, vous pouvez dire aux navigateurs "où trouver le fichier", et ... voilà.
Sur ce site par exemple, toutes les images que votre petit navigateur charge sont en WEBP, merci, LiipImagineBundle.
La connexion avec les réseaux sociaux... simple.
Alors, j'utilisais beaucoup « hwi », mais il m'arrive de passer par knpuniversity/oauth2-client-bundle, car il semble un peu mieux maintenu.
Rien de bien spécial à dire, il faut juste que vous ayez une application (client id et client secret) sur le réseau social que vous souhaitez utiliser, et vous pourrez vous connecter avec.
Cela ne fonctionne pas qu'avec les réseaux sociaux, mais également avec les serveurs "SSO" des entreprises, s'ils respectent le protocole OAuth2.
Attention, certains "SourceOwner" ne sont plus à jour, il peut vous arriver de devoir réimplémenter le vôtre 🙂
Ohlalala, que c'est CHIANT d'écrire un formulaire de réinitialisation de mot de passe...
(Quoi, comment ça ? J'ai été traumatisée ? 😝 Non, c'est juste que ce n’est PAS intéressant... 😁)
Ah ... mais en fait, on n’a pas à le faire, c'est déjà fait, et en plus, c'est bien fait.
Bundle d'une simplicité, on importe, on configure, on adapte les twig et on kiff la vie.
Nos utilisateurs peuvent être tête en l'air s'il le souhaitent et oublier leurs mot de passe (comment ça tout le monde n'utilise pas de gestionnaire de mot de passe ?) et, nous, on peut leur envoyer un mail pour qu'ils puissent le réinitialiser.
Elle n’est pas belle la vie ? Encore un truc chiant qui est fait pour nous, merci symfonycasts/reset-password-bundle.
Je dois avouer que celui-ci me fait sourire, car il me fait penser à la naïveté de certains collaborateurs sur certains projets.
"Mais nonnnn, les gens ne font pas de fautes de frappes dans leurs e-mails, faut pas voir le mal partout...".
"Oui oui 😝, si vous saviez ! 🤣"
Bref, le fait d'envoyer des e-mails a des adresses e-mail qui n'existent pas ou (presque) pire, qui n'appartiennent pas à vos utilisateurs...
Cela réduit votre réputation en tant qu'émetteur, d'e-mail, et, à votre avis, que se passe-t-il ensuite ?
Vous finissez dans le merveilleux dossier SPAM 😎
(À côté d'e-mail obscur vous faisant des propositions indécentes)
Réglons le problème et vérifions les adresses e-mail des utilisateurs avant de leur envoyer des e-mails.
Pas besoin de l'écrire, SymfonyCasts/verify-email-bundle le fait pour nous. 😁
Hop hop hop, la doc, ici, bizoo.
C'est pas super passionnant de réécrire un système de pagination, alors on ne va pas le faire.
(En écrivant cet article, je me dis que nous sommes de grosses feignasses quand même ... 🤣)
Ce bundle, vous lui donnez votre requête, et vous lui dites, "je veux des groupes de X items".
Voilà, fin.
Même s'ils seront très proches du « core » de Symfony, je les mets ici, car avec le temps, vous devriez les rencontrer de plus en plus.
Ils vous permettent de faire une expérience utilisateur, AUX PETITS OIGNONS, avec Symfony.
L'une de mes prochaines applications, en cours de déploiement en production, les utilise.
En plus d'avoir été un plaisir de dev avec, j'adore l'expérience utilisateur ❤️.
Au centre de cet écosystème, on retrouve Stimulus, un framework JS.
Savez-vous pourquoi une SAP (single page application) est rapide contrairement à un "site" classique ?
La raison principale est qu'à chaque changement de "page", votre navigateur recharge (depuis le cache) le CSS et le JS (et donc, je réinterprète).
C'est là que Turbo intervient, de base il est dans l'écosystème de Ruby on Rails, le voici dans Symfony.
Plutôt que de recharger le CSS et le JS, turbo, au "changement de page" ne recharge que le contenu du dom... et là sensation de fluidité et rapidité et ding
(bon, ça vaut si votre serveur répond rapidement, si vous êtes hébergé chez Micheline... ça sera naze.)
Turbo, va plus loin avec les Turbo Frame, et les "Turbo Stream" 😍, je vous laisse découvrir ce que c'est ... dans la doc de turbo.
La méthode "de base" pour faire un "autocomplete"
Le serveur génère le JSON -> l'envoie au client -> le client retransforme ce JSON en HTML -> le client affiche le l’HTML.
Dans Stimulus (et plus même Hotwired), le HTML est au centre, du coup
Le serveur génère du HTML (avec Twig par exemple) -> l'envoie au client -> le client affiche l’HTML.
La simplicité !
C'est un peu le même principe que le précédent, mais avec un peu plus de magie.
Si vous avez des données qui changent souvent, et que vous voulez que votre client les voie en temps réel, c'est pour vous.
Créez un complément, mettez-le à jour côté serveur et ce sera poussé côté client...
Dans les faits, c'est le client qui fait une requête HTTP toutes les X secondes, ce qui peut poser problème lors de la montée en charge...
Dans ce cas, jetez un œil sur symfony/ux-notify et hop là, c'est le serveur qui "push" 😛.
L'écosystème UX, à son propre site, cliquez ici pour le découvrir.
Allons encore plus loin...
C'est très simple, Sylius est le "coeur" de mon premier vrai projet entreprnarial, la fromagerie en ligne des Frères Marchand.
J'y ai bien sûr rajouté des couches maisons, mais le « core » c'est Sylius. et franchement...
Bah, comme d'habitude dans l'écosystème Symfony, ça marche et on ne se prend pas la tête avec des questions inutiles.
Sur la fromagerie en ligne ce sont des dizaines de milliers de visiteurs qui viennent nous voir chaque mois, et ça ne bouge pas.
La logistique est complètement automatisée, Les Frères Marchand reçoivent un rapport clair de « qu'est-ce qu'il faut envoyer et à qui faut-il l’envoyer ».
Et tout ça j'ai pu le faire, car le CodeBase de Sylius est très bien fait, et très bien documenté.
Merci.
Toi aussi tu veux travailler sur une plateforme e-commerce ? Voici le site officiel de Sylius 🙂.
Mais Ludo ?
Le rendu HTML coté serveur c'est bien, mais, pour les applications natives iOS et Android... quoi qu'on fait ?
Ne t’inquiète pas ! On pense à tous dans l'écosystème Symfony !
API Plateforme tu connais ?
C'est un ensemble de bundles qui permet de créer une API REST en quelques minutes.
Directement dans les entités, avec des attributs pour les besoins les plus simples...
Et toujours, customisable pour les plus complexes.
Et, en plus, il vous génère la doc de l'API, et un client pour la tester... c'est les font qui vont être content 🤩
Il permet d'ailleurs à Sylius de faire du headless... (comme quoi, les bonnes choses hein !)
L’écosystème Symfony est très riche, et vous pouvez gagner un temps de fou sur vos projets en profitant pleinement de cet écosystème.
Ici la liste n'est pas exhaustive, mais je pense que c'est déjà pas mal pour commencer.
Nan, mais franchement... rien que Symfony UX 😍...
C'est comme toutes les bonnes choses, une fois qu'on a mis le nez dedans on se dit "euh, c'était comment avant déjà ? Me souviens plus ?"
Passez une très bonne semaine et à la prochaine 😁.