SyliusCon 2023

Emagma était sponsor du SyliusCon 2023, la rencontre internationale qui regroupe les agences, les développeurs et les utilisateurs de la plateforme Sylius.

Cette années, c'est dans la ville de Poznan que la rencontre a eu lieu, une journée et des dizaines de conférences pour se tenir au courant de l'actualité technique et business de Sylius.

Voici nos retours sur les conférences qui ont retenu notre attention !

Event drive layouts with Twig Events - Jakub Tobiasz

Jakub Tobiasz est un développeur très actif au sein de Sylius et a récemment consacré son temps à améliorer la solution.

Dans les sujets qu'il a pu rencontrer se trouve la gestion des templates de la solution.

Le constat est simple : il existe aujourd'hui un système de templates dans Sylius qui permet de modifier l'apparence et l'organisation des contenus, mais il n'est pas parfait et Jakub a réfléchi aux améliorations possibles.

En premier lieu, son approche se focalise essentiellement sur le backoffice, le frontend d'un projet Sylius étant généralement ré-écrit, parfois de façon intégrale, c'est vraiment sur l'espace d'administration que ses efforts se sont portés : comment faire pour qu'un développeur puisse ajouter, déplacer ou supprimer des fonctionnalités, des blocs d'affichage. En bref, comment améliorer la flexibilité du backoffice.

Le constat est assez sévère :

• Le système de template actuel est difficile à étendre quand on veut aller dans le détail, il faut souvent dupliquer des templates twig pour modifier quelques lignes.
• Le débuggage est complexe car il nécessite de faire de nombreux aller-retour entre configuration, système de fichier pour identifier les templates et recherche texte pour comprendre quel bloc est rendu via tel ou tel sylius_template_event.
• L'organisation des templates est perfectible, certains fichiers gagneraient à être redécoupés.
• La configuration des events dans le backoffice se fait dans un fichier events.yaml de plus de 1300 lignes, là encore, cela reflète un manque de découpage et d'organisation
• Dernier point, c'est le routing qui porte de la configuration et des variables qui parfois sont nécessaires dans un bloc twig situé à un niveau imbriqué de la page, cela ajoute de la complexité pour retrouver le lien entre le bloc twig qui attend cette variable et le routing

Au final Jakub apporte plusieurs solutions :

• Réorganiser les templates actuels de Sylius : plus de granularité et une meilleure arborescence
• Définir ce qu'est un bloc : un élément ou un groupe d'éléments que l'on pourrait vouloir déplacer dans la page, surcharger ou supprimer
• Introduire la notion de sylius event block, une proposition technique pour étendre les blocs

La nouveauté pour répondre au challenge des blocs extensibles se nomme Sylius Twig Events : c'est une configuration associée à un Twig component.

La configuration de chaque twig component vient remplacer celle qui était portée par le routing.

Mais au delà de cette réorganisation, cela permet d'utiliser tout le potentiel de Symfony : une extensibilité plus puissante que les sylius_template_event, un meilleur découpage des blocs d'information, des outils de debug puissant via le profiler.

Cela permet aussi d'apporter la puissance des dernières avancées de Symfony UX, comme les Twig Live components.

On doit donc s'attendre à la disparition des sylius_template_events qui n'ont été qu'une étape intermédiaire entre les sonata blocks et les dernières avancées de Twig/Symfony.

À noter que cela permet à Sylius de se délester d'une implémentation spécifique au profit d'outils de l'écosystème Symfony, ça a déjà été le cas pour le composant workflow ou le passage à ApiPlatform, et Sylius profite ainsi de la capacité d'innovation de l'écosystème.

Les slides de Jacub Tobiasz

Common Pitfalls - Mateusz Zalewski + Łukasz Chruściel

Łukasz Chruściel et Mateusz Zalewski sont d'anciens collaborateurs de Sylius (l'entreprise) et proposent désormais leur expertise Sylius au sein des Commerce Weavers.

Dans cette conférence, Lukasz et Mateusz reviennent sur les problèmes de performances d'une part et sur d'autres difficultés que rencontrent parfois les développeurs sur un projet Sylius.

