Symfony & Mercure, mais pas que...

Dans le cadre du Meetup organisé à Aix-en-Provence chez Voyage Privé, j'ai présenté l'utilisation de Mercure couplé à Symfony

Transcript

1. Symfony & Mercure mais pas que… 19/05/2022 - ACSEO
2. Faire un talk Un drame en deux actes 2 Rejoignez nous sur https:/ /aixmarseille.tech et vous aussi lancez-vous !
3. ACSEO ACSEO est une agence digitale et technique spécialisée dans la conception et la réalisation d’applications web et mobile à forte valeur ajoutée. Nous sommes partenaires de : 13 ans d’expertise 37
4. 4 Nous regroupons toutes les compétences pour mettre en place un projet de A à Z, de sa conception jusqu’à sa mise en production / exploitation. Travailler chez ACSEO, c’est : - Des bureaux disponibles à Aix et Montpellier - Télétravail à volonté - 1j de congé supplémentaire par année d’ancienneté - Des opportunités de création de startup - Avoir des patrons qui savent coder Conception & développement Hébergement, DevOps, Infogérance Efficient & Sustainable Cloud Coding Protocode https:/ /www.keenobi.com https:/ /protocode.tech
5. Le contexte 5 Comment on fait pour avoir du live dans nos apps ? fullstack ou Sur le Web c’est compliqué… …alors que sur mobile c’est la base back (api) front (js)
6. Du Live ? 6 Pourquoi cela peut être intéressant Eviter des timeouts et réduire la charge sur vos applications Préparer des traitements “lourds” (PDF, Graphique) et les transmettre quand ils sont prêts Pousser de l’information à des clients plutôt que ces derniers viennent la “tirer” à intervalles réguliers Utiliser une logique asynchrone et faire du live dans son application peut avoir de multiples intérêts :
7. Mercure 7 Mercure is an open protocol for real-time communications designed to be fast, reliable and battery-efficient. It is a modern and convenient replacement for both the Websocket API and the higher-level libraries and services relying on it. Mercure is especially useful to add streaming and asynchronous capabilities to REST and GraphQL APIs. Because it is a thin layer on top of HTTP and SSE, Mercure is natively supported by modern web browsers, mobile applications and IoT devices. https:/ /mercure.rocks Mercure est un protocole créé par Kevin Dunglas (Les-Tilleuls) Il permet, via un Hub, de pousser des mises à jour vers des navigateurs et app mobiles (Server-Sent Events) Mercure est hyper bien intégré dans l’écosystème Symfony, et de ses composants.
8. Principe de fonctionnement 8 Client (Subscriber) Publisher GET /hub?topic=event-{id} 200 OK. Content-Type : text/event-stream POST /hub topic=event-goal&data=dieng Event POST /hub topic=event-save&data=steve Event EventSource en js Stade (Hub)
9. Faire tourner un Hub Mercure 9 Démarrage d’un hub mercure en local https:/ /mercure.rocks/docs/hub/install Consommation du conteneur
10. Installer et utiliser Mercure 10 symfony / mercure-bundle permet de très facilement installer les outils nécessaires pour interagir avec mercure via Mercure Bundle
11. Premier cas d’usage 11 Je développe un site e-commerce, et je veux notifier les internautes lorsqu’un produit qu’ils consultent vient d’ être acheté ou ajouter au panier Mercure Dimitri Dimitri vient d’ajouter ce produit à son panier, vite dépêche toi d’acheter toi aussi Mattéo Cergiz Page produit X Page produit X Steve Page produit X Page produit X
12. Étape 1 : Listener et notification 12 Nous allons nous baser sur les évènements génériques mis en place par Sylius pour déclencher un message à chaque fois qu’un produit est ajouté dans un panier. Notre Update doit contenir : - Le topic de l’update - Le contenu de l’update - Un 3ème argument (public / privé) Dans cet exemple, nous passons par le Hub (appel synchrone). C’est la façon recommandée de faire. https:/ /symfony.com/doc/current/mercure.html#publishing Comportement du Listener Déclaration du Listener
13. Étape 2 : Ecouter les notifications 13 Nous allons nous baser sur les évènements génériques mis en place par Sylius pour ajouter un bloc de contenu dans la page de produit Notre template va: - Récupérer l’id du produit consulter - Lancer une écoute sur le topic product-id - Faire afficher une notification lorsqu’un événement se produit Cet exemple est en vanillajs. mercure-bundle est la seule dépendance ajoutée au projet. https:/ /docs.sylius.com/en/1.11/customization/template.html Contenu du bloc Ajout d’un bloc sur la page produit
14. Démo pas en live du tout 14 Dimitri Mattéo
15. Premier cas d’usage : Bilan 15 C’EST COOL C’EST BOF - Hyper facile de rajouter mercure et mercure-bundle dans son projet - Très peu de code coté backend pour produire une notification - On a écrit du javascript - On a pas été véritablement asynchrones
16. Je dois construire un dashboard avec des statistiques très coûteuses à construire, et je veux que les infos s’affichent et se mettent à jour au fur et à mesure sur l’écran de mes utilisateurs GET /big-dashboard Deuxième cas d’usage 16 GET /big-dashboard LE DASHBOARD DU MERCATO 3000 requêtes, timeout, etc. LE DASHBOARD DU MERCATO C’est la fête
17. Deuxième cas d’usage : principe 17 Étape 1 Charger une page et déclencher les messages de génération des graphiques Étape 2 Générer des graphiques Envoyer des notifications quand les données sont prêtes Étape 3 Récupérer et faire afficher les notifications dès lors qu’elle sont prêtes symfony / messenger symfony / ux-turbo symfony / ux-chartjs dunglas / mercure symfony / mercure-bundle
18. Étape 1 : Message & Handler 18 Nous allons implémenter un MessageHandler dont la fonction sera de : - Appeler le service de génération de graphe - Rendre ce Graphe à l’aide de Twig - Diffuser l’information via Mercure Logique de traitement Mettre le traitement async
19. Étape 2 : Génération d’un graphe 19 Grâce à Symfony UX / Chart.js Coté PHP Coté Twig Résultat
20. Étape 3 : Remontée d’info au client 20 Grâce à Symfony UX / Turbo dashboard/index.html.twig chart.html.twig utilisé par le MessageHandler et envoyé au client via Mercure
21. Démo pas en live du tout 21 Étape 1. Chargement de la page (vide) et lancement des messages Étape 2. Au fur et à mesure que les messages sont consommés, les notifications mercures sont envoyées et les graphiques apparaissent Étape 3 . Les graphiques sont chargés. En cas de mise à jour, les graphiques se mettent à jour automatiquement (et Pablo est content)
22. Deuxième cas d’usage : Bilan 22 C’EST COOL C’EST BOF - On n’a pas écrit de Javascript - On utilise Symfony UX Turbo, qui nous permet d’avoir des zones de contenus dynamiques - On a écrit la logique de broadcast des mises à jour
23. Étape 3. Création des blocs dans Player.stream.html.twig Broadcast automatique avec Doctrine 23 https:/ /symfony.com/bundles/ux-turbo/current/index.htm Étape 1. annotation #[Broadcast] Étape 2. turbo_stream_listen
24. Démo pas en live du tout 24 OM BACK OFFICE
25. Conclusion 25 Nous avons vu une partie de ce que propose Mercure et Mercure Bundle, mais il en en existe encore d’autres : - La gestion de la sécurité (Subscriber, Publisher) - Reprise des messages précédents (Last-Event-ID) - Intégration avec API Plaform - Gestion des publications publiques / privées - etc. Jetez un œil à Symfony UX car il y a pleins de choses qui bougent : - Symfony UX Twig Components, - Symfony UX Live Components Utiliser Mercure et Mercure Bundle c’est super simple et c’est bon de l’avoir en tête car cela peut répondre à des cas d’usages sur vos projets
26. Merci pour votre attention Des questions ? Symfony et Mercure
27. One more thing 27 Nous avons vu qu’il est possible d’utiliser Mercure pour générer des interactions sous la forme de notifications. Des notifications, il y en a peut être déjà sur votre projet, comme par exemple des emails. Vous avez dit notifications ? Et bien, il est aussi possible d’utiliser Mercure avec le composant Notifier de Symfony
28. Symfony Notifier & Mercure 28 Step 1. Installation et configuration de Notifier Step 2. Déclenchement d’une notification