Les problèmes de performance

Le premier sujet est le cas des requêtes n+1.

Lukasz nous montre que sans une attention particulière lors de l'appel à la base de données pour récupérer des commandes, des items et les produits associés, il est très facile de générer un nombre d'appels exponentiel qui impacte sévèrement les performances. Une simple analyse des requêtes effectuées est un premier pas garder un oeil sur les biais introduits via le lazy loading dans les appels bdd.

C'est plus complexe dans le cas des Api puisque la serialisation des relations induit naturellement ce n+1.

L'hydratation des objets ou des DTO est également coûteuse en performances.

Pour faire simple : maîtriser le contenu des requêtes, les relations entre les entités et le lazy loading, solliciter uniquement la donnée utile, n'hydrater que ce qui vous est utile permet d'éviter un des principaux problème de performance rencontré dans les projets Sylius.

Le deuxième problème concerne les sites à fort trafic et la concurrence générée par un grand nombre de clients autour d'actions bloquantes.

Mateusz prend l'exemple de la génération du numéro de commande. Le numéro d'une commande repose sur un principe séquentiel : il faut attendre d'avoir généré un numéro de commande avant de passer au suivant.

Mais faut-il vraiment bloquer l'enregistrement des commandes en attendant qu'un numéro leur soit attribuer ? La réponse est non, il est possible - et c'est acceptable du point de vue UX e-commerce - de différer le calcul du numéro de commande via un queueing et de privilégier la persistence des commandes.

La 3ème limitation qui impacte les performances d'un Sylius réside dans le système d'inventory unit. Ce système permet de gérer un par un les items d'une commandes, pour par exemple permettre de n'en livrer qu'une partie, ou encore d'indiquer que certains items sont livrés à partir d'un entrepôt et le reste à partir d'un autre lieu de stockage.

Sur le principe, ce système d'inventory unit est bien architecturé et fonctionnel, mais dans la réalité, cette gestion nécessite beaucoup de requêtes et alourdit le traitement des commandes.

Hors de nombreux e-commerce n'ont pas besoin de ce découpage fin, le conseil de Lukasz est de le désactiver tant qu'il n'est pas vraiment utile, le passage et la gestion des commandes n'en sera que plus performant. A terme, ce serait une amélioration à apporter à Sylius : désactiver par défaut le système de gestion des inventory unit et ne l'activer qu'en cas de besoin.

Autre point nécessitant un travail de la part des équipes de Sylius : l'order processor. C'est la pièce maîtresse dans laquelle le contenu d'une commande est modifié et consolidé avant enregistrement.

L'order processor est une solution fonctionnelle, mais très lourde en pratique car chaque modification du panier lance une série de calculs complexes et répétitifs, voire qui peuvent aboutir à des incohérences si la communication entre Doctrine et la base de donnée rencontre des erreurs.

Trouver un autre moyen que l'effacement de tous les adjustments avant recalcul permettrait d'améliorer les performances du tunnel d'achat.

Autres difficultés rencontrées par les développeurs

La conférence évoque d'autres sujets tels que la forme des tests dans les projets - phpspec vs phpunit notamment, ce dernier gagnant du terrain dans la core team, ou simplement le constat qu'on peut réussir un projet sans faire de tests behat.

Dans un autre registre, le fait de pouvoir tester la documentation serait un plus qui se pratique déjà chez Symfony.

Le système de paiement Payum est régulièrement critiqué pour le manque de clarté qu'il induit lors de l'intégration d'une passerelle de paiement. Le sujet a été discuté par la core team et une nouvelle façon de traiter les paiement est en cours de développement avec des objectifs clairs : rationnaliser ce que doit être l'intégration d'une passerelle, disposer d'une meilleure traçabilité en cas d'erreur, pouvoir identifier les capacités de chaque PSP, et bien sûr disposer d'un suivi et d'une documentation meilleures que celles de Payum. Bonne nouvelle !

Enfin, le système de ressources présent dans Sylius depuis ses débuts est en phase de refonte, un travail mené par Loïc Frémont dont nous avons déjà parlé ici et que vous pouvez voir sur Youtube dans une conférence précédente sur le développement de Sylius. La version stable du resourceBundle v2 est prévue pour 2024 Q1.

En conclusion de leur conférence, Mateusz et Lukasz insistent sur le fait que leurs remarques ne sont pas des critiques : Sylius est une super solution, mais il y a des points d'amélioration et il suffit de les adresser pour que la DX de Sylius déjà excellente progresse encore.

Les slides de la conférence Sylius Common pitfalls : nous les recherchons, merci de me contacter sur Twitter @loic_emagma

What you need to know about building headless Storefront? - Filip Rakowski

Filip Rakowski est le fondateur de VueStoreFront, une solution frontend initialement basée sur VueJS et Nuxt pour réaliser une application e-commerce réactive.

La SyliusCon n'est pas au premier abord l'événement le plus évident pour parler de frontend réactif... sauf à annoncer la publication en open source du SDK Sylius / VueStoreFront qui permet de rapidement démarrer un projet Sylius avec un front réactif !

Pour faire un résumé en quelques mots de la conférence :

• VueStoreFront repose sur la séparation des données disponibles - exemple : Sylius pour les données e-commerce, un CMS pour les données de contenus... - puis de l'intégration de ces données dans une couche dédiée, et enfin de l'exploitation des données dans le frontend à proprement parler.
• La principale erreur généralement commise par les développeurs frontend est de mélanger le travail sur la donnée (orchestration layout) et sa restitution sur le frontend, l'architecture de VSF est conçue pour limiter ce piège
• La mise en oeuvre d'un e-commerce headless et d'un frontend réactif n'est pas une solution pour tous les projets, il faut y trouver un argument de valeur, par exemple
  • Améliorer une partie précise d'une application
  • Migrer pas à pas vers une autre plateforme
  • Mettre en oeuvre plusieurs canaux de ventes d'une même entreprise (même données, plusieurs sites e-commerce)
  • Disposer d'une application mobile à côté du e-commerce web
• Les solutions frontends n'ont pas d'intérêt ou davantage particulier pour vos clients : ce qui compte pour eux, c'est que l'expérience de navigation soit rapide, claire et donne envie de revenir.
• Du point de vue du développeur, on veut par contre que l'expérience de développement soit agréable, et future proof, c'est-à-dire que les choix techniques soient pérennes
• Contrairement à son son, VueStoreFront est framework agnostic : les briques les plus basses sont codées en Typescript et c'est le front qui permet d'utiliser soit VueJS, soit React, ou encore Qwik, le petit dernier.

Filip revient ensuite sur un point souvent négligé des frontend e-commerce : les webperfs. Et la solution est simple : plus il y a de JS dans votre page, plus le navigateur dépensera de la capacité de calcul pour le mettre disponible à l'internaute.

Ce constat prend des proportions non négligeables lorsque l'on parle de smartphones qui ne sont pas les plus performants du marché.

C'est sans doute selon Filip une des plus grandes erreurs de design des dernières années : les Single Page Application SPA ont du plomb dans l'aile car elles impliquent d'avoir un payload important de javascript pour fonctionner.

Des solutions existent pour n'activer le Javascript d'un composant seulement après une interaction de l'utilisateur ou à son affichage dans la zone active de la page.

Autre astuce donnée par Filip, nous savons que malgré tous les efforts possibles pour optimiser les performances d'un site, les équipes marketing vont probablement avoir besoin de plusieurs solutions de suivi et d'interaction qui vont détruire nos efforts. Pour ces cas, nous pouvons nous tourner vers Partytown, une solution qui isole les scripts marketing dans un thread qui n'impacte pas le reste du javascript "nécessaire" à l'expérience.

Les slides de la présentation VueStoreFront... coming soon !

Let me shop with ease! Accessibility myths in e-commerce - Anna Karoń

Anna Karoń est développeuse frontend et spécialiste de l’accessibilité chez Snowdog. Si le sujet est connu, force est de constater qu’il n’est pas suffisamment considéré comme stratégique dans de nombreux projets e-commerce.

Dans sa conférence, Anna nous fait donc l’une de ces piqûres de rappel qui font du bien :

• L’accessibilité ne concerne pas que les publics handicapés, elle est une pratique inclusive qui permet à tous, le meilleur usage d’internet. Dehors les idées reçues faisant référence aux seuls malvoyants/non voyants, aux rares internautes ou aux phrases trop souvent entendues « les personnes en situation de handicaps n’utilisent pas mon site » !
• Trop souvent oubliés, les neuroatypiques, les personnes présentant des fragilités ou des limitations temporaires (ex: dépression...) ou encore les personnes âgées représentent un large public – et donc un pouvoir d’achat - qui ne doit plus être ignoré. Anna avance le chiffre de 196,13 millions d’Européens en 2022 qui pourraient être concernés par l’accessibilité soit un marché de près de 179,8 billions d’Euros.
• L’accessibilité n’est pas non plus le seul apanage des administrations ou de développeurs zélés.
• Alors comment faire pour une véritable accessibilité pour tous ? Opter pour un vrai travail d’UI, clair, compréhensible, contrasté, agrémenté de médias aux formats adaptés et penser à mettre à jour ce travail comme vous le feriez pour n’importe quelle feature !
• Pour s’assurer du meilleur travail, 2 mots d’ordre : tester et auditer. Si l’outil A11y est une base, les test automatiques ou manuels et surtout ceux des utilisateurs apporteront la meilleur valeur.
• L’arrivée en juin 2025 de la directive European Accessibility Act (EAA) va permettre de faire un bon en avant sur le sujet de l’inclusion numérique.

Ce que je retiens au final de cette intervention pour notre approche de développement et pour les conseils à nos clients EMAGMA, ce sont les avantages de la démarche d'amélioration de l'accessibilité : des sites pour tous, de nouveaux clients à conquérir et fidéliser le tout doublé d’un meilleur référencement et d’une image de marque au top !

Les slides de la conférences

Sylius and web performance - Olivier Allain and Héléna Gravelier

Dans cette conférence, nos amis Olivier Allain et Héléna Gravelier de Synolia reviennent sur l'importance des performances web d'un e-commerce et se posent la question des solutions pour améliorer les perfs d'un projet Sylius.

Après un bref rappel des core web vitals, le système proposé par Google pour mesurer la qualité de prise en main d'une application par un utilisateur - vitesse de chargement, stabilité visuelle, interactivité, Olivier et Héléna s'arrêtent sur le TTFB - Time To First Bit - qui représente le temps d'attente entre l'utilisateur qui demande une page, et les premiers octets envoyés par le serveur au navigateur.

Par défaut, sans optimisation particulière, le TTFB d'un projet Sylius - qui repose sur Symfony - est de quelques dizaines de millisecondes.

Mais ce chiffre se dégrade rapidement lorsque la concurrence entre utilisateurs simultanés grandit : plus le nombre de visiteurs de votre site grandit et plus le temps de réponse TTFB grandit, au point de représenter un véritable blocage pour l'expérience utilisateur.

Nous savons tous qu'à ce jeu, chaque milliseconde compte et impacte le business d'un ecommerce.

En somme, voici les remarques des speakers :

• Rajouter des serveurs ne permet pas d'améliorer efficacement ce constat, et cela coute très cher
• Un des principaux point de ralentissement des application est le requêtage en base de données, on peut donc chercher à optimiser et mettre en cache les requêts doctrine, mais cela peut induire des effets de bord, et cela complexifie le fonctionnement et la maintenance de l'application, une option à retenir dans des cas biens précis
• Symfony propose aussi un cache dont Sylius profite nativement, c'est une solution intéressante qui propose aussi des outils développeur pour suivre son fonctionnement

Mais la solution la plus efficace reste la mise en place d'un reverse proxy tel que Varnish.

Sur ce constat, d'autre points sont soulevés par Olivier :

• Varnish gère très bien la concurrence et la montée en charge : la mise en cache réduit le nombre d'appels à l'application et permet de servir un nombre d'appels incomparable
• On peut être tenté d'utiliser les ESI pour distinguer les portions de page qui contiennent des données personnalisées, mais cela entraîne des effets de bords comme le fait pour varnish de devoir attendre la résolution de tous les ESI avant de restituer la réponse au navigateur.
• Une solution pour remédier à ce point est d'utiliser la réactivité
• Et enfin Varnish demande des compétences spécifiques, prévoyez un temps d'apprentissage pour sa mise en oeuvre et son monitoring

Je vous invite à voir les slides de la présentation pour les nombreux autres sujets qui sont abordés : gestion des cookies, gestion des headers, groupes de pages etc.

Les Slides : on les cherche, envoyez-moi un message sur Twitter @loic_emagma

Community & Chaos: Why Open Source Wins Commerce - Ben Marks

Après un bref résumé de son parcours professionnel de la musique à l'e-commerce en passant par Magento, Ben Marks nous livre sa vision des challenges et des forces de l'Open Source dans le monde e-commerce actuel.

Sa conférence teintée d'humour a le mérite d'ouvrir la réflexion sur les problématiques auxquelles les plateformes e-commerce doit répondre de nos jours.

En effet, les différentes plateformes tendent à devenir des produits de plus en plus complets sans parvenir à adresser tous les besoins de nombreux clients. Comme le souligne Ben, si une plateforme SaaS comme Shopify répond à tous les besoins fonctionnels d'un client, il n'est pas nécessaire d'aller chercher plus loin. Mais que se passe-t-il si ce n'est pas le cas ?

C'est alors que le “chaos” commence, il faut identifier les besoins spécifiques du client et trouver des solutions pertinentes. Les projets e-commerce sur-mesure permettent de construire ce que le client souhaite et c'est là que l'Open Source a des cartes à jouer.

Ben rappelle que faire du e-commerce en 2023 c'est faire face à des changements permanents. Les transformations et les nouveaux besoins du e-commerce impliquent une approche toujours plus centrée sur les besoins de chaque client.

Dans nos métiers d'agence web, notre rôle est de proposer un accompagnement de qualité pour apporter à nos clients de la valeur ajoutée.

Cette valeur ajoutée est essentielle et passe par deux points clés :

• la flexibilité, soit la capacité à s'adapter aux divers enjeux du projet
• la rapidité à innover, c'est-à dire la capacité à développer et livrer rapidement de nouvelles fonctionnalités

Pourquoi l'Open Source a les atouts de relever ces défis selon lui ?

Ben identifie deux grands points forts des solutions Open Source pour les challenges de demain :

• un écosystème fort : dans bien des cas, on constate que la meilleure solution est à l'intersection entre la plateforme et ecosystème car c'est tout l'écosystème qui va bénéficier au projet
• la flexibilité : les solutions Open Source comme Sylius ou Magento sont un point de départ avec des pièces changeables et "customisables". C'est notamment la force de Sylius de proposer les briques e-commerce de base sans avoir la lourdeur d'une plateforme surdimensionnée ou peu performante. Cette capacité d'adaptation aux nouveaux besoins techniques et fonctionnels (je peux avoir besoin d'une architecture microservices, d'une PWA, d'un site en headless par exemple...) est un atout pour les plateformes e-commerce et leur évolutivité.

La conférence de Ben nous a proposé un temps recul dans la bonne humeur pour réfléchir sur les solutions et les problématiques du e-commerce d'aujourd'hui et de demain.

Ce que je retiens de cette conférence, c'est que la force de l'Open Source et de solutions e-commerce comme Sylius réside dans leur capacité à se transformer pour répondre encore et toujours aux besoins des clients. Un écosystème solide et une communauté active comme celle de Sylius sont un atout majeur pour des projets avec des besoins sur-mesure ainsi que des enjeux de flexibilité et d'innovation rapide.

Les slides de Community & chaos: faites moi signe sur Twitter @loic_emagma