Pourquoi avoir choisi Sylius pour le d&eacute;veloppement de votre solution ? Pouvez-vous aussi d&eacute;crire le contexte qui a abouti &agrave; notre intervention ?


Quel est votre bilan sur le court terme, les premier m&eacute;triques constat&eacute;s ?


Nicolas, pouvez-vous vous pr&eacute;senter ainsi que votre projet ?


Comment voyez-vous l'avenir et les prochaines &eacute;volutions de votre projet ?


Pouvez-vous nous situer le contexte technique de votre projet ?


Découvrez sur le blog une nouvelle étude de cas réalisée avec un de nos clients, <a rel="noreferrer noopener" href="https://www.rapid-flyer.com/" data-type="URL" data-id="https://www.rapid-flyer.com/" target="_blank">Rapid-flyer.com</a>. Dans cet article, nous partons à la rencontre de <a href="https://www.linkedin.com/in/nicolas-mathieu-38853a6" data-type="URL" data-id="https://www.linkedin.com/in/nicolas-mathieu-38853a6" target="_blank" rel="noreferrer noopener">Nicolas Mathieu</a>, CEO de cette société fondée il y a presque 20 ans, qui revient sur les différents choix techniques qui ont abouti à notre collaboration et au développement actuel de ce projet e-commerce. 



<h2>Nicolas, pouvez-vous vous présenter ainsi que votre projet ?</h2>



Je suis Nicolas Mathieu, CEO de <a rel="noreferrer noopener" href="http://rapid-flyer.com" target="_blank">rapid-flyer.com</a> depuis 2019, un site e-commerce qui propose de l’impression en ligne pour tout type de format : dépliants, banderoles, bâches… Rapid-flyer.com est une marque créée par Kali Communication en 2003 avec la promesse suivante : livrer un produit de qualité avec rapidité.



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="214" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2022/01/logo-rapid-copie-1024x214.png" alt="" class="wp-image-4335" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2022/01/logo-rapid-copie-1024x214.png 1024w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2022/01/logo-rapid-copie-600x125.png 600w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2022/01/logo-rapid-copie-300x63.png 300w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2022/01/logo-rapid-copie-768x160.png 768w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2022/01/logo-rapid-copie.png 1532w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2>Pouvez-vous nous situer le contexte technique de votre projet ?</h2>



Quand je suis arrivé au sein de rapid-flyer.com en 2019, j’ai pu constater du côté de l’IT une dette technique assez impressionnante, une innovation technologique pouvant être fort améliorée aussi bien au niveau de l’architecture que de l’expérience utilisateur. Dans notre secteur, si nous sommes à la traîne on en paye vite le prix alors nous avons retroussé nos manches et avons constitué une équipe technique (1 CTO, 3 dev back + 1 front) pour établir une refonte de notre plateforme qui était initialement basée sur Prestashop 1.6.



<h2>Pourquoi avoir choisi Sylius pour le développement de votre solution ? Pouvez-vous aussi décrire le contexte qui a abouti à notre intervention ?</h2>



<a href="https://sylius.com/fr/" target="_blank" rel="noreferrer noopener">Sylius</a> est une solution innovante techniquement, en phase avec la promesse de notre marque (rapidité et qualité). Nous n’avions pas besoin de réinventer la roue même si notre métier est complexe (plus de 300000 combinaisons et produits possibles). En complément de notre équipe, Les-Tilleuls.coop est intervenu pendant quelques mois sur le projet. Il nous fallait quelqu’un d’opérationnel rapidement et qui connaissait bien Sylius. La refonte et le passage sous ce framework a démarré au dernier trimestre 2020 et notre MVP a été livré en mai 2021. Là, en ce moment, c’est la V4 qui tourne.



<h2>Quel est votre bilan sur le court terme, les premier métriques constatés ?</h2>



Nous avons rapidement constaté que le travail mené était nécessaire parce que nos clients nous remontent souvent que notre site est simple et efficace, qu’il va droit au but. Le taux de rebond s’est nettement amélioré, le temps de chargement de la page également.&nbsp;



L’expérience e-commerce est très satisfaisante et avec un outil aussi facilement maintenable que Sylius, nos paris ont été parfaitement tenus : nous pouvons faire évoluer notre plateforme beaucoup plus facilement et même du côté de nos recrutements, nous avons gagné en attractivité.



<h2>Comment voyez-vous l&rsquo;avenir et les prochaines évolutions de votre projet ?</h2>



Parmi nos prochains projets, et toujours dans une logique d’amélioration continue, nous pensons qu’il serait intéressant de dupliquer notre API et la mettre à disposition pour une multitude de plateformes e-commerce. 







Merci Nicolas pour ce témoignage ! Vous aussi, vous avez besoin d&rsquo;un accompagnement sur votre projet ? <a rel="noreferrer noopener" href="https://les-tilleuls.coop/fr/contact" target="_blank">Contactez-nous</a>, nous nous ferons un plaisir de vous aider !

Étude de cas : Rapid-flyer.com x Les-Tilleuls.coop

Une m&ecirc;me ressource, des repr&eacute;sentations diff&eacute;rentes


GET /blog/a-propos-des-requetes HTTP/1.1
Host: exemple.com
Accept: application/json

HTTP/1.1 200 OK
Content-Type: application/json

{
  "title": "A propos des requetes",
  "...": "..."
}

GET /blog/a-propos-des-requetes HTTP/1.1
Host: exemple.com
Accept: text/html

HTTP/1.1 200 OK
Content-Type: text/html

&lt;!DOCTYPE html>
&lt;title>A propos des requetes&lt;/title>
&lt;!-- yes, this is a valid HTML document! -->

Router les requ&ecirc;tes avec le serveur web Caddy 


# Matches requests for HTML documents
@pwa expression `{header.Accept}.matches("\\btext/html\\b")`

reverse_proxy @pwa http://front
reverse_proxy http://api

<a href="https://dunglas.fr/2022/01/preventing-cors-preflight-requests-using-content-negotiation/" data-type="URL" data-id="https://dunglas.fr/2022/01/preventing-cors-preflight-requests-using-content-negotiation/" target="_blank" rel="noreferrer noopener">Read the original version of this post.</a>



Dans les applications web modernes, il est courant de servir l&rsquo;API web et l&rsquo;application frontend à partir de sous-domaines différents :&nbsp;



<ul><li>https://api.exemple.com : votre API Web, qui expose généralement des documents JSON.&nbsp;</li><li>https://exemple.com : votre application web, généralement construite en JavaScript, qui génère des documents HTML à partir des données JSON brutes récupérées grâce à l&rsquo;API.</li></ul>



C&rsquo;était le modèle mis en œuvre par <a href="https://api-platform.com/" target="_blank" rel="noreferrer noopener">API Platform</a> jusqu&rsquo;à l&rsquo;année dernière mais nous l&rsquo;avons changé pour deux raisons principales : les performances et les principes REST.



<h2>CORS nuit aux performances</h2>



Parlons d&rsquo;abord des performances. Lorsque vous servez votre API à partir d&rsquo;une <a rel="noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Origin" target="_blank">origine</a> différente de celle de l&rsquo;application frontend, les navigateurs envoient automatiquement une requête OPTIONS supplémentaire avant toute requête adressée à l&rsquo;API. Il s&rsquo;agit d&rsquo;une <a href="https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request" target="_blank" rel="noreferrer noopener">requête de pré-vérification</a>, qui est nécessaire en raison du <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> (Cross-Origin Resource Sharing ou partage des ressources entre origines multiples). Ces requêtes de pré-vérification garantissent que l&rsquo;application frontend est autorisée à interagir avec les ressources servies par l&rsquo;API.



<a rel="noreferrer noopener" href="https://nickolinger.com/blog/2021-08-04-you-dont-need-that-cors-request/" target="_blank">Comme l&rsquo;explique Nick Olinger dans un récent article</a>, ces requêtes de pré-vérification ajoutent une latence inutile, elles ralentissent les applications, gaspillent la batterie des appareils mobiles et augmentent la charge des serveurs.



Le problème des requêtes de pré-vérification est encore plus grave lors de la mise en œuvre de styles d&rsquo;API tirant parti <a rel="noreferrer noopener" href="https://dunglas.fr/2019/11/vulcain-http-2-server-push%e2%80%a8-and-the-rise-of-client-driven-rest-apis/" target="_blank">des capacités de multiplexage de HTTP/2 et HTTP/3</a>, comme <a rel="noreferrer noopener" href="http://vulcain.rocks" target="_blank">Vulcain.rocks</a>. L&rsquo;idée principale des approches similaires à Vulcain est de télécharger de petites ressources en parallèle, uniquement lorsque cela est nécessaire et avec un bon taux de réussite du cache. Ces approches sont des alternatives au <a rel="noreferrer noopener" href="https://medium.com/apis-you-wont-hate/lets-stop-building-apis-around-a-network-hack-9a68f7e83dd2" target="_blank">téléchargement de gros documents composés</a> comme dans <a rel="noreferrer noopener" href="https://graphql.org/learn/queries/#fields" target="_blank">GraphQL</a> ou <a rel="noreferrer noopener" href="https://jsonapi.org/format/#fetching-includes" target="_blank">JSON:API</a>. Mais si &#8211; à cause de ce problème de requêtes preflight &#8211; le nombre de demandes effectuées est multiplié par 2, la latence sera mauvaise et les avantages des approches de type Vulcain seront réduits à néant.



La solution pour éviter ces requêtes est simple : servir l&rsquo;API et l’application frontend à partir de la même origine ! Et c&rsquo;est ce que nous avons fait dans API Platform 2.6.



Dans son article, Nick propose une solution rapide : configurez votre reverse proxy pour créer un alias de votre API en tant que chemin avec la même origine que votre application web. https://api.exemple.com devient https://exemple.com/api, toutes les ressources appartiennent à la même origine, problème résolu ! Mais nous pouvons faire encore mieux en suivant les principes REST.



<h2>Une même ressource, des représentations différentes</h2>



Le modèle architectural du web est connu sous le nom de REST (Representational State Transfer). Ce style a été <a href="https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm" target="_blank" rel="noreferrer noopener">défini par Roy Fielding</a> alors qu&rsquo;il travaillait sur les standards qui constituent encore aujourd’hui la base duweb : URI (Uniform Resource Identifier) et HTTP (Hypertext Transfer Protocol) :



<blockquote class="wp-block-quote">La première édition de REST a été développée […] principalement comme un moyen de communiquer les concepts du Web alors que nous rédigions la spécification HTTP/1.0 et la proposition initiale HTTP/1.1. Elle a été améliorée de manière itérative au cours des cinq années suivantes et appliquée à diverses révisions et extensions des normes du protocole Web.<cite>Roy T. Fielding, <a href="https://www.ics.uci.edu/~fielding/pubs/dissertation/evaluation.htm#sec_6_1" target="_blank" rel="noreferrer noopener">Architectural Styles and the Design of Network-based Software Architectures</a></cite></blockquote>



Fondamentalement, une bonne application web devrait suivre les principes REST, car <a rel="noreferrer noopener" href="https://httpwg.org/specs/rfc7231.html#rfc.xref.REST.1" target="_blank">REST est le style architectural du web lui-même</a>. Dans sa thèse de doctorat, Fielding définit les concepts de « <a rel="noreferrer noopener" href="https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_2_1_1" target="_blank">ressource</a> » et de « <a rel="noreferrer noopener" href="https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_2_1_2" target="_blank">représentation de ressource</a>« . Une ressource est une abstraction d&rsquo;information. Il peut s&rsquo;agir de « toute information qui peut être nommée ». Sur le web, une ressource est identifiée par un URI (<a rel="noreferrer noopener" href="https://www.w3.org/Addressing/#background" target="_blank"><a href="https://www.w3.org/Addressing/#background">aussi connu sous le nom d&rsquo;URL</a></a>). Une représentation de ressource est une concrétion, c&rsquo;est « une séquence d&rsquo;octets, plus des métadonnées de représentation pour décrire ces octets ». Habituellement, la représentation d&rsquo;une ressource est connue sous le nom de « fichier » ou de « document ». Cela signifie que la même ressource, ayant le même identifiant (son URI ou son URL), peut avoir différentes représentations.



Comme un exemple vaut mieux qu’un long discours, imaginons une plateforme de blog. Cette plateforme expose des articles de blog. Les articles sont disponibles par le biais d&rsquo;une API web, pour être récupérés par des machines. Ils sont également disponibles sur un site web, sous forme d&rsquo;articles lisibles par des humains. Sous le capot, le site web interroge l&rsquo;API web pour récupérer les articles sous forme de données&nbsp; brutes au format JSON et les transforme en un document HTML lisible par les humains. 



Si nous pensons en termes de concepts REST, nous avons une ressource (l&rsquo;abstraction) : l&rsquo;article de blog. Cette ressource a un identifiant unique : son URI, par exemple https://exemple.com/blog/a-propos-des-requetes. Cette ressource a deux représentations :



<ul><li>Le document JSON, servi par l&rsquo;API : la représentation de la ressource </li><li>Le document HTML, servi par le site web : représentation de la même ressource lisible par un humain</li></ul>



Ça semble pas mal, mais si les deux représentations ont le même identifiant, comment le serveur peut-il savoir celle qu&rsquo;il doit retourner ? C&rsquo;est là qu&rsquo;intervient la négociation du contenu.



REST, ainsi que le protocole HTTP, définissent des <a href="https://httpwg.org/specs/rfc7231.html#content.negotiation" target="_blank" rel="noreferrer noopener">mécanismes permettant au serveur d&rsquo;envoyer la représentation appropriée de la ressource</a>. Grâce au mécanisme de « négociation proactive », le client peut informer le serveur qu&rsquo;il préfère une représentation JSON de la ressource, en utilisant l&rsquo;en-tête de requête Accept :





De même, un navigateur web peut utiliser l&rsquo;en-tête Accept pour demander une représentation HTML :





Nous disposons désormais d&rsquo;un moyen élégant pour se passer des requêtes de pré-vérification CORS ! En vérifiant les principes REST, nous avons identifié que nous ne servions pas deux ressources différentes, mais deux représentations d&rsquo;une même ressource. La négociation de contenu permet au serveur d&rsquo;envoyer la représentation appropriée de la ressource en fonction du client : notre application JavaScript obtiendra la représentation JSON tandis que le navigateur web obtiendra la représentation HTML. Comme toutes les ressources sont maintenant servies à partir de la même origine (et ont même une URL identique), nous n&rsquo;avons plus besoin de requêtes de pré-vérification.



Cependant, de nos jours, les API et les sites web sont généralement développés à l&rsquo;aide de technologies différentes (par exemple Go, Rust ou PHP pour l&rsquo;API, JavaScript pour le site web). Et c&rsquo;est pourquoi il est pratique de les servir à partir de différents sous-domaines. Est-ce que nous tournons en rond ? Par chance, les serveurs web modernes et les reverse proxies permettent d&rsquo;acheminer facilement les requêtes vers différents backends en fonction des en-têtes de négociation du contenu.



<h2>Router les requêtes avec le serveur web Caddy </h2>



Comme vous le savez peut-être, nous aimons beaucoup chez Les-Tilleuls.coop <a rel="noreferrer noopener" href="https://caddyserver.com/" target="_blank">le serveur web Caddy</a> ! Si vous ne connaissez pas Caddy, il s&rsquo;agit d&rsquo;une alternative moderne, disposant de nombreuses fonctionnalités et distribué sous forme de logiciel libre à Apache et NGINX. Caddy est écrit en Go. Utilisé comme un reverse proxy, Caddy permet d&rsquo;inspecter facilement la requête et de la router vers l&rsquo;API web ou vers le site web en fonction de l&rsquo;en-tête Accept. Voici une version simplifiée du fichier Caddyfile fourni par <a href="https://dunglas.fr/2020/12/api-platform-2-6-php-8-support-next-js-and-nuxt-js-app-generator-caddy-server-activitypub-and-much-more/">API Platform 2.6</a> pour y parvenir :





Tout d&rsquo;abord, un <a rel="noreferrer noopener" href="https://caddyserver.com/docs/caddyfile/matchers" target="_blank">request matcher</a> est défini. Si l&rsquo;en-tête Accept contient le type MIME text/html, la requête est acheminée vers l&rsquo;application JavaScript (http://front), sinon, la requête est transmise à l&rsquo;API (http://api). Il s&rsquo;agit d&rsquo;URL internes. L&rsquo;URL publique est la même pour les deux représentations, Caddy se charge de la répartition. Et voilà ! Plus de requêtes de pré-vérification, et un design propre respectant les principes REST ! 



API Platform contient <a href="https://github.com/api-platform/api-platform/blob/main/api/docker/caddy/Caddyfile" target="_blank" rel="noreferrer noopener">un exemple plus avancé</a>. Bien entendu, il est également possible de réaliser cette opération à l&rsquo;aide d&rsquo;autres reverse proxies.

Empêcher les requêtes de pré-vérification CORS grâce à la négociation de contenu

git clone https://github.com/dunglas/symfony-docker

docker-compose build --pull --no-cache

docker-compose up

Docker Compose et les Dockerfile Flex Configurators


<a href="https://symfony.com/blog/introducing-docker-support" data-type="URL" data-id="https://symfony.com/blog/introducing-docker-support" target="_blank" rel="noreferrer noopener">Read the original version of this post.</a>



Au fil des ans, <a rel="noreferrer noopener" href="https://docker.com/" data-type="URL" data-id="https://docker.com/" target="_blank">Docker</a> est de facto devenu un standard pour construire, déployer et exécuter des applications serveur. Docker permet de rassembler toutes les instructions nécessaires pour construire l’environnement qui accueillera votre logiciel, et ce juste à côté du code dans le dépôt du projet. 



Nous sommes aujourd&rsquo;hui heureux d’annoncer qu’après 6 ans de travail en commun, Symfony et <a href="https://api-platform.com/" target="_blank" rel="noreferrer noopener">API Platform</a> incluent désormais un ensemble d’outils conçus pour créer, gérer et exécuter automatiquement les conteneurs Docker nécessaires à vos applications.



<h2>Docker Compose et les Dockerfile Flex Configurators</h2>



Comme vous le savez probablement, Symfony embarque un outil bien pratique appelé <a href="https://symfony.com/doc/current/quick_tour/flex_recipes.html" data-type="URL" data-id="https://symfony.com/doc/current/quick_tour/flex_recipes.html" target="_blank" rel="noreferrer noopener">Flex</a>. Flex est un plugin Composer qui facilite l’ajout de nouvelles fonctionnalités à vos projets. Lorsque vous installez une nouvelle bibliothèque PHP, Flex génère automatiquement le code et la configuration nécessaires pour que cette bibliothèque fonctionne.



Flex a aujourd’hui de nouveaux super pouvoirs ! Il est désormais capable de générer et de mettre à jour le fichier <code>docker-compose.yml</code> afin d’ajouter automatiquement les services requis par les bibliothèques que vous venez d’installer.



Par exemple, pour utiliser l’ORM Doctrine vous avez besoin d’un SGBD. Et bien, devinez quoi ? Lorsque vous installez Doctrine (e.g. <code>composer require orm</code>), Flex vous demandera désormais si vous voulez mettre à jour votre fichier <code>docker-compose.yml</code>. Si vous répondez “oui”, il ajoutera automatiquement un serveur PostgresSQL prêt à être utilisé ! 



<a href="https://asciinema.org/a/453483" target="_blank" rel="noopener"><img src="https://asciinema.org/a/453483.svg"></a>



Autre exemple : vous utilisez <a rel="noreferrer noopener" href="https://github.com/symfony/ux-turbo" data-type="URL" data-id="https://github.com/symfony/ux-turbo" target="_blank">Symfony UX Turbo</a> et vous souhaitez profiter de <a rel="noreferrer noopener" href="https://symfonycasts.com/screencast/turbo/mercure?cid=apip" data-type="URL" data-id="https://symfonycasts.com/screencast/turbo/mercure?cid=apip" target="_blank">ses fonctionnalités “temps-réel”</a>, alors vous avez besoin d’un hub <a rel="noreferrer noopener" href="https://mercure.rocks/" data-type="URL" data-id="https://mercure.rocks/" target="_blank">Mercure.rocks</a>. Symfony Flex est là pour vous aider : il peut automatiquement ajouter une ligne dans votre fichier&nbsp;<code>docker-compose.yml</code> ! 



Lancez la commande <code>docker-compose up</code> et c’est tout !



Il existe également un configurateur <code>Dockerfile</code> —en plus des “Docker Compose Configurators”— capable d’ajouter à un Dockerfile compatible les extensions PHP (e.g. <code>pdo_pgsql</code>) requises par les packages PHP que vous installez. On reparlera de ça bientôt !



À l’heure actuelle, les recettes Flex suivantes utilisent ces nouveaux configurateurs :



<figure class="wp-block-image size-medium"><img loading="lazy" width="600" height="177" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/tableau-600x177.jpg" alt="" class="wp-image-3903" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/tableau-600x177.jpg 600w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/tableau-1024x302.jpg 1024w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/tableau-300x89.jpg 300w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/tableau-768x227.jpg 768w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/tableau-1536x453.jpg 1536w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/tableau.jpg 1600w" sizes="(max-width: 600px) 100vw, 600px" /></figure>



Le “Docker Compose Configurator” génère également <a href="https://docs.docker.com/compose/extends/" data-type="URL" data-id="https://docs.docker.com/compose/extends/" target="_blank" rel="noreferrer noopener">deux fichiers “override”</a> : <code>docker-compose.override.yml</code> contient la configuration spécifique à l’environnement de développement, et <code>docker-compose.prod.yml</code> la configuration de production. Nous reviendrons là-dessus plus tard.



<h2>Symfony CLI et Docker Compose&nbsp;</h2>



La <a rel="noreferrer noopener" href="https://github.com/symfony/cli" data-type="URL" data-id="https://github.com/symfony/cli" target="_blank">Symfony CLI</a> —que Fabien Potencier a open-sourcée durant <a rel="noreferrer noopener" href="https://live.symfony.com/2021-world-winter/" data-type="URL" data-id="https://live.symfony.com/2021-world-winter/" target="_blank">la keynote d’ouverture du SymfonyWorld</a>— est capable de <a rel="noreferrer noopener" href="https://symfony.com/doc/current/setup/symfony_server.html#symfony-server-docker" data-type="URL" data-id="https://symfony.com/doc/current/setup/symfony_server.html#symfony-server-docker" target="_blank">détecter automatiquement les services Docker Compose et de configurer automatiquement votre application pour les utiliser</a>. Pour faire ça, Symfony CLI requête l’API Docker Engine pour trouver les ports utilisés par les conteneurs Docker et valoriser les variables d’environnement utilisées par l’application pour s’y connecter. Grâce au <code>docker-compose.override.yml</code> généré, les services ajoutés par Symfony Flex sont compatibles avec cette fonctionnalité.



<a href="https://asciinema.org/a/453502" target="_blank" rel="noopener"><img src="https://asciinema.org/a/453502.svg"></a>



<figure class="wp-block-image size-medium"><img loading="lazy" width="600" height="463" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker-600x463.png" alt="" class="wp-image-3876" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker-600x463.png 600w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker-1024x790.png 1024w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker-300x232.png 300w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker-768x593.png 768w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/12/symfony-toolbar-symfony-cli-docker.png 1104w" sizes="(max-width: 600px) 100vw, 600px" /></figure>



Et ce n’est pas tout : vous pouvez démarrer plusieurs projets en même temps sans aucun conflit (avec par exemple un serveur PostgreSQL sur chaque projet). Pour accomplir cela, les services Docker Compose dans <code>docker-compose.override.yml</code> sont mappés à des ports du host aléatoires ! Lancez la commande <code>docker-compose ps</code> depuis le répertoire de votre projet pour voir les ports assignés.



<h2>Squelette Docker et installateur</h2>



La Symfony CLI est le moyen le plus simple pour démarrer avec Symfony. Mais elle requiert une installation local de PHP et de Composer, et elle est conçue pour être utilisée uniquement en développement.



Mais alors comment faire si vous souhaitez être certain que tous les développeurs de votre équipe utilisent bien la même version de PHP ? Comment faciliter l’intégration de nouvelles personnes sans qu’elles soient forcées d’installer PHP ou Composer en local ? Comment faire pour utiliser la même configuration dans votre CI voire même en production ?



La réponse est : Symfony Docker !



<a rel="noreferrer noopener" href="https://github.com/dunglas/symfony-docker" data-type="URL" data-id="https://github.com/dunglas/symfony-docker" target="_blank">Symfony Docker</a> est un squelette contenant tout le nécessaire pour installer et exécuter un projet Symfony. Dès lors que vous disposez d’un Docker Compose fonctionnel, il vous permet de créer de nouveaux projets Symfony sans rien installer en local. Symfony Docker contient deux simples images :



<ol><li>PHP FPM (avec CLI)</li><li>Le serveur web <a href="https://caddyserver.com/" data-type="URL" data-id="https://caddyserver.com/" target="_blank" rel="noreferrer noopener">Caddy</a></li></ol>



Il contient des fichiers <code>Dockerfile</code> et <code>docker-compose.yml</code> compatibles avec les configurateurs Symfony Flex. Il est conçu pour être simple, lisible et minimaliste, tout en permettant d’exécuter vos projets localement, dans votre CI et en production !



Comme Symfony CLI, Symfony Docker valorise également les variables d’environnement utilisées par votre projet pour s’assurer qu’il se connecte bien aux services Docker Compose installés par le configurateur Flex.



Comme Symfony Docker utilise le serveur web Caddy, les certificats TLS sont générés et renouvelés automatiquement (pour <code>localhost</code> comme pour votre domaine en production), le support de HTTP/2 et HTTP/3 est natif, et vous pouvez installer <a rel="noreferrer noopener" href="https://caddyserver.com/download" data-type="URL" data-id="https://caddyserver.com/download" target="_blank">les modules Caddy</a> que vous voulez (les modules <a href="https://mercure.rocks/docs/hub/install#custom-caddy-build" data-type="URL" data-id="https://mercure.rocks/docs/hub/install#custom-caddy-build" target="_blank" rel="noreferrer noopener">Mercure</a> et <a href="https://github.com/dunglas/vulcain/blob/main/docs/caddy.md" data-type="URL" data-id="https://github.com/dunglas/vulcain/blob/main/docs/caddy.md" target="_blank" rel="noreferrer noopener">Vulcain</a>, un module <a href="https://authp.github.io/" data-type="URL" data-id="https://authp.github.io/" target="_blank" rel="noreferrer noopener">OAuth/OpenID Connect</a>, un module de <a href="https://github.com/darkweak/souin#caddy-module" data-type="URL" data-id="https://github.com/darkweak/souin#caddy-module" target="_blank" rel="noreferrer noopener">cache HTTP</a>, …) !



Utiliser Symfony Docker est très simple :





C’est tout, Symfony a été installé, votre projet est démarré et est en cours d’exécution. Installez Doctrine, ou Blackfire, ou n’importe quel package supporté par les configurateurs et les services/extensions PHP seront installés automatiquement !



Symfony Docker contient d’autres fonctionnalités intéressantes, comme la possibilité de choisir la version de Symfony à installer. Il peut également être ajouté sur des projets déjà existants. <a href="https://github.com/dunglas/symfony-docker#docs" data-type="URL" data-id="https://github.com/dunglas/symfony-docker#docs" target="_blank" rel="noreferrer noopener">Lisez sa documentation</a> pour en savoir plus.



Symfony Docker est aussi un <a href="https://github.com/dunglas/symfony-docker/generate" data-type="URL" data-id="https://github.com/dunglas/symfony-docker/generate" target="_blank" rel="noreferrer noopener">template GitHub</a> dont vous pouvez vous servir afin de bootstraper votre projet. Il contient <a href="https://github.com/dunglas/symfony-docker/blob/main/.github/workflows/ci.yml" data-type="URL" data-id="https://github.com/dunglas/symfony-docker/blob/main/.github/workflows/ci.yml" target="_blank" rel="noreferrer noopener">un workflow de GitHub Actions</a> qui exécute automatiquement vos tests en utilisant les conteneurs Docker fournis !



Symfony Docker n’est pas le seul squelette compatible avec les nouveaux configurateurs Flex : <a rel="noreferrer noopener" href="https://api-platform.com/docs/distribution/#using-the-api-platform-distribution-recommended" data-type="URL" data-id="https://api-platform.com/docs/distribution/#using-the-api-platform-distribution-recommended" target="_blank">la distribution API Platform</a> les supporte également !



<h2>Kubernetes</h2>



Symfony Docker (tout comme la distribution API Platform) est <a rel="noreferrer noopener" href="https://github.com/dunglas/symfony-docker/blob/main/docs/production.md" data-type="URL" data-id="https://github.com/dunglas/symfony-docker/blob/main/docs/production.md" target="_blank">utilisable en production via Docker Compose</a>, mais seuls les déploiements “single-host” sont supportés. Ce qui peut être pleinement suffisant pour des projets de petite ou moyenne taille, mais au-delà vous aimeriez probablement utiliser le roi des orchestrateurs : <a href="https://kubernetes.io/" data-type="URL" data-id="https://kubernetes.io/" target="_blank" rel="noreferrer noopener">Kubernetes</a>.



Les images Docker fournies par Symfony Docker ont été conçues pour être compatibles avec Kubernetes. Mais il y a mieux encore ! Le projet API Platform fournit un chart <a rel="noreferrer noopener" href="https://helm.sh/" data-type="URL" data-id="https://helm.sh/" target="_blank">Helm</a> (le gestionnaire de paquets de Kubernetes) pour déployer votre projet sur n’importe quel cluster Kubernetes en une seule commande !&nbsp;Ce chart est totalement compatible avec Symfony Docker (pas besoin d’utiliser API Platform). Copiez/collez ce chart en entier dans votre projet, et c&rsquo;est tout ! 



<a rel="noreferrer noopener" href="https://api-platform.com/docs/deployment/minikube/" data-type="URL" data-id="https://api-platform.com/docs/deployment/minikube/" target="_blank">Apprenez à déployer vos applications dans Kubernetes</a>.



Pour plus de détails à propos de cette toute nouvelle intégration Docker, vous pouvez regarder la conférence à ce sujet donnée lors du <a href="https://live.symfony.com/2021-world-winter/" data-type="URL" data-id="https://live.symfony.com/2021-world-winter/" target="_blank" rel="noreferrer noopener">Symfony World 2021</a> :



<center><iframe class="speakerdeck-iframe" src="//speakerdeck.com/player/563d315d06714ffa88017663e83540d1?" title="null" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" style="border: 0px; background: padding-box rgba(0, 0, 0, 0.1); margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 698px; height: 393px;" frameborder="0"></iframe></center>







Alors, que pensez-vous de cette nouvelle fonctionnalité ? Vous souhaitez être accompagné·e dans sa mise en place ? <a rel="noreferrer noopener" href="mailto:contact@les-tilleuls.coop" data-type="mailto" data-id="mailto:contact@les-tilleuls.coop" target="_blank">Contactez-nous</a> !

Présentation du support de Docker dans Symfony

Quels genres d'interventions &ecirc;tes-vous amen&eacute;s &agrave; faire ?


Julien, Thomas : pouvez-vous nous pr&eacute;senter en quelques mots votre parcours ?


Qu'est-ce qui vous pla&icirc;t dans votre m&eacute;tier ?


Nous avons récemment accueilli au sein de notre coopérative Julien Francoz et Thomas Samson, qui occupent le poste de Site Reliability Engineer. Découvrons à travers cet article le parcours de nos deux nouvelles recrues et en quoi consiste ce poste tout à fait complémentaire de nos offres de services actuelles.&nbsp;



<h2>Julien, Thomas : pouvez-vous nous présenter en quelques mots votre parcours ?</h2>



<h4>Julien </h4>



Je suis arrivé récemment chez Les-Tilleuls.coop, au poste de Site Reliability Engineer. J’ai passé les quinze années précédentes chez un infogéreur, où je suis passé d’administrateur système Linux, à architecte système/DevOps. J’ai consacré mes dernières années quasi exclusivement à de l’orchestration de containers (Docker/OpenShift/Kubernetes). J’y ai fait aussi un peu de management, et énormément d’escalade technique sur tout type d’incident. Dans cette entreprise, nos clients avaient d’un côté un infogéreur, de l’autre une agence web, avec toutes les problématiques qui vont avec : l&rsquo;infogérant et l’agence web ne travaillent pas suffisamment ensemble, les environnements ne sont pas ISO entre la dev/recette chez l’agence web, et les environnements de pré-production et production chez l&rsquo;infogérant. Cela amène souvent à des situations où chacun se renvoie la responsabilité.



J’ai voulu rejoindre Les-Tilleuls.coop, pour être dans une entreprise à taille bien plus humaine, avec un fonctionnement totalement différent (SCOP), et surtout travailler main dans la main avec les développeurs, plutôt que presque l’un contre l’autre dans ma précédente société.



<h4>Thomas </h4>



Je suis chez Les-Tilleuls.coop depuis cet automne en tant que Site Reliability Engineer. J’étais précédemment au sein d’un gros infogéreur en tant qu’administrateur système et réseaux. J’y réalisais la gestion de plusieurs SI, principalement sous Windows. J’administrais également toute la partie réseau (Switch, routeur, firewall…).&nbsp;



Je suis issu d’une formation axée principalement sur la culture DevOps et le monde des logiciels libres, et cet aspect me manquait vraiment là où j’étais. J’ai voulu rejoindre Les-Tilleuls.coop pour trouver un nouveau challenge, et parce que le poste correspondait réellement à tout ce que je voulais apprendre et faire à l’avenir. L’aspect coopératif de l’entreprise a fini de me convaincre.



<h2>Quels genres d&rsquo;interventions êtes-vous amenés à faire ?</h2>



Notre poste comprend différentes missions. Tout d’abord en tant que SRE, nous sommes responsables de la disponibilité des sites, ce qui implique de tout mettre en œuvre pour que cela fonctionne au mieux, anticiper tous les problèmes, et réagir au plus vite en cas d’incident.



Cela implique une part de design d’architecture. Nous conseillons nos clients pour mettre en place le meilleur compromis entre haute disponibilité et coût de la plateforme : une association humanitaire n’a pas le même budget qu’un site e-commerce, et pourtant en cas de crise humanitaire, elle peut aussi subir un très fort pic de trafic.



Nous allons ensuite réaliser la mise en production des plateformes, c&rsquo;est-à-dire les construire telles qu’elles ont été prévues, y installer les sites, réaliser d’éventuels tests de montée en charge, du tuning…



C’est aussi l’occasion de mettre en place le pipeline d’intégration et de déploiement continu, afin de permettre aux développeurs de mettre à jour le site de manière autonome, en garantissant que le site a préalablement été testé sur l’environnement de pré-production. Enfin, nous mettons aussi en place tous les outils qui vont ensuite nous permettre de l’exploiter pendant plusieurs années : sauvegarde, monitoring, agrégation des logs, scan de sécurité, capacity planning…



Une fois le site passé en production, nous surveillons la plateforme en 24/7, pour réagir au plus vite en cas d’incident. Un suivi est aussi fait des versions, qu’il faut mettre à jour régulièrement, notamment pour la sécurité. Dans le cas de Kubernetes, c’est un projet assez jeune, qui évolue très rapidement, et qui nécessite des mises à jour très régulières. 



Nous avons aussi un rôle de conseil, pour accompagner le client vers des évolutions, des nouvelles technologies… Et enfin, si jamais un client nous quitte, nous l’accompagnons dans sa migration vers un autre prestataire.



<h2>Qu&rsquo;est-ce qui vous plaît dans votre métier ?</h2>



<h4>Julien </h4>



C’est un métier qui me passionne techniquement, c’est un domaine qui évolue très vite, on apprend tous les jours. De plus, j&rsquo;adore les problèmes, investiguer, trouver des solutions. Et comme chaque site à des technologies différentes, chaque client à des besoins différents, chaque cloud provider a des produits différents pour chaque besoin, pas le temps de s’ennuyer.



De plus dans le cas du poste de SRE chez Les-Tilleuls.coop, nous sommes en train de monter une offre d’infogérance dans une société dont ce n’est pas initialement le métier et il y a tout à faire : choisir les bons outils, packager l’offre, la faire évoluer en fonction des besoins de nos clients, recruter, former…



<h4>Thomas</h4>



Ce qui me plaît dans le domaine SRE, c’est surtout les technologies employées. Nous sommes obligés d’être sans cesse en évolution sur les solutions techniques et c’est réellement passionnant. Je suis jeune dans le domaine SRE et j’ai donc énormément de choses à apprendre et c’est ce que j’aime. Je découvre chaque jour de nouvelles choses (de nouvelles technos, de nouveaux moyens d’automatisation … etc).&nbsp;



Chaque solution mise en place est différente. Elles représentent toutes un nouveau challenge et c’est ça qui rend ce domaine réellement passionnant. Les-Tilleuls.coop nous offrent une totale liberté sur le choix des solutions techniques. 



<h2>Comment faites-vous votre veille ?</h2>



<h4>Julien </h4>



Quand je peux, je vais au FOSDEM à Bruxelles : <a href="https://fosdem.org/">https://fosdem.org/</a>. Je participe aussi à quelques meetups. Concernant la veille autour de Kubernetes, c’est plutôt au cas par cas lors d’un besoin en particulier, que je vais regarder du côté du landscape de la Cloud Native Computing Foundation ( <a href="https://landscape.cncf.io/">https://landscape.cncf.io/</a> ) pour trouver l’outil adapté, faire des tests sur un labo…Je suis aussi quelques blogs.



<h4>Thomas </h4>



J’utilise l’application Feedly, qui est un agrégateur de flux RSS. Dedans j’ai plusieurs fils qui classent mes abonnements par technologies que je suis. L’information vient directement à moi sur les sujets qui m’intéressent et les articles intéressants, je les stocke dans GetPocket.



Merci Julien et Thomas pour cette présentation ! N&rsquo;hésitez pas à <a href="mailto:contact@les-tilleuls.coop" target="_blank" rel="noreferrer noopener">nous contacter</a> si vous rencontrez des problématiques de disponibilité de vos applications, nous serons ravis de vous accompagner.

Rencontre avec Julien et Thomas, membres de notre équipe SRE

import type { CheerioAPI } from 'cheerio';

// ...

export async function getStaticProps({ params: { legacy } }: PathsParams) {
  // ...

  const cheerio: CheerioAPI = require('cheerio');
  const $ = cheerio.load(content);
  const head = $('head').first();
  const title = head.find('title').first().text();
  const metas = head
    .find('meta')
    .map((_, { attribs: { name, 'http-equiv': httpEquiv, content } }) =&gt; ({
      ...(name &amp;&amp; { name }),
      ...(httpEquiv &amp;&amp; { httpEquiv }),
      ...(content &amp;&amp; { content }),
    }))
    .toArray();
  const links = head
    .find('link')
    .map((_, { attribs: { rel, href, hreflang: hrefLang, type, sizes, crossorigin: crossOrigin } }) =&gt; ({
      ...(rel &amp;&amp; { rel }),
      ...(href &amp;&amp; { href }),
      ...(hrefLang &amp;&amp; { hrefLang }),
      ...(type &amp;&amp; { type }),
      ...(sizes &amp;&amp; { sizes }),
      ...(undefined !== crossOrigin &amp;&amp; { crossOrigin }),
    }))
    .toArray();
  const scripts = head
    .find('script')
    .map((_, { attribs: { id, src, type, defer, async, crossorigin: crossOrigin }, children }) =&gt; ({
      ...(id &amp;&amp; { id }),
      ...(src &amp;&amp; { src }),
      ...(type &amp;&amp; { type }),
      ...(undefined !== defer &amp;&amp; { defer: true }),
      ...(undefined !== async &amp;&amp; { async: true }),
      ...(undefined !== crossOrigin &amp;&amp; { crossOrigin }),
      text: $(children).text(),
    }))
    .toArray();

  head.remove();
  $('header').remove();

  return {
    props: {
      title,
      metas,
      links,
      scripts,
      html: $('body').html(),
    },
    revalidate: isHome ? 1800 : false,
  };
}

Utilisation du contenu pars&eacute; dans le composant de migration


import Head from 'next/head';

import Layout from 'components/Layout';

const Legacy = ({ title, metas, links, scripts, html }: Props) =&gt; (
  &lt;&gt;
    &lt;Head&gt;
      &lt;title&gt;{title}&lt;/title&gt;
      {metas.map(({ name, httpEquiv, content }, index) =&gt; (
        &lt;meta
          key={`meta_${index}`}
          {...(name &amp;&amp; { name })}
          {...(httpEquiv &amp;&amp; { httpEquiv })}
          {...(content &amp;&amp; { content })}
        /&gt;
      ))}
      {links.map(({ rel, href, hrefLang, type, sizes, crossOrigin }, index) =&gt; (
        &lt;link
          key={`link_${index}`}
          {...(rel &amp;&amp; { rel })}
          {...(href &amp;&amp; { href })}
          {...(hrefLang &amp;&amp; { hrefLang })}
          {...(type &amp;&amp; { type })}
          {...(sizes &amp;&amp; { sizes })}
          {...(undefined !== crossOrigin &amp;&amp; { crossOrigin })}
        /&gt;
      ))}
      {scripts.map(
        ({ id, src, type, defer, async, crossOrigin, text }, index) =&gt; (
          &lt;script
            key={`script_${index}`}
            {...(id &amp;&amp; { id })}
            {...(src &amp;&amp; { src })}
            {...(type &amp;&amp; { type })}
            {...(undefined !== defer &amp;&amp; { defer })}
            {...(undefined !== async &amp;&amp; { async })}
            {...(undefined !== crossOrigin &amp;&amp; { crossOrigin })}
            dangerouslySetInnerHTML={{ __html: text }}
          /&gt;
        )
      )}
    &lt;/Head&gt;
    &lt;Layout&gt;
      &lt;div dangerouslySetInnerHTML={{ __html: html }}&gt;&lt;/div&gt;
    &lt;/Layout&gt;
  &lt;/&gt;
);

export default Legacy;

/pages
  account/profile.tsx
  new.tsx
  [[...legacy]].tsx

export async function getStaticPaths() {
  return {
    paths: [
      { params: { legacy: [] } },
      { params: { legacy: ['booking', 'new'] } },
    ],
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params: { legacy } }: PathsParams) {
  // ...
  const isHome = !legacy;

  return {
    props: {
      html: content,
    },
    revalidate: isHome ? 1800 : false,
  };
}

Parser le HTML de la legacy avec Cheerio


Chez Les-Tilleuls.coop, une problématique revient régulièrement : le code de production tourne sur des technologies vieillissantes et a besoin d&rsquo;être migré vers des versions plus récentes ou bien un changement complet de technologie est demandé.



Plusieurs stratégies de migration existent, et nous adaptons notre réponse selon le contexte et les besoins de chaque client.



Une des stratégies les plus intéressantes est la migration incrémentale : le nouveau et l&rsquo;ancien code tournent en même temps et le code peut donc être réécrit au fur et à mesure.



Le risque d&rsquo;impacter les utilisateurs est amoindri et il est même possible de déployer des <a rel="noreferrer noopener" href="https://martinfowler.com/bliki/CanaryRelease.html" target="_blank">releases canary</a> pour s&rsquo;assurer de ne pas introduire de bugs.



Une des manières les plus simples de réaliser cette stratégie est de se baser sur la configuration du reverse proxy : l&rsquo;utilisateur utilise l&rsquo;ancien code ou le nouveau selon le chemin de la page sur laquelle il se trouve. Les deux codes peuvent utiliser des infrastructures différentes, mais il est nécessaire de migrer complètement une partie de l&rsquo;application pour réaliser cette technique.



<figure class="wp-block-image size-full"><img loading="lazy" width="592" height="306" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/reverse-proxy.png" alt="Schéma d'une migration avec un reverse proxy" class="wp-image-3610" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/reverse-proxy.png 592w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/reverse-proxy-300x155.png 300w" sizes="(max-width: 592px) 100vw, 592px" /></figure>



Dans le cas de certaines technologies, il est possible d&rsquo;avoir les deux codes en même temps. C&rsquo;est par exemple le cas avec AngularJS, Angular et l&rsquo;outil <a rel="noreferrer noopener" href="https://angular.io/guide/upgrade#upgrading-with-ngupgrade" target="_blank">ngUpgrade</a> que nous avons eu l&rsquo;occasion de mettre en place chez <a href="https://www.alicesgarden.fr/" target="_blank" rel="noreferrer noopener">Alice&rsquo;s Garden</a>, assurant la migration de leur administration au fil de l&rsquo;eau sur plusieurs mois sans jamais couper leurs services. Cette stratégie est idéale puisque chaque composant peut être migré indépendamment mais peu de technologies supportent cette technique.



<figure class="wp-block-image size-full"><img loading="lazy" width="661" height="538" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/angular.png" alt="Schéma d'une migration avec ngUpgrade" class="wp-image-3611" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/angular.png 661w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/angular-600x488.png 600w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/angular-300x244.png 300w" sizes="(max-width: 661px) 100vw, 661px" /></figure>



Cet article a pour but d&rsquo;aborder une troisième manière de faire : appliquer le <a rel="noreferrer noopener" href="https://martinfowler.com/bliki/StranglerFigApplication.html" target="_blank">Strangler Fig</a> pour migrer petit à petit des parties d&rsquo;une page, en particulier pour migrer une page classique HTML + JavaScript (peu importe la technologie du backend utlisée pour générer cette page) vers une page Next.js.



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="470" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-1024x470.png" alt="Schéma d'une migration micro-incrémentale avec Next.js" class="wp-image-3612" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-1024x470.png 1024w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-600x275.png 600w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-300x138.png 300w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-768x352.png 768w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next.png 1035w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



J&rsquo;ai choisi d&rsquo;appeler cette stratégie « migration micro-incrémentale », pour exprimer ce découpage en petites parties d&rsquo;une page, que l&rsquo;on peut migrer indépendamment.



Cette approche partage de nombreuses similitudes avec l&rsquo;architecture <a rel="noreferrer noopener" href="https://martinfowler.com/articles/micro-frontends.html" target="_blank">micro frontends</a> et plus précisément l&rsquo;architecture <a rel="noreferrer noopener" href="https://jasonformat.com/islands-architecture/" target="_blank">islands</a>. Les composants React constituent un îlot tandis que la page legacy, préalablement découpée pour ne garder que les parties non migrées, constitue un deuxième îlot.



Mais avant d&rsquo;aller plus loin, abordons rapidement ce qu&rsquo;est Next.js et ce qu&rsquo;il nous apporte dans cette situation.



<h2>Next.js, le framework SSR de React</h2>



Contrairement à Vue.js ou Angular, React n&rsquo;est pas un framework, c&rsquo;est une bibliothèque. Pour réaliser une application complète, il est souvent nécessaire d&rsquo;utiliser des bibliothèques supplémentaires, par exemple pour le routage.



Dans une utilisation classique de React, de Vue.js ou d’Angular, le DOM est construit dynamiquement côté navigateur : le serveur ne renvoie quasiment pas de HTML ce qui peut poser des problèmes, en terme de SEO et de performance notamment.



Next.js propose de résoudre ces deux problèmes à la fois. C&rsquo;est un framework, donc il amène notamment son propre système de routage et il gère plusieurs types de rendu : SSR (rendu HTML côté serveur avec Node.js), SSG (fichiers HTML générés dans des fichiers plats) et même <a rel="noreferrer noopener" href="https://nextjs.org/blog/next-12#react-server-components" target="_blank">composants serveur</a> dans sa version 12.



Pourquoi ce framework nous intéresse-t-il dans le cas d&rsquo;une migration micro-incrémentale ? Comme vous allez le constater dans la partie suivante, utiliser cette technique ajoute un coût en terme de performance : il faut récupérer la page legacy, la parser et la rendre avec le reste des composants.



Next.js va nous permettre dans le meilleur des cas de générer statiquement certaines pages, ce qui effacera ce surcoût par rapport à la legacy, voire améliorera les performances si les pages n&rsquo;étaient pas statiques avant la migration.



À noter qu’il est possible d’utiliser la stratégie reverse proxy avec Next.js en se servant des <a rel="noreferrer noopener" href="https://nextjs.org/docs/api-reference/next.config.js/rewrites" target="_blank">rewrites</a>.



Rentrons maintenant dans le vif du sujet : comment fait-on pratiquement ?



<h2>Gérer le routage</h2>



La première étape est de gérer le routage de notre application. Nous voulons avoir à la fois la possibilité d&rsquo;avoir des pages totalement migrées et des pages partiellement migrées.



Le routeur de Next.js se base sur le nom des fichiers. Les pages complètement migrées seront créées de manière classique et nous allons créer une page spéciale qui va récupérer dynamiquement toutes les autres routes legacy avec la <a href="https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes" target="_blank" rel="noreferrer noopener">syntaxe spéciale <code>[[...]]</code></a>.



Cela va donner :





Nous voulons qu&rsquo;un maximum de pages soient générées statiquement. Nous allons ainsi utiliser la fonction spéciale <code>getStaticProps</code> :





Pour l&rsquo;instant nous nous contentons de retourner tout le code HTML de la page legacy dans la prop <code>html</code>.



Vous pouvez constater qu&rsquo;il est intéressant d&rsquo;avoir créé au préalable un sous-domaine <code>legacy</code> de votre site, qui retournera les anciennes pages.



Afin d&rsquo;indiquer à Next.js quelles pages doivent être générées statiquement à la compilation, il faut utiliser la fonction <code>getStaticPaths</code> :





Dans cet exemple, Next.js va générer deux pages statiques à la compilation : la page d&rsquo;accueil et la page <code>/booking/new</code> de la legacy :



<figure class="wp-block-image size-full"><img loading="lazy" width="504" height="99" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-build-1.png" alt="Capture d'écran du résultat de la commande build de Next.js" class="wp-image-3620" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-build-1.png 504w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-build-1-300x59.png 300w" sizes="(max-width: 504px) 100vw, 504px" /></figure>



Vous pouvez constater que <code>blocking</code> a été choisi pour la <a href="https://nextjs.org/docs/basic-features/data-fetching#fallback-blocking" target="_blank" rel="noreferrer noopener">propriété <code>fallback</code></a> : si le chemin legacy n&rsquo;est pas dans la liste des <code>paths</code>, Next.js fera le rendu côté serveur lorsqu&rsquo;il recevra la requête (SSR classique), puis un fichier plat sera créé. Les requêtes suivantes sur ce même chemin utiliseront le fichier.



Les pages ne seront pas regénérées tant qu&rsquo;une nouvelle compilation ne sera pas réalisée. Imaginons que la page d&rsquo;accueil legacy possède un bloc changeant régulièrement d&rsquo;apparence. Nous pouvons dire à Next.js de regénérer à intervalle régulier la page (regénération statique incrémentale) grâce à la <a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation" target="_blank" rel="noreferrer noopener">propriété <code>revalidate</code></a> de l&rsquo;objet retourné par <code>getStaticProps</code> :





Dans le cas de la page d&rsquo;accueil, Next.js regénérera la page toutes les 30 minutes.



Une autre possibilité est d&rsquo;utiliser une <a href="https://fr.wikipedia.org/wiki/Edge_Side_Includes" target="_blank" rel="noreferrer noopener">balise ESI</a> pour le bloc à contenu changeant : la page contenant la balise est générée statiquement et un reverse proxy comme Varnish se charge de remplacer la balise par le bloc, en le mettant à jour de manière régulière.



Ce bloc pourra ensuite être migré indépendamment en gardant la balise ESI grâce à l&rsquo;utilisation de <a href="https://github.com/dunglas/react-esi/" target="_blank" rel="noreferrer noopener">React ESI</a>.



Si certaines pages ne peuvent pas être statiques, même pendant un temps très court, il sera possible de créer les pages correspondantes et d&rsquo;utiliser la fonction <code>getServerSideProps</code> pour que le rendu soit effectué à chaque requête.



Attention cependant : la plupart du temps il est possible de gérer le contenu côté navigateur, par exemple dans le cas d&rsquo;un utilisateur connecté, étant donné que les problématiques de SEO sont inexistantes.



Maintenant que le routage est géré, nous pouvons passer à l&rsquo;étape suivante : remplacer une partie d&rsquo;une page legacy par un composant React. Pour cela, nous devons tout d&rsquo;abord parser le code HTML reçu.



<h2>Parser le HTML de la legacy avec Cheerio</h2>



La bibliothèque que nous devons choisir pour parser le HTML doit être capable de s&rsquo;exécuter en Node.js et nous souhaitons aussi qu&rsquo;elle soit performante.



La bibliothèque <a rel="noreferrer noopener" href="https://github.com/jsdom/jsdom" target="_blank">jsdom</a> est par exemple à proscrire : elle interprète beaucoup trop le HTML (CSS, JS) pour nos besoins.



Mon choix s&rsquo;est porté sur <a rel="noreferrer noopener" href="https://cheerio.js.org/" target="_blank">cheerio</a> : la librairie se veut être très rapide puisque, contrairement à jsdom, elle n&rsquo;interprète aucun contenu du DOM. En « bonus » : l&rsquo;API de cheerio se base sur celle de jQuery, peut-on faire plus familier ?



Admettons que sur <code>https://legacy.mywebsite.com</code>, un header soit présent dans une balise <code>&lt;header&gt;</code>. Nous voulons migrer seulement ce header pour le remplacer par un composant React plus moderne.



Nous allons découper le HTML de la façon suivante : le <code>&lt;head&gt;</code> sera découpé en titre, métadonnées (<code>&lt;meta&gt;</code>), ressources externes (<code>&lt;link&gt;</code>) et scripts, le <code>&lt;body&gt;</code> sera quant à lui en une seule partie, avec le <code>&lt;header&gt;</code> en moins.



Notez que nous pourrions découper le body en blocs pour pouvoir le manipuler comme nous le souhaitons dans le JSX.



Voyons ce que cela donne :





Comme vous pouvez le constater, il y a un peu de plomberie à réaliser, pour deux raisons :



<ul><li>Next.js a besoin de sérialiser le contenu retourné par <code>getStaticProps</code> en JSON : il n&rsquo;est pas possible d&rsquo;avoir de valeurs <code>undefined</code>.</li><li>React utilise des props en camelCase : nous devons convertir les attributs qui sont en kebab-case.</li></ul>



<h2>Utilisation du contenu parsé dans le composant de migration</h2>



Le plus difficile est fait ! Nous allons maintenant utiliser les différents contenus dans notre composant. Nous allons en particulier utiliser le composant <code>Head</code> de Next.js et nous allons entourer le contenu du body dans un composant <code>Layout</code> se chargeant d&rsquo;ajouter un header moderne.



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="346" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-header-1024x346.png" alt="Schéma de l'utilisation du composant Layout avec le reste du code legacy" class="wp-image-3679" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-header-1024x346.png 1024w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-header-600x202.png 600w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-header-300x101.png 300w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-header-768x259.png 768w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/11/next-header.png 1126w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



C&rsquo;est parti :





Encore une fois, un peu de plomberie, qui ressemble beaucoup à celle précédemment réalisée. Cette fois, elle est nécessaire à cause d&rsquo;un fonctionnement interne du composant <code>Head</code> de Next.js.



Celui-ci déduplique les balises en fonction des props, y compris celles qui sont <code>undefined</code> (<a rel="noreferrer noopener" href="https://github.com/vercel/next.js/blob/16d56e2c49b2d4bff93e6e74e8939efae2ccda4d/packages/next/shared/lib/head.tsx#L57" target="_blank">voir la fonction <code>unique</code> du composant</a>).



Une remarque importante également : étant donné que nous utilisons la prop spéciale <code>dangerouslySetInnerHTML</code>, nous avons besoin d&rsquo;une <code>div</code> supplémentaire qui va entourer notre contenu HTML.



Ce changement pourra dans certains cas, casser le CSS de la legacy : il faudra donc adapter le CSS pour gérer ce changement.



Une <a rel="noreferrer noopener" href="https://github.com/reactjs/rfcs/pull/129" target="_blank">RFC</a> proposant un composant <code>RawHTML</code> existe, mais n&rsquo;a pas encore été adoptée.



Pour tester que tout fonctionne, vous pouvez exécuter <code>npm run build</code> puis <code>npm run start</code>. En allant sur <code>http://localhost:3000/</code>, notre page legacy avec son nouveau header devrait être envoyée très rapidement par le serveur.



Avec ce code, nous venons de réaliser nos fondations pour notre migration micro-incrémentale ! Le reste de la migration se fera au fur et à mesure : nous découperons de plus en plus le body pour le remplacer par de nouveaux composants React.



<h2>Conclusion</h2>



Cette architecture, bien que non nécessairement liée à Next.js, est néanmoins très dépendante au moins de l&rsquo;utilisation d&rsquo;un framework SSR/SSG.



L&rsquo;implémentation de celle-ci dans Next.js vous a permis je l&rsquo;espère de comprendre un peu plus une utilisation avancée de ce framework de référence.



Un article à venir sur le blog rentrera dans le détail sur le fonctionnement de la génération des pages statiques, suivez-nous pour être informé de sa sortie !

Migration micro-incrémentale d'un legacy avec Next.js

Une menace pour les libert&eacute;s et la vie priv&eacute;e


Qu&rsquo;est-ce que le Federated Learning of Cohorts (FLoC) ?


En tant qu'utilisateur&middot;trice :

En tant que d&eacute;veloppeur&middot;se :

Sources&nbsp;: <a href="https://www.eff.org/fr/deeplinks/2021/03/googles-floc-terrible-idea" target="_blank" rel="noopener">https://www.eff.org/fr/deeplinks/2021/03/googles-floc-terrible-idea</a> &amp; <a href="https://plausible.io/blog/google-floc" target="_blank" rel="noopener">https://plausible.io/blog/google-floc</a>&nbsp;



Google mène la charge pour <a href="https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html" target="_blank" rel="noopener">remplacer les cookies tiers</a> au profit d’une nouvelle série de technologies permettant de proposer un meilleur ciblage tout en préservant la vie privée des utilisateurs. Parmi elles, se trouve une technologie nommée FLoC, qui renforce à nouveau le pouvoir des GAFAM et renforce le <a href="https://coveryourtracks.eff.org/">fingerprinting</a>. Découvrons ensemble&nbsp;en quoi cette solution consiste et pourquoi elle est problématique.



<h3>Qu’est-ce que le Federated Learning of Cohorts (FLoC) ?</h3>



Le&nbsp;<a href="https://github.com/WICG/floc" target="_blank" rel="noopener">Federated Learning of Cohorts</a> ou l&rsquo;apprentissage fédéré des cohortes (FLoC) est une solution proposée par Google qui permet aux entreprises de réaliser un ciblage publicitaire ou comportemental sans cookie, sans consentement et avec <a href="https://searchengineland.com/googles-current-floc-tests-arent-gdpr-compliant-347168" target="_blank" rel="noopener">un respect du RGPD discutable</a>.&nbsp;



Au lieu de suivre les individus sur le web à l&rsquo;aide d&rsquo;outils tels que Google Analytics qui reposent sur les cookies tiers, c’est le navigateur Chrome lui-même qui va observer le comportement de tous les internautes et qui va les classer dans des cohortes aux intérêts, habitudes et comportements similaires, pour ensuite les cibler avec des publicités personnalisées. Selon Google, chaque cohorte devrait regrouper au minimum quelques milliers d&rsquo;utilisateurs.



Google teste FLoC depuis la sortie de la version 89 de son navigateur aux États-Unis, au Canada, en Australie, au Brésil, au Japon et dans plusieurs autres pays. Le géant américain prévoit de l&rsquo;activer pour tous les utilisateurs d’ici la fin de l’année.&nbsp;



<h3>Comment fonctionne le FLoC ?</h3>



Avec cette technologie, le navigateur de chaque utilisateur partagera avec les sites web et les annonceurs des identifiants de cohortes, indiquant à quels groupes d’internautes il ou elle appartient. En résumé, vos identifiants de cohortes seront comme un résumé succinct de votre activité récente sur le Web et cette activité de navigation sera réduite à une étiquette comportementale envoyée aux sites et annonceurs.



De l’autre côté, les sites et régies publicitaires communiquent avec <a href="https://github.com/google/ads-privacy/blob/master/proposals/FLoC/FLOC-Whitepaper-Google.pdf" target="_blank" rel="noopener">l’API du système de cohortes</a> et délivrent des publicités ciblées non plus individuellement, mais à des groupes d&rsquo;utilisateurs relativement similaires. Cette API démocratise l&rsquo;accès à certaines informations relatives à l&rsquo;historique de navigation d&rsquo;une personne (et donc à ses intérêts généraux) pour tout site qui en fait la demande. Les sites qui connaissent les données personnelles d&rsquo;une personne (par exemple, lorsqu’une personne se connecte en utilisant son adresse email) pourraient enregistrer et révéler leur cohorte. Cela signifie que les informations sur les intérêts d&rsquo;une personne peuvent éventuellement devenir publiques, par exemple suite à une fuite de données comme celle qui <a href="https://www.businessinsider.fr/us/stolen-data-of-533-million-facebook-users-leaked-online-2021-4" target="_blank" rel="noopener">a récemment touché 533 millions d’utilisateurs de Facebook</a>. Pour que FLoC soit utile aux annonceurs, la cohorte d&rsquo;un utilisateur révélera forcément des informations sur son comportement et sans surprise, cela créera des risques concernant la protection de la vie privée.



Les cohortes FLoC ne devraient pas fonctionner comme des identifiants en soi sauf que toute entreprise capable d&rsquo;identifier un utilisateur &#8211; par exemple, en offrant des services de « connexion avec Google » &#8211; sera en mesure de relier les informations obtenues par FLoC au profil de l&rsquo;utilisateur.



Deux catégories d&rsquo;informations peuvent être exposées de cette manière :



<ul><li role="presentation">Des&nbsp;informations spécifiques sur l&rsquo;historique de navigation. Les traqueurs peuvent être en mesure de déterminer que tout utilisateur appartenant à une cohorte spécifique a probablement ou certainement visité des sites spécifiques (si en recoupant nos données avec celles d&rsquo;autres sources et sachant que Pierre, Paul&nbsp;et 100 autres utilisateurs ont visité le site A&nbsp;et font partie de la cohorte B, on peut statistiquement inférer que Martin&nbsp;a très probablement aussi visité ce site).&nbsp;</li><li role="presentation">Des informations générales sur les données démographiques ou les centres d’intérêts.&nbsp;</li></ul>



Tous les sites que vous visitez sauront quel type de personne vous êtes au premier contact, sans avoir à vous suivre à travers le web. De plus, comme votre cohorte FLoC sera mise à jour au fil du temps, les sites qui peuvent vous identifier par d&rsquo;autres moyens seront également en mesure de suivre l&rsquo;évolution de votre navigation.&nbsp;



<h3>Une menace pour les libertés et la vie privée</h3>



L&rsquo;objectif affiché de FLoC est d&rsquo;éviter de laisser des traqueurs accéder à des informations spécifiques liées à des personnes spécifiques, sauf que FLoC peut en réalité aider les traqueurs dans d’autres contextes. Même si Google est en mesure d&rsquo;itérer sur sa conception, l&rsquo;objectif principal du FLoC est en contradiction avec les libertés civiles.&nbsp;Les préjudices de la publicité ciblée ne se limitent pas aux violations de la vie privée, la publicité ciblée a aussi le pouvoir de discriminer.&nbsp;



Par définition, les publicités ciblées permettent aux annonceurs d&rsquo;atteindre certains types de personnes tout en en excluant d&rsquo;autres. Au fil des ans, le mécanisme de la publicité ciblée a souvent été utilisé à des fins d&rsquo;exploitation, de <a href="https://www.reuters.com/article/us-facebook-advertisers/u-s-charges-facebook-with-racial-discrimination-in-targeted-housing-ads-idUSKCN1R91E8" target="_blank" rel="noopener">discrimination</a> ou de <a href="https://stoponlinevaw.com/wp-content/uploads/2018/10/Black-ID-Target-by-Russia-Report-SOVAW.pdf" target="_blank" rel="noopener">manipulation</a>.



FLoC utilise un algorithme non supervisé pour créer ses cohortes. Cela signifie que personne n&rsquo;aura un contrôle direct sur la façon dont les gens seront regroupés. Idéalement, pour les annonceurs, FLoC créera des groupes ayant en commun des comportements et des intérêts significatifs. Mais le comportement en ligne est lié à toutes sortes de caractéristiques sensibles &#8211; des données <a href="https://ojs.aaai.org/index.php/ICWSM/article/view/14776" target="_blank" rel="noopener">démographiques</a> telles que le genre, l&rsquo;origine ethnique, l&rsquo;âge et le revenu, <a href="https://www.pnas.org/content/117/30/17680" target="_blank" rel="noopener">des traits de personnalité</a> et <a href="https://link.springer.com/chapter/10.1007/978-3-642-23620-4_22" target="_blank" rel="noopener">même la santé mentale</a>. Il est fort probable que FLoC regroupera également les utilisateurs selon certains de ces axes.



Avec un système d&rsquo;opt-in pour les annonceurs, et d’opt-out pour les utilisateurs, Google se vante d’une transparence et d’un contrôle fait directement par l&rsquo;utilisateur, tout en sachant pertinemment que la grande majorité de ses utilisateurs ne comprendront pas le fonctionnement du FLoC, voire n’auront pas conscience de son existence, et que très peu d&rsquo;entre eux feront l&rsquo;effort de le désactiver.&nbsp;



Chez Les-Tilleuls.coop, nous rejetons catégoriquement cette technologie. Le web devrait avant tout être au service des utilisateurs, et non à celui des publicitaires ou de la surveillance de masse.



<h3>Que faire ?</h3>



<h4>En tant qu&rsquo;utilisateur·trice :</h4>



N&rsquo;utilisez pas Google Chrome. Utilisez Firefox et installez l&rsquo;extension <a href="https://addons.mozilla.org/fr/firefox/addon/ublock-origin/" target="_blank" rel="noopener">uBlock Origin</a> qui bloque toutes les publicités et trackers.&nbsp;Dans les paramètres de Firefox, section « Vie privée&nbsp;et sécurité », activez&nbsp;le mode « Strict ». Si vous aimez utiliser Google Chrome, il est possible de désactiver le FLoC. Cela signifie que Google vous placera dans une cohorte aléatoire au lieu d&rsquo;une cohorte précise.



Google a aussi annoncé une option dans les paramètres de Chrome pour refuser FLoC :



<ul><li role="presentation">Déconnectez-vous de votre compte Google et désactivez la synchronisation des données d&rsquo;historique avec Chrome.</li><li role="presentation">Bloquez les cookies tiers ou naviguez en mode privé.</li><li role="presentation">Désactivez les options suivantes dans les contrôles d&rsquo;activité : « Activité sur le Web et les applications », “Inclure l&rsquo;historique Chrome et l&rsquo;activité liée aux sites, aux applications et aux appareils qui utilisent les services Google ».</li><li role="presentation">Décochez l’option de personnalisation dans les paramètres de <a href="https://adssettings.google.com/authenticated?hl=enhttps://adssettings.google.com/authenticated?hl=en" target="_blank" rel="noopener">Google Ads</a>. Vous pouvez aussi consulter et contrôler cette personnalisation <a href="http://www.youronlinechoices.com/fr/controler-ses-cookies/" target="_blank" rel="noopener">ici</a>.</li></ul>



<a href="https://www.eff.org/" target="_blank" rel="noopener">L&rsquo;EFF</a> a aussi lancé début avril <a href="https://amifloced.org/" target="_blank" rel="noopener">Am I FLoCed</a>, un site permettant de savoir si votre navigateur fait partie d’une cohorte.&nbsp;



<h4>En tant que développeur·se :</h4>



Vous pouvez déclarer à Google que votre site ne souhaite pas être inclus dans la liste des sites pour le calcul de la cohorte. Si vous ne déclarez rien,&nbsp;cela&nbsp;sera activé uniquement si le site affiche des publicités ciblées ou utilise l&rsquo;API JavaScript de FLoC.



Pour le désactiver sur votre site, définissez l’en-tête HTTP suivante :



<pre class="wp-block-preformatted">Permissions-Policy: interest-cohort=()</pre>



Plusieurs outils ou technologies sont déjà en train de mettre en place cet en-tête sur leurs sites parmi lesquels :&nbsp;&nbsp;



<ul><li role="presentation"><a href="https://github.com/api-platform/api-platform/pull/1879" target="_blank" rel="noopener">API Platform</a></li><li role="presentation"><a href="https://github.com/caddyserver/website/pull/152" target="_blank" rel="noopener">Caddy</a>&nbsp;</li><li role="presentation"><a href="https://github.com/php/web-php/commit/9bc507afae21c9da1c30ee1ab0654fea8150549b" target="_blank" rel="noopener">PHP</a></li><li role="presentation"><a href="https://make.wordpress.org/core/2021/04/18/proposal-treat-floc-as-a-security-concern/" target="_blank" rel="noopener">WordPress</a></li></ul>



Et vous, que pensez-vous de cette initiative de Google ? Connaissez-vous d&rsquo;autres projets qui ont mis en place l&rsquo;en-tête empêchant d&rsquo;être inclus dans ces listes ? <a href="https://twitter.com/coopTilleuls" target="_blank" rel="noopener">Dites-le nous</a> !&nbsp;

Pourquoi Google FLoC est problématique pour la sécurité des utilisateurs du web

yarn add --dev @symfony/webpack-encore tailwindcss postcss-loader autoprefixer 

@tailwind base;
@tailwind components;
@tailwind utilities;

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [],
  prefix: '',
}

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer'),
        require('postcss-import')
    ]
}

    .addStyleEntry('tailwind', './assets/styles/tailwind.css')

.enablePostCssLoader((options) => {
    options.config = {
        path: './postcss.config.js'
    };
})

yarn remove tailwindcss postcss-import postcss-loader autoprefixer
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
yarn add postcss-loader@^3.0.0 postcss-import@^12.0

yarn remove tailwindcss @tailwindcss/postcss7-compat
yarn add tailwindcss@latest postcss@latest autoprefixer@latest

&lt;div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:w-full lg:pb-28 xl:pb-32">
    &lt;div class="relative pt-6 px-4 sm:px-6 lg:px-8">
        &lt;nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
            &lt;div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">

&lt;div role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
    &lt;div class="px-2 pt-2 pb-3 space-y-1" role="none">
        {% if is_granted('ROLE_ADMIN') %}
            &lt;a href="{{ path('lobby') }}"
               class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
               role="menuitem">Rejoindre le lobby&lt;/a>
            &lt;a href="{{ path('lobbyPending') }}"
               class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
               role="menuitem">Visualiser le lobby&lt;/a>
        {% else %}
            &lt;a href="{{ path('lobby') }}"
               class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
               role="menuitem">Rejoindre le lobby&lt;/a>
            &lt;a href="{{ path('match_maker_index') }}"
               class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
               role="menuitem">Consulter mes matchs&lt;/a>
        {% endif %}
    &lt;/div>
    &lt;div role="none">
        &lt;a href="{{ path('app_logout') }}"
           class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100"
           role="menuitem">
            Se déconnecter
        &lt;/a>
    &lt;/div>
&lt;/div>

.menu__link {
    @apply block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100;
}

symfony composer require symfony/webpack-encore-bundle

J&rsquo;ai récemment voulu tester la version 2 de&nbsp;<a href="https://tailwindcss.com/" target="_blank" rel="noopener">TailwindCSS</a>. Avant de commencer cet article, je préfère vous prévenir : je n’aime pas le front ! Je suis un pur développeur PHP, j&rsquo;aime la console et les appels curl.



Pour remettre dans le contexte, dans le cadre d&rsquo;un cours que je donnais à des étudiants en 4e année d&rsquo;informatique, nous avons réalisé un petit système de matchmaking entre amis. Pour rendre le tout un peu joli, je me suis dit d’essayer tailwindCSS vu que tout le monde en parle. Résultat des courses – et cela n&rsquo;engage que moi –&nbsp;je suis moyennement convaincu et&nbsp;j&rsquo;aime autant écrire mon CSS. Laissez moi vous expliquer pourquoi.



En tant que développeur back, j&rsquo;ai déjà travaillé avec Jquery, Babel, Backbone, Angular, React, Vuejs, Vanillajs, Bootstrap, Yeti-css, Bulma-css, Foundation, MaterialUi et j&rsquo;en passe. Même si le front n&rsquo;est absolument pas mon domaine d&rsquo;expertise, le temps m&rsquo;a appris à déceler ce que j&rsquo;aime&nbsp;de ce que je n&rsquo;aime pas quand je dois intervenir sur un projet dans ces parties. Le projet sur lequel je me suis amusé était une composition Symfony/Twig des plus classiques.



Pour commencer, on fait l&rsquo;installation avec Symfony et je choisis&nbsp;d&rsquo;utiliser <a href="https://symfony.com/doc/current/frontend.html" target="_blank" rel="noopener">Webpack Encore</a>&nbsp;:





J&rsquo;installe ensuite les dépendances de Tailwind :





Avec ces deux commandes, je dispose d&rsquo;un répertoire `assets` et `node_modules` à la racine de mon projet. Il contient mes images, CSS&nbsp;et JS. J&rsquo;ai également le package.json pour les dépendances et le&nbsp;webpack.config.js pour configurer la compilation. Je vais devoir ajouter dans tout ce fatras le style de Tailwind. Je crée alors le fichier `assets/styles/tailwind.css` :





Je vois également que je peux créer un fichier de configuration `tailwind.config.js` à la racine du projet pour venir personnaliser la configuration de base. Je ne sais pas encore ce que je vais en faire, mais allons-y :





Pour charger tout ça, la doc m&rsquo;indique que je dois utiliser l&rsquo;outil `postcss`&nbsp;si je travaille avec Webpack. Hop hop hop ! Par contre, la doc n&rsquo;indique pas son usage, j&rsquo;ai dû fouiner sur internet. Je crée le fichier `postcss.config.js` à la racine du projet :&nbsp;





Je n&rsquo;ai pas encore compilé mais, je suis confiant (mais&nbsp;si naïf !). Au tour de Webpack : je modifie la configuration pour lui donner les plugins et CSS à manger.



Le CSS&nbsp;:





Suivi de l’activation de `postcss` :







BOOM Error, le naïf&#8230; J&rsquo;ai 2 problèmes, j&rsquo;ai besoin de `postcss-import`. Qu&rsquo;à cela ne tienne :





BOOM Error, le naïf&#8230;



Tailwind utilise le très récent `postcss` dans sa version 8, mais mon Webpack l&rsquo;utilise dans sa version 7. J&rsquo;ai un petit problème de compatibilité, je fouine, je fouine et&nbsp;ouf ! Dans la doc de Tailwind, ils ont anticipé ce problème&nbsp;et ça, j’apprécie :





Dès que mes autres dépendances auront fait la mise à jour je pourrais supprimer la couche de compatibilité :







Joie ! Naïf Niveau 2 !



Il ne me reste plus qu&rsquo;à parcourir la doc, les paradigmes et exemples d&rsquo;intégration pour tenter de rendre quelque chose. Des colonnes, des boutons, un menu, du responsive, des tableaux, un login, de quoi créer un compte. Voilà la somme des éléments que j&rsquo;ai intégrés durant ma soirée, avec Independence Day en fond (le 2 n’existe pas à mes yeux). Après 2h33 minutes, voici un aperçu du résultat :&nbsp;



<figure class="wp-block-image"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/396.png" alt="Le résultat" title="Le résultat"/></figure>



Je ne suis pas fan dans l&rsquo;immédiat de Tailwind. Oui, ça marche, ça compile et fait un plus petit fichier CSS. Par contre, si&nbsp;je l&rsquo;utilise tel quel&nbsp;j&rsquo;obtiens du HTML pas très appétissant à lire :





Ou encore :&nbsp;





Pour faire propre, il faut passer un temps monstrueux à faire des agrégations :





Le `@apply` permettant la détection par Tailwind dans le CSS.



Au final, si je dois passer tout ce temps à apprendre leur nomenclature&nbsp;pour traduire dans ma tête ce que ça fait en vrai CSS et l&rsquo;appliquer à nouveau, le vieux que je suis n&rsquo;est pas convaincu.



À ce compte-là j&rsquo;aime autant la satisfaction de peaufiner mon CSS en l&rsquo;écrivant sans surcouche : j&rsquo;aurais le même résultat&nbsp;et de la frustration de phase de découverte en moins. En début d&rsquo;année, j&rsquo;ai passé un peu (c&rsquo;est faux, des heures) de temps sur la <a href="https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw" target="_blank" rel="noopener">chaîne Youtube de Kevin Powell</a>.&nbsp;Ses vidéos sont de vraies pépites pour ceux qui, comme moi,&nbsp;ne sont pas super super forts en intégration CSS mais qui veulent se débrouiller et&nbsp;découvrir comment réaliser des intégrations de pages complètes en partant du mobile-first vers le full-desktop.



Je vois vraiment Tailwind comme un assistant sous stéroïdes de l&rsquo;intégrateur indécis. Selon moi, on va aussi vite –&nbsp;voire plus vite – à intégrer une maquette passée entre les mains d&rsquo;un bon webdesigner&nbsp;que de peaufiner la configuration de Tailwind et de nos classes intermédiaires. Bien entendu, je ne suis pas fermé aux réflexions et approches plus modernes. En lisant l&rsquo;article de <a href="https://adamwathan.me/css-utility-classes-and-separation-of-concerns/," target="_blank" rel="noopener">Adam Wathan</a>, je comprends bien qu&rsquo;il y a les 2 écoles&nbsp;mais à titre personnel, je n&rsquo;aime pas avoir 27 classes sur mon HTML. Un « Hardcore » intégrateur en accord avec l&rsquo;article de Adam trouvera des choses à reprocher à mon point de vue mais comme je ne suis pas un développeur&nbsp;front, je n&rsquo;ai pas la même sensibilité.



Petit point intéressant à suivre pour Tailwind, c&rsquo;est qu&rsquo;en cas de « pas le choix » et « faut aller vite » ils ont un site de snippets avec des cas d&rsquo;usage : <a href="https://tailwindui.com/" target="_blank" rel="noopener">https://tailwindui.com/</a>. Il y a quelques snippets offerts (une vingtaine je dirais, je n&rsquo;ai pas compté, et je viens de fermer l&rsquo;onglet ^^&rsquo;) et pour les autres il faut payer. À côté de ça, <a href="https://github.com/alpinejs/alpine" target="_blank" rel="noopener">AlpineJS</a> ça marche aussi. Je n’ai pas fait grand chose avec (juste des transitions&nbsp;et de l&rsquo;affichage #jQueryNextGen) mais on trouve la&nbsp;même approche que React/Vue : des attributs dans les balises HTML, des directives, quelques variables d&rsquo;état, un peu de réactivité&#8230; Ça fait le job quand on n’a pas grand-chose à faire. On a la possibilité de « bind » une directive avec une fonction JS pour ajouter du comportement. Ça peut s&rsquo;avérer utile, mais sachant à l&rsquo;avance que le projet va grandir, j&rsquo;aime autant mettre directement Vuejs ou React. Quitte à choisir un entre-deux, ce serait SvelteJS. Mais je ne m’étendrai pas plus sur le sujet, ce n’est pas le but de cet article.



Pour conclure, certains y trouveront leur compte, ce qui n&rsquo;est pas mon cas, mais je peux comprendre l&rsquo;engouement dont je soupçonne l&rsquo;habile campagne marketing de Tailwind d&rsquo;y être pour quelque chose.



Merci de m&rsquo;avoir lu, et à bientôt !

Quand un développeur PHP teste TailwindCSS v2

Alors pourquoi Les-Tilleuls.coop ont choisi Next.js plut&ocirc;t que Symfony ?


Premi&egrave;re question : PHP ou JavaScript ?


D’abord écrit en <a href="https://angularjs.org/" target="_blank" rel="noopener">AngularJS</a> puis en <a href="https://reactjs.org/" target="_blank" rel="noopener">React</a> avec un serveur express, notre site a migré, il y a quelques semaines, sur <a href="https://nextjs.org/" target="_blank" rel="noopener">Next.js</a>. Je ne vous en veux pas de ne pas l’avoir constaté même si le gain de performance est manifeste. Le Server Side Rendering (SSR), encore mis en doute par certains consultants SEO il y a quelques années, n’a plus rien à prouver aujourd’hui. Si des tentatives plus ou moins réussies de mixer PHP et framework JS ont émergé&nbsp;à l’époque, la question de la technologie à utiliser pour réaliser un site internet en 2020 est complètement ouverte.



<figure class="wp-block-image"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/362.jpg" alt="null" title="dev-css"/></figure>







<h3>&nbsp;</h3>



<h3>Première question : PHP ou JavaScript ?</h3>



Il y a quelques mois voire années, mon discours était que nous ne devions utiliser le JavaScript qu’en cas de besoin. C’était une époque où les scripts chargés par les navigateurs étaient de plus en plus lourds pour une expérience utilisateur à peine améliorée: avoir des transitions de pages, des rafraîchissements de blocs&#8230; Aussi je n’ai jamais vraiment adhéré aux solutions qui prônaient l’utilisation massive de framework JS pour faire des sites vitrines ou e-commerce, les hybrides PHP/JavaScript en fonction de ce qui était référençable ou non, la génération de site pseudo-statiques… En plus de forcer la connaissance de plusieurs langages, ces solutions obligeaient les développeurs à trouver des corrections à des problèmes qu’ils n’auraient jamais rencontrés&nbsp;autrement (faire coexister deux routeurs en fonction de la section du site visitée par exemple). Comme disait Desproges : « Vivre en couple c’est résoudre ensemble des problèmes qu’on n’aurait jamais eu tout seul ».



Avec l’avènement et la facilité d’utilisation du SSR dans les frameworks JS modernes, et plus encore avec le gain de poids que permettent les évolutions du langage et des frameworks comme Svelte, mon discours a radicalement changé. A l&rsquo;instar de ce que ferait une application PHP classique, le SSR vous permet de requêter une API et de calculer le rendu HTML directement depuis le serveur pour un temps de rendu identique, alors pourquoi s’en priver ?



Faut-il jeter le PHP pour autant ? Je ne pense pas. Aujourd’hui faire un site en Twig avec un peu de Javascript quand c’est nécessaire peut être une solution tout aussi viable que tout miser sur React. Le premier critère qui devrait guider votre choix, est la composition de vos équipes. Même si le PHP est en perte de vitesse face au rouleau compresseur qu’est l’environnement JS, si vos équipes sont composées de développeurs Symfony, est-il vraiment nécessaire de les former à un nouveau langage, un nouveau framework, de nouvelles méthodes ? Si deux technologies sont équivalentes pour vos besoins, votre principal souci devrait être que votre choix soit plébiscité par vos équipes. Un développeur heureux et un développeur qui ne râle pas&#8230;bon ok, c’est un développeur qui râle moins.



<figure class="wp-block-image"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/364.gif" alt="null" title="dev-php"/></figure>



<h3>Alors pourquoi Les-Tilleuls.coop ont choisi Next.js plutôt que Symfony ?</h3>



Si vous vous posez cette question c’est sans doute que vous connaissez notre expertise en Symfony, mais que vous ignorez que nous intervenons aussi sur les quatre grands frameworks qui agitent la communauté JS ces dernières années : React, Vue, Angular et récemment Svelte.



Premier élément de réponse : c’est votre serviteur qui a fait ces migrations successives. Même si j’ai 20 ans de développement PHP derrière moi, dans la mesure où <a href="https://twitter.com/derickr/status/1274134192155131905" target="_blank" rel="noopener">je n’utilise pas Xdebug</a>, je reste amateur, et mon expertise est plus portée sur le JavaScript. Pour la migration d’Angular.js vers React, je connaissais déjà Next.js mais il me semblait important de comprendre les mécanismes qui se cachaient derrière le SSR. En effet il est tout à fait possible de faire un serveur Express et de demander à React de renvoyer le rendu HTML d’une route spécifique. Dans la mesure où ce mode de rendu ne tient pas compte du cycle de vie des composants, vous devez gérer vous-même les requêtes à l’API, l’hydratation des composants avec les données récupérées, les différentes erreurs… Ça peut sans doute paraître effrayant, mais avec quelques astuces ça ne l’est pas tant que ça et ça m’a permis de désacraliser complètement ce qui était nécessaire au Server Side Rendering.&nbsp;



Il y a peu, un ami me disait avec beaucoup de lassitude : “Pouah, déjà je dois découvrir React, mais en plus il faut apprendre Next”. Ce n’était pas la première fois que j’entendais ce genre de discours. La hype faite autour de Next/Nuxt/Sapper est telle que certains développeurs sont découragés d’avance. À dire vrai, Next.js c’est juste React + un routeur (très simple) + le préchargement de données (très simple) + du SSR (où il n’y a rien à faire donc très simple) + beaucoup de malice… Si vous savez déjà faire du React, vous avez seulement deux ou trois conventions à apprendre pour pouvoir bénéficier du SSR avec Next.js. Pour vous donner un ordre d’idée, le passage de la version React + Express à Next n’a pris qu’une poignée de jours.



<h3>Et maintenant ?</h3>



Notre site devrait subir d’ici peu une évolution graphique, mais peut-être est-il temps d’aborder une révolution technologique ? Peut-être est-ce l’occasion de migrer vers un autre framework, de rendre le site toujours plus léger et l’expérience améliorée. Svelte/Sapper est <a href="https://www.youtube.com/watch?v=soKI-6WoyAU&amp;t=2s" target="_blank" rel="noopener">mon sujet d’étude</a> ces derniers temps alors pourquoi ne pas faire deux versions du nouveau site pour pouvoir les comparer ?



Ressources graphiques :&nbsp;<a href="https://www.freepik.com/free-photos-vectors/technology">Technology vector created by pikisuperstar &#8211; www.freepik.com</a>

Quelle technologie choisir pour son site internet en 2020 ?

Pouvez-vous nous pr&eacute;senter le contexte technique qui a abouti &agrave; notre intervention ?

Benjamin, pouvez-vous vous pr&eacute;senter ainsi que votre projet ?

Benjamin et&nbsp;Thomas, vous pouvez nous en dire plus sur les solutions mises en place ?

Quel est le bilan sur le court terme, les premier m&eacute;triques ?

Comment voyez-vous l'avenir et les prochaines &eacute;volutions de votre projet ?

<a href="https://www.leah.care/" target="_blank" rel="noopener">Leah.care</a> est une solution de&nbsp;téléconsultation pour les professionnels de santé. Suite à la récente intervention de plusieurs de nos consultants au sein de leur société, nous avons pris l&rsquo;initiative de réaliser une étude de cas de cette mission.&nbsp;Partons à la rencontre&nbsp;de ce projet en compagnie de <a href="https://twitter.com/bbzlevy" target="_blank" rel="noopener">Benjamin&nbsp;Bouzerau Lévy</a>, COO chez Leah, et <a href="https://twitter.com/thc_o_lin" target="_blank" rel="noopener">Thomas Colin</a>, développeur JS chez Les-Tilleuls.coop.



<h4>Benjamin, pouvez-vous vous présenter ainsi que votre projet ?</h4>



Je suis Benjamin, co-fondateur et CPO de Wellium société experte en télémédecine créée en janvier 2016. Nous sommes aujourd’hui 15 collaborateurs à travailler principalement sur Leah, notre solution de téléconsultation dédiée aux professionnels de santé.



<figure class="wp-block-image"><a href="https://www.leah.care/" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/360.png" alt="leah web" title="leah web"/></a></figure>







<h4>Pouvez-vous nous présenter le contexte technique qui a abouti à notre intervention ?</h4>



Nous avons lancé la première version de Leah en septembre 2018, afin de proposer aux professionnels de santé, une solution de téléconsultation prise en charge par l’assurance maladie. Depuis, c’est plusieurs milliers de consultations qui ont été réalisées depuis notre plateforme et autant d’apprentissage pour nous.&nbsp;



Dans ce contexte, nous avons décidé en début d’année 2020 de faire une refonte de Leah, afin de répondre au mieux à tous les cas d’usages que nous avons rencontré et de permettre à nos utilisateurs une solution de téléconsultation optimale. L’objectif était de créer une système de cabinet virtuel que chaque professionnel de santé peut gérer, en y invitant facilement ses patients via une salle d’attente virtuelle, exactement comme dans un cabinet physique. Pour conduire cette refonte, nous avons décidé de passer par Les-Tilleuls.coop. En effet, nos équipes techniques étant déjà staffées sur la version actuelle de Leah, nous n’avions pas la possibilité d’internaliser le développement de cette v2.&nbsp;



Nous avions quatre&nbsp;facteurs determinants pour la conduite du projet :&nbsp;



<ul><li role="presentation">Respect d’un budget</li><li role="presentation">Respect d’un planning</li><li role="presentation">Communication fluide entre nos équipes et le prestataire</li><li role="presentation">Excellence technique</li></ul>



Suite à un cadrage technique en amont du lancement du projet, nous avons pu être rassurés sur ces quatre&nbsp;points et lancer le développement.



<h4>Benjamin et&nbsp;Thomas, vous pouvez nous en dire plus sur les solutions mises en place ?</h4>



Après quelques échanges techniques afin de prendre en compte nos contraintes, nous avons pu valider les outils et une stack technique solide. Un cahier des charges a été réalisé et validé très rapidement. À partir de là, et en ayant eu un aperçu du niveau technique&nbsp;des équipes, nous avons décidé de faire totalement confiance aux Tilleuls dans l’évolution du projet. Des points étaient organisés régulièrement pour faire un suivi de l’évolution du projet, faire des choix techniques ou fonctionnels.&nbsp;



D&rsquo;un point de vue technique, Les Tilleuls ont utilisé les outils et technologies suivants :&nbsp;



<ul><li role="presentation"><a href="https://tokbox.com/developer/guides/">OpenTok</a>, une API permettant la visioconférence.</li><li role="presentation"><a href="https://mercure.rocks/">Mercure</a>, pour le signaling rapide à mettre en place.</li><li role="presentation"><a href="https://reactjs.org/">React</a> et <a href="https://nx.dev/">NX</a> pour le front et simplifier le&nbsp;code,&nbsp;le découpage et l’architecture.</li><li role="presentation"><a href="https://api-platform.com/">API Platform</a>.</li><li role="presentation"><a href="https://www.cypress.io/">Cypress</a>, pour les tests e2e.</li><li role="presentation">CI / CD avec <a href="https://github.com/features/actions">Github Actions</a>.</li><li role="presentation"><a href="https://aws.amazon.com/fr/cognito/">Cognito</a> pour l’authentification.</li></ul>



<h4>Quel est le bilan sur le court terme, les premier métriques ?</h4>



<ul><li>Respect du budget (même un tout petit peu en dessous).&nbsp;</li><li>Respect des délais (livré même un petit peu avant).&nbsp;</li><li>Communication claire et fluide entre les équipes.</li><li>Respect à 100% du cahier des charges.&nbsp;</li></ul>



<h4>Comment voyez-vous l&rsquo;avenir et les prochaines évolutions de votre projet ?</h4>



Les Tilleuls ont gagné toute notre confiance sur ce projet.&nbsp;Dans nos futurs projets que nous devrons externaliser, nous savons d’ores et déjà vers qui nous tourner. La base de cette nouvelle version est très solide et nous permet de mettre en place toutes les évolutions que nous souhaitons : un système de marque blanche, une salle d’attente personnalisée, un système d’échange de documents et un système de paiement de la consultation.



Merci Benjamin et Thomas pour ce témoignage ! Vous avez besoin d&rsquo;un accompagnement ou de développement sur votre projet ? <a href="https://les-tilleuls.coop/fr/contact" target="_blank" rel="noopener">Contactez-nous</a>, nous nous ferons un plaisir de vous aider !

Étude de cas : Leah.care x Les-Tilleuls.coop

Il y a quelques semaines, nous vous avions annoncé la sortie de Sylius Click ‘N’ Collect,&nbsp;<a href="https://les-tilleuls.coop/fr/blog/article/sylius-click-n-collect" target="_blank" rel="noopener">une solution permettant aux commerçants de continuer à vendre sans contact physique ni livraison</a>, en toute sécurité et dans le respect des consignes de sécurité sanitaire.



Créer sa boutique e-commerce, mettre en place tous ses paramètrages ou encore gérer ses propres serveurs sont des tâches complexes et rapidement chronophages. Nous sommes aujourd’hui ravis de vous annoncer <a href="https://www.click-n-collect.shop/fr/pricing" target="_blank" rel="noopener">la disponibilité d&rsquo;une version hébergée de Sylius Click ’N’ Collect disponible immédiatement</a>&nbsp;!&nbsp;Depuis le site <a href="https://www.click-n-collect.shop/fr/" target="_blank" rel="noopener">click-n-collect.shop</a>, vous pouvez obtenir votre boutique prêt à l&#8217;emploi en quelques minutes. <a href="https://www.click-n-collect.shop/fr/pricing" target="_blank" rel="noopener">Découvrez ici</a> comment créer votre boutique et commencez à vendre dès maintenant !&nbsp;



<figure class="wp-block-image"><a href="https://www.click-n-collect.shop/fr/" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/343.jpg" alt="logosponsor" title="logosponsor"/></a></figure>



Notre version hébergée est fournie avec :&nbsp;



<ul><li style="text-align: justify;" role="presentation">Une configuration par défaut optimale vous permettant de vendre immédiatement (langues, paiement en magasin, catégories, taxons, Click &lsquo;N&rsquo; collect&#8230;)</li><li style="text-align: justify;" role="presentation">Le paiement en-ligne, par CB (via Stripe) ou via Paypal, ainsi qu’en magasin (l’ajout&nbsp; d’autres solutions de paiement est possible sur demande)</li><li style="text-align: justify;" role="presentation">La possibilité d’expédier les commandes, ou bien sûr, de proposer du retrait en magasin ou du Drive via notre module Click N Collect</li><li style="text-align: justify;" role="presentation">La gestion de l’inventaire</li><li style="text-align: justify;" role="presentation">L&rsquo;émission de factures</li><li style="text-align: justify;" role="presentation">Les remboursements</li><li style="text-align: justify;" role="presentation">Un support pour la mise en place de votre boutique</li><li style="text-align: justify;" role="presentation">Des fonctionnalités de personnalisation (logo, conditions générales de vente, pied de page, e-mails de confirmation de commande, etc).</li><li style="text-align: justify;" role="presentation">La vente multicanale</li><li style="text-align: justify;" role="presentation">Le support des langues et des devises multiples (ex : anglais + français, livres + euros)</li><li style="text-align: justify;" role="presentation">Un hébergement haute disponibilité basé sur Kubernetes (un système de gestion de “conteneurs” s’appuyant sur les 15 ans d’expérience de Google dans le domaine)</li><li style="text-align: justify;" role="presentation">La possibilité d’utiliser un nom de domaine personnalisé</li><li style="text-align: justify;" role="presentation">La mise en place 100% automatique de HTTPS</li></ul>



Poursuivez votre activité pendant le confinement en créant <a href="https://www.click-n-collect.shop/en/pricing">votre boutique de Click et&nbsp;Collect en quelques clics</a> ! La version hébergée de Sylius Click ‘N’ Collect est gratuite pour les <a href="https://www.les-scop.coop/sites/fr/les-scop/qu-est-ce-qu-une-scop.html">SCOP, SCIC</a> et associations de moins de 10 salariés et <a href="https://www.facebook.com/camillefleurslb/posts/4369164639775740">quelques premiers clients</a> nous font déjà confiance dans cette initiative.



Vous&nbsp;souhaitez des informations complémentaires ? Contactez-nous, <a href="https://les-tilleuls.coop/fr/blog/article/covid-19">nous restons disponibles à distance</a>&nbsp;!

Sylius Click 'N' Collect désormais disponible en version hébergée !

New property name (press  to stop adding fields):
> newsField type (enter ? to see all types) [string]:
>Field length [255]:
>Can this field be null in the database (nullable) (yes/no) [no]:
>updated: src/Entity/Comment.phpAdd another property? Enter the property name (or press  to stop adding fields):
> bodyField type (enter ? to see all types) [string]:
> textCan this field be null in the database (nullable) (yes/no) [no]:
>updated: src/Entity/Comment.php

/**
- * @ApiResource()
+ * @ApiResource(
+ *     collectionOperations={"post", "get"},
+ *     itemOperations={"get"}
+ * )

+ use ApiPlatformCoreAnnotationApiFilter;
use ApiPlatformCoreAnnotationApiResource;
+ use ApiPlatformCoreBridgeDoctrineOrmFilterSearchFilter;
+ use ApiPlatformCoreAnnotationApiFilter;
use ApiPlatformCoreAnnotationApiResource;
+ use ApiPlatformCoreBridgeDoctrineOrmFilterSearchFilter;

// src/Repository/NewsRepository.php

namespace AppRepository;

class NewsRepository
{
    private const NEWS = [
        'week-601' => [
            'slug' => 'week-601',
            'title' => 'A week of symfony #601 (2-8 July 2018)',
            'body' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.',
        ],
        'symfony-live-usa-2018' => [
            'slug' => 'symfony-live-usa-2018',
            'title' => 'Join us at SymfonyLive USA 2018!',
            'body' => 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.'
        ],
    ];

    public function findAll(): iterable
    {
        return array_values(self::NEWS);
    }

    public function findOneBySlug(string $slug): ?array
    {
        return self::NEWS[$slug] ?? null;
    }
}

/**
 * @ORMColumn(type="string", length=255)
+ * @AssertChoice(choices={"week-601", "symfony-live-usa-2018"})
 * @ApiFilter(SearchFilter::class)
 */
private $news;/**
 * @ORMColumn(type="text")
+ * @AssertNotBlank()
 */
private $body;

$ composer require encore 
# Si vous n’avez pas encore installé le gestionnaire de paquets Yarn, récupérez le sur https://yarnpkg.com/en/ 
$ yarn install 
$ yarn add --dev vue vue-loader@^14 vue-template-compiler

// webpack.config.js
Encore
    // ...
+   .addEntry('js/comments', './assets/comments/index.js')
+   .enableVueLoader()

&lt;!-- assets/comments/CommentSystem.vue -->
&lt;template>
    &lt;div>
        &lt;ol reversed v-if="comments.length">
            &lt;li v-for="comment in comments" :key="comment['@id']">{{ comment.body }}&lt;/li>
        &lt;/ol>
        &lt;p v-else>No comments yet&lt;/p>        &lt;form id="post-comment" @submit.prevent="onSubmit">
            &lt;textarea name="new-comment" v-model="newComment"
                      placeholder="Your opinion matters! Send us your comment.">&lt;/textarea>            
            &lt;input type="submit" :disabled="!newComment">
        &lt;/form>
    &lt;/div>
&lt;/template>
&lt;script>
    export default {
        props: {
            news: {type: String, required: true}
        },
        methods: {
            fetchComments() {
                fetch(`/api/comments?news=${encodeURIComponent(this.news)}`)
                    .then((response) => response.json())
                    .then((data) => this.comments = data['hydra:member'])
                ;
            },
            onSubmit() {
                fetch('/api/comments', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/ld+json',
                        'Content-Type': 'application/ld+json'
                    },
                    body: JSON.stringify({news: this.news, body: this.newComment})
                })
                    .then(({ok, statusText}) => {
                        if (!ok) {
                            alert(statusText);
                            return;
                        }                        this.newComment = '';
                        this.fetchComments();
                    })
                ;
            }
        },
        data() {
            return {
                comments: [],
                newComment: '',
            };
        },
        created() {
            this.fetchComments();
        }
    }
&lt;/script>

// assets/comments/index.js
import Vue from 'vue';
import CommentSystem from './CommentSystem';
new Vue({
    el: '#comments',
    components: {CommentSystem}
});

{% block body %}
&lt;h1>{{ item.title }}&lt;/h1>{{ item.body }}
+ &lt;div id="comments">
+     &lt;comment-system news="{{ item.slug }}">&lt;/comment-system>
+ &lt;/div>
{% endblock %}
+ {% block javascripts %}
+     &lt;script src="{{ asset('build/js/comments.js') }}">&lt;/script>
+ {% endblock %}

&lt;?php

namespace AppTests;

use SymfonyComponentPantherPantherTestCase;

class CommentsTest extends PantherTestCase
{
    public function testComments()
    {
        $client = static::createPantherClient();
        $crawler = $client->request('GET', '/news/symfony-live-usa-2018');
        $client->waitFor('#post-comment'); // Wait for the form to appear, it may take some time because it's done in JS
        $form = $crawler->filter('#post-comment')->form(['new-comment' => 'Symfony is so cool!']);
        $client->submit($form);
        $client->waitFor('#comments ol'); // Wait for the comments to appear        $this->assertSame(self::$baseUri.'/news/symfony-live-usa-2018', $client->getCurrentURL()); // Assert we're still on the same page
        $this->assertSame('Symfony is so cool!', $crawler->filter('#comments ol li:first-child')->text());
    }
}

Fonctionnalit&eacute;s suppl&eacute;mentaires (Captures d&rsquo;&eacute;cran, Injections JS)


$this->assertSame('Symfony is so cool!', 
$crawler->filter('#comments ol li:first-child')->text());
+ $client->takeScreenshot('screen.png');

Merci, l&rsquo;Open Source

&lt;?php
// src/Controller/NewsController.php

namespace AppController;

use AppRepositoryNewsRepository;
use SymfonyComponentHttpFoundationResponse;
use SymfonyComponentRoutingAnnotationRoute;
use SymfonyBundleFrameworkBundleControllerController;

class NewsController extends Controller
{
    private $newsRepository;

    public function __construct(NewsRepository $newsRepository)
    {
        $this->newsRepository = $newsRepository;
    }

    /**
     * @Route("/", name="news_index")
     */
    public function index(): Response
    {
        return $this->render('news/index.html.twig', [
            'collection' => $this->newsRepository->findAll(),
        ]);
    }

    /**
     * @Route("/news/{slug}", name="news_item")
     */
    public function item(string $slug): Response
    {
        if (null === $news = $this->newsRepository->findOneBySlug($slug)) {
            throw $this->createNotFoundException();
        }
        return $this->render('news/item.html.twig', ['item' => $news]);
    }
}

{# templates/news/index.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}News{% endblock %}
{% block body %}
    {% for item in collection %}
        &lt;article id="{{ item.slug }}">
            &lt;h1>&lt;a href="{{ path('news_item', {slug: item.slug}) }}">{{ item.title }}&lt;/a>&lt;/h1>
            {{ item.body }}
        &lt;/article>
    {% endfor %}
{% endblock %}

{% extends 'base.html.twig' %}
{% block title %}{{ item.title }}{% endblock %}
{% block body %}
    &lt;h1>{{ item.title }}&lt;/h1>
    {{ item.body }}
{% endblock %}

&lt;?php
// tests/NewsControllerTest.php

namespace AppTests;

use SymfonyBundleFrameworkBundleTestWebTestCase;

class NewsControllerTest extends WebTestCase
{
    public function testNews()
    {
        $client = static::createClient();
        $crawler = $client->request('GET', '/');
        $this->assertCount(2, $crawler->filter('h1'));
        $this->assertSame(['week-601', 'symfony-live-usa-2018'], $crawler->filter('article')->extract('id'));
        $link = $crawler->selectLink('Join us at SymfonyLive USA 2018!')->link();
        $crawler = $client->click($link);
        $this->assertSame('Join us at SymfonyLive USA 2018!', $crawler->filter('h1')->text());
    }
}

La classe WebTestCase

Utiliser Panther pour ex&eacute;cuter un sc&eacute;nario dans un navigateur

// tests/NewsControllerTest.php

namespace AppTests;

-use SymfonyBundleFrameworkBundleTestWebTestCase;
+use SymfonyComponentPantherPantherTestCase;

-class NewsControllerTest extends WebTestCase
+class NewsControllerTest extends PantherTestCase
{
    public function testNews()
    {
-        $client = static::createClient(); // Still work, if needed
+        $client = static::createPantherClient();

# créez le projet
$ composer create-project symfony/skeleton news-website
$ cd news-website/# ajoutez quelques dépendances
$ composer require twig annotations
$ composer require --dev maker tests# lancez le serveur web PHP intégré
$ php -S 127.0.0.1:8000 -t public

Tester le code HTML g&eacute;n&eacute;r&eacute; par le client


$ ./bin/console make:entity --api-resource Comment

<a href="https://symfony.com/blog/introducing-symfony-panther-a-browser-testing-and-web-scrapping-library-for-php" target="_blank" rel="noopener">Retrouvez la publication d&rsquo;origine [EN] ici</a>.



Depuis sa toute première version, le framework <a href="https://symfony.com/doc/current/testing.html#functional-tests">Symfony 2 fournit une suite d’outils</a> permettant de créer des tests fonctionnels. Les composants BrowserKit et DomCrawler sont notamment utilisés pour simuler un navigateur web avec une API developer-friendly.&nbsp;



<h3>La classe WebTestCase</h3>



Rafraîchissons un peu notre mémoire en créant un petit site d’information, et en écrivant la suite de tests fonctionnels qui va bien :





Nous sommes prêts à coder !&nbsp;Commençons par ajouter une classe pour stocker et récupérer les publications de notre site :





Cette implémentation n’est pas très dynamique mais elle fera l’affaire pour le moment. Maintenant, nous avons besoin d’un contrôleur et du template Twig correspondant pour afficher les dernières informations de notre projet. Utilisons MakerBundle pour les générer :





Changeons un peu le code pour qu’il corresponde à ce que nous voulons :













Grâce à l&rsquo;aide de WebTestCase, ajouter des tests fonctionnels va être très simple ! Générez un squelette de test fonctionnel :



<code class="language-bash">$ ./bin/console make:functional-test NewsControllerTest</code>



Ajoutez des assertions pour vérifier que notre contrôleur fonctionne correctement :





Et maintenant, exécutez les tests :



<code class="language-bash">$ ./bin/phpunit</code>



Tout est parfait ! Symfony fournit une API très pratique pour naviguer sur le site web, vérifier que les liens fonctionnent et s’assurer que le contenu attendu est affiché. C’est facile à configurer et extrêmement rapide !



<h3>Utiliser Panther pour exécuter un scénario dans un navigateur</h3>



WebTestCase n’utilise pas un vrai navigateur web. Il en simule un avec des composants écrits en PHP. Il n’utilise pas non plus le protocole HTTP : il crée des instances d’objets Request de HttpFoundation, les passe au noyau de Symfony et permet d’effectuer des assertions sur l’instance Response de HttpFoundation retournée par l’application.



Maintenant, que faire si un problème empêche le chargement de la page web dans le navigateur ? Les raisons peuvent être nombreuses :



<ul><li>Un lien caché par une règle CSS erronée</li><li>Le comportement par défaut lors de l&rsquo;envoi d&rsquo;un formulaire <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault" target="_blank" rel="noopener">bloqué par un fichier JavaScript buggué</a></li><li>Ou pire, <a href="https://www.chromium.org/developers/design-documents/xss-auditor" target="_blank" rel="noopener">la détection d’une faille de sécurité dans votre code par le navigateur </a></li></ul>



Eh bien Panther vous permet d’exécuter ces scénarios dans de vrais navigateurs ! Il implémente aussi l’API publique des composants BrowserKit et DomCrawler, mais en interne, il utilise la bibliothèque<a href="https://github.com/facebook/php-webdriver" target="_blank" rel="noopener"> PHP WebDriver</a> de Facebook. 



Vous pouvez choisir d&rsquo;exécuter le même scénario de navigation via une implémentation en pur PHP (WebTestCase) ou dans n’importe quel navigateur web moderne, à travers le <a href="https://www.w3.org/TR/webdriver/" target="_blank" rel="noopener">protocole d’automatisation de navigateur WebDriver</a>, devenu une recommandation officielle du W3C en juin dernier. &nbsp;



Encore mieux, pour utiliser Panther, vous n’avez besoin que d’une installation locale de Chrome, et de rien d’autre : pas de serveur Selenium, ni de pilote obscur ou d’extension. Puisque Panther est désormais une dépendance du méta-paquet symfony/test-pack, vous avez déjà installé Panther sans le savoir quand vous avez tapé&nbsp;composer req &#8211;dev tests.&nbsp;Vous pouvez également installer Panther directement dans n’importe quel projet PHP en exécutant composer require symfony/panther.



Modifions quelques lignes de notre scénario de test existant :





Exécutez à nouveau les tests :



<code class="language-bash">$ ./bin/phpunit</code>



Tout fonctionne ! Cette fois-ci, nous sommes assurés que notre site d’information fonctionne correctement sur Google Chrome. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;



Sans que vous l’ayez remarqué, Panther a :



<ul><li>Démarré votre projet avec le serveur web intégré sur localhost:9000 &nbsp;</li><li>Démarré la version de <a href="http://chromedriver.chromium.org/" target="_blank" rel="noopener">Chromedriver</a> livrée avec la bibliothèque pour piloter votre version locale de Chrome </li><li>Exécuté le scénario de navigation défini dans le test avec Chrome en mode headless</li></ul>



Si vous êtes du genre à ne croire que ce que vous voyez, saisissez la commande suivante :&nbsp;



<code class="language-bash">$ PANTHER_NO_HEADLESS=1 ./bin/phpunit</code>



<iframe loading="lazy" src="https://www.youtube.com/embed/U7TIVyHaxxY" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>



Comme vous aurez pu le constater dans l’enregistrement, des appels à &nbsp;sleep() ont été ajoutés afin de mettre en évidence le fonctionnement. Avoir accès à la fenêtre du navigateur (et aux outils de développement) est également très utile pour déboguer un scénario défaillant.



Comme les deux outils implémentent la même API, Panther peut également exécuter des scénarios d’extraction de contenus web écrits pour la populaire bibliothèque <a href="https://github.com/FriendsOfPHP/Goutte" target="_blank" rel="noopener">Goutte</a>. Dans des scénarios de tests, Panther vous permet de choisir si le scénario doit être exécuté à l&rsquo;aide du noyau Symfony (quand c’est disponible, static::createClient()), en utilisant Goutte (envoi de réelles requêtes HTTP mais pas de support JavaScript et CSS, static::createGoutteClient()) ou en utilisant de vrais navigateurs web (static::createPantherClient())



Même si Chrome est le choix par défaut, Panther peut contrôler tout navigateur prenant en charge le protocole WebDriver. Il supporte également les services de tests de navigateurs à distance tels que <a href="https://github.com/SeleniumHQ/selenium/wiki/Grid2" target="_blank" rel="noopener">Selenium Grid</a> (open source), <a href="https://saucelabs.com/" target="_blank" rel="noopener">SauceLabs</a> et <a href="https://www.browserstack.com/" target="_blank" rel="noopener">Browserstack</a>. 



Il&nbsp;existe également <a href="https://github.com/symfony/panther/pull/14" target="_blank" rel="noopener">une branche expérimentale</a> qui utilise <a href="https://github.com/mozilla/geckodriver" target="_blank" rel="noopener">Geckodriver</a> pour démarrer et piloter automatiquement une installation locale de Firefox au lieu de Chrome.



<h3>Tester le code HTML généré par le client</h3>



Notre site d’information semble opérationnel, nous venons de prouver qu’il fonctionne dans Chrome. Maintenant, nous voulons recueillir les réactions de la communauté à propos de nos publications. Ajoutons alors un système de commentaires sur notre site Web !



Pour ce faire, nous allons exploiter les fonctionnalités de Symfony 4 et de la plateforme web moderne : nous allons gérer les commentaires via une API Web et nous les afficherons en utilisant les Web Component et <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a>. L&rsquo;utilisation de JavaScript pour cette fonctionnalité permet d&rsquo;améliorer les performances globales ainsi que l&rsquo;expérience utilisateur : chaque fois que nous publions un nouveau commentaire, celui-ci sera affiché dans la page existante sans nécessiter un rechargement complet.



Symfony fournit une intégration officielle avec le framework <a href="https://api-platform.com/" target="_blank" rel="noopener">API Platform</a>, qui permet de créer des API Web modernes (hypermedia et / ou GraphQL) super facilement. Installez-le :&nbsp;





Ensuite, utilisez à nouveau le MakerBundle pour créer une classe d’entité Comment, et exposez-le via un point de terminaison API de lecture et d’écriture :





Cette commande est interactive, et permet de spécifier les champs à créer. Nous en avons uniquement besoin de deux : news (le slug des informations), et body (le contenu des commentaires).&nbsp;news est de type string (longueur maximale de 255 caractères) alors que body est de type text. Les deux ne sont pas nullables.



Voici la transcription complète des interactions avec la commande :





Mettez à jour le fichier .env pour définir la valeur de DATABASE_URL à l’adresse de votre RDBMS et exécutez la commande suivante pour créer la table correspondante à notre entité : &nbsp;





Si vous ouvrez http://localhost:8000/api, vous verrez que l’API fonctionne déjà et est documentée !



Apportons maintenant quelques modifications mineures à la classe Comment que nous venons de générer. Actuellement, l’API permet d’effectuer des opérations GET, POST, PUT et DELETE. C’est trop ouvert. Puisque nous n’avons aucun mécanisme d’authentification pour le moment, nous voulons seulement que nos utilisateurs soient en mesure de créer et lire des commentaires :





Nous voulons également être en mesure de récupérer les commentaires postés sur un article en particulier. Nous utiliserons un <a href="https://api-platform.com/docs/core/filters/#search-filter">filtre</a> permettant de faire cela :





Enfin, ajoutez des contraintes de validation pour être certain·e que les commentaires soumis sont corrects :





Rechargez http://localhost:8000/api, les changements seront automatiquement pris en compte.



La création d&rsquo;une <a href="https://symfony.com/doc/current/validation/custom_constraint.html">contrainte de validation personnalisée</a> au lieu de coder en dur la liste des slugs disponibles dans l&rsquo;assertion de choix est laissé comme exercice au lecteur.



C&rsquo;est tout pour la partie PHP ! Facile, non ? Maintenant, utilisons notre API avec Vue.js ! Nous utiliserons pour cela l’intégration Vue.js fournie par <a href="https://symfony.com/doc/current/frontend.html">Symfony Webpack Encore</a>.



Installez Encore et son intégration Vue.js :





Mettez à jour la configuration de Encore pour activer le loader Vue :





Nous sommes prêts à créer une chouette interface ! Commençons par un composant Vue rendant la liste des commentaires et un formulaire pour en poster un nouveau :





Ce n’était pas si compliqué ! Ensuite, créez le point d’entrée de notre app de commentaires :





Enfin, référencez le fichier JavaScript et initialisez le composant avec le slug courant dans le template item.html.twig.





Compilez le fichier JS transpilé et minifié (en mode développement, vous pouvez également utiliser le&nbsp;<a href="https://symfony.com/doc/current/frontend/encore/dev-server.html" target="_blank" rel="noopener">Hot Module Reloading</a>) :





Wow ! Grâce à Symfony 4, nous avons créé une API web et une webapp Vue.js en seulement quelques lignes de code. Ajoutons désormais quelques tests pour notre système de commentaires !



Attendez un peu… Les commentaires sont récupérés en utilisant Ajax, et rendus côté client en JavaScript. Les nouveaux commentaires sont aussi ajoutés de manière asynchrone en JS. Malheureusement, il ne sera pas possible d’utiliser WebTestCase ni Goutte pour tester notre nouvelle fonctionnalité : ils sont écrits en PHP, et ne supportent ni le JS ni Ajax 🙁



Ne vous inquiétez pas, Panther est capable de tester de telles applications. Rappelez-vous : il utilise un vrai navigateur web ! Testons notre système de commentaires :





Faites attention :&nbsp;en mode test, les variables d’environnement doivent être définies par phpunit.xml.dist. Assurez-vous de mettre à jour DATABASE_URL afin de référencer une base de données avec les tables requises. Quand la base de données est prête, exécutez les tests :





<iframe loading="lazy" src="https://www.youtube.com/embed/j3VJkvWZiy8" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>



Grâce à Panther, vous pouvez tirer parti de vos compétences en Symfony et de l’API BrowserKit pour tester des applications JavaScript modernes.&nbsp;



<h3>Fonctionnalités supplémentaires (Captures d’écran, Injections JS)</h3>



Panther tire parti du fait qu’il utilise de vrais navigateurs web pour fournir des fonctionnalités qui ne sont pas supportées par le composant Browserkit : il est capable de prendre des captures d’écrans, d’attendre l’apparition des éléments et d’exécuter du code JavaScript personnalisé dans le contexte d&rsquo;exécution de la page.



En complément de l’API BrowserKit, Panther implémente l’interface FacebookWebDriverWebDriver donnant accès à <a href="https://github.com/facebook/php-webdriver/wiki">toutes les fonctionnalités de PHP WebDriver</a>.



Essayons : mettez à jour le scénario de test précédent pour prendre une capture d&rsquo;écran de la page rendue.





Panther est également conçu pour fonctionner dans des systèmes d’intégration continue : il supporte Travis, AppVeyor et est compatible avec Docker !&nbsp;



Pour lire la documentation complète, ou laisser une étoile sur le projet, <a href="https://github.com/symfony/panther" target="_blank" rel="noopener">consultez le repo Github</a>. &nbsp;



<h3>Merci, l’Open Source </h3>



Panther est basé sur plusieurs bibliothèques FOSS, et a été inspiré par <a href="http://nightwatchjs.org/" target="_blank" rel="noopener">Nightwatch.js</a>, un outil de tests JS basé sur WebDriver que nous utilisons depuis plusieurs années. <a href="https://les-tilleuls.coop/fr/blog/article/case-study-nightwatchjs-et-les-tests-e2e" target="_blank" rel="noopener">Relisez notre étude de cas sur Nightwatch.Js</a>. 



Pour créer cette bibliothèque, nous avons utilisé plusieurs dépendances, et avons dû corrigé quelques bugs &nbsp;dont elles souffraient :



<ul><li><a href="https://github.com/facebook/php-webdriver/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+author%3Adunglas" target="_blank" rel="noopener">PHP Webdriver</a></li><li><a href="https://github.com/symfony/symfony/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+browserkit+author%3Adunglas" target="_blank" rel="noopener">BrowserKit</a></li><li><a href="https://github.com/symfony/symfony/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+domcrawler+author%3Adunglas" target="_blank" rel="noopener">DomCrawler</a></li><li><a href="https://github.com/FriendsOfPHP/Goutte/pulls?utf8=%E2%9C%93&amp;q=is%3Apr+author%3Adunglas" target="_blank" rel="noopener">Goutte</a></li></ul>



L&rsquo;Open Source est un écosystème vertueux : vous bénéficiez de puissantes bibliothèques existantes pour créer des outils de haut niveau et en même temps vous pouvez les améliorer et les redistribuer.



Nous avons également fait remonter des briques de bas niveau qui ont été conçues lors du développement de Panther au projet &nbsp;PHP WebDriver :



<ul><li style="text-align: justify;"><a href="https://github.com/facebook/php-webdriver/pull/545" target="_blank" rel="noopener">un utilitaire permettant de gérer les cases à cocher et les boutons radio </a>(mergé)</li><li style="text-align: justify;"><a href="https://github.com/facebook/php-webdriver/pull/560" target="_blank" rel="noopener">la prise en charge de la version W3C du protocole WebDriver</a>, qui est l’unique protocole à ce jour supporté par Geckodriver, un outil permettant de piloter un Firefox headless sans Selenium (pas encore mergé)</li></ul>



Ces briques seront d’une grande aide pour l’ensemble de la communauté, y compris pour les alternatives à Panther construites également sur PHP Webdriver (Laravel Dusk, Codeception, &#8230;).



Nous tenons à remercier tous les contributeurs de ces projets, notamment <a href="https://github.com/OndraM" target="_blank" rel="noopener">Ondřej Machulda</a>, le mainteneur actuel de PHP Webdriver, qui a pris le temps de consulter et merger nos patches.



Un grand merci également à <a href="https://github.com/teodesian" target="_blank" rel="noopener">George S. Baugh</a>, qui a ajouté le support du protocole W3C Webdriver à son implémentation <a href="https://github.com/teodesian/Selenium-Remote-Driver" target="_blank" rel="noopener">Perl WebDriver.</a> Lorsque nous l’avons découvert, elle nous a grandement aidés à comprendre comment le nouveau protocole se démarquait du de la version Selenium.



Panther en est encore à ses balbutiements. Vous voulez contribuer au projet, ajouter une nouvelle fonctionnalité, signaler (ou corriger) un bug ? <a href="https://github.com/symfony/panther" target="_blank" rel="noopener">Rendez-vous à cette adresse</a> et n’oubliez pas de lui attribuer une étoile ! &nbsp;

Panther : testez vos apps Symfony avec un vrai navigateur web !

Installation

composer req symfony/panther:dev-master
composer req --dev symfony/panther:dev-master 

Utilisation de base

use SymfonyComponentPantherPantherTestCase;

class E2eTest extends PantherTestCase
{
    public function testMyApp()
    {
        $client = static::createPantherClient(); // Your app is automatically started using the built-in web server
        $crawler = $client->request('GET', '/mypage');
        $this->assertContains('My Title', $crawler->filter('title')->text()); // You can use any PHPUnit assertion
    }
}

Utilisation des tests

Un f&eacute;lin polymorphe

use SymfonyComponentPantherPantherTestCase;

class E2eTest extends PantherTestCase
{
    public function testMyApp()
    {
        $symfonyClient = static::createClient(); // A cute kitty: the Symfony's functional test too
        $goutteClient = static::createGoutteClient(); // An agile lynx: Goutte
        $pantherClient = static::createPantherClient(); // A majestic Panther

        // Both Goutte and Panther benefits from the built-in HTTP server

        // enjoy the same API for the 3 felines
        // $*client->request('GET', '...')
        $kernel = static::createKernel(); // You can also access to the app's kernel
        // ...
    }
}

Fonctionnalit&eacute;s

Documentation

Variables d&rsquo;environnement

Int&eacute;gration de Docker

FROM php:latest
RUN apt-get update &amp;&amp; apt-get install -y zlib1g-dev chromium &amp;&amp; docker-php-ext-install zip
ENV PANTHER_NO_SANDBOX 1

Int&eacute;gration&nbsp;de Travis

language: php
addons:
  chrome: stablephp:
  - 7.2script:
  - phpunit

Int&eacute;gration de AppVeyor

build: false
platform: x86
clone_folder:
  c:
    projectsmyprojectcache:
      - '%LOCALAPPDATA%Composerfiles'install:
      - ps: Set-Service wuauserv -StartupType Manual
      - cinst -y php composer googlechrome
      - refreshenv
      - cd c:toolsphp72
      - copy php.ini-production php.ini /Y
      - echo date.timezone="UTC" >> php.ini
      - echo extension_dir=ext >> php.ini
      - echo extension=php_openssl.dll >> php.ini
      - echo extension=php_mbstring.dll >> php.ini
      - echo extension=php_curl.dll >> php.ini
      - echo memory_limit=3G >> php.ini
      - cd %APPVEYOR_BUILD_FOLDER%
      - composer install --no-interaction --no-progresstest_script:
      - cd %APPVEYOR_BUILD_FOLDER%
      - php vendorphpunitphpunitphpunit

<a href="https://github.com/symfony/panther">Retrouvez la publication initiale de cet article (EN) ici.</a>



Présentée dernièrement lors d’un lightning talk au Symfony Live Paris 2018 et lors d’un <a href="https://twitter.com/afup_hdf/status/1004634838320795648" target="_blank" rel="noopener">meetup de l’AFUP Hauts de France</a>, <a href="https://github.com/symfony/panther">Panther</a> est une bibliothèque autonome permettant d’extraire des sites web et d’exécuter des tests fonctionnels de bout en bout (E2E) en utilisant de vrais navigateurs. &nbsp;



<figure class="wp-block-image"><a href="https://github.com/symfony/panther" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/248.jpg" alt="Panther" title="Panther"/></a></figure>







Panther est extrêmement puissant. Cet outil tire parti du <a href="https://www.w3.org/TR/webdriver/">protocole WebDriver du W3C</a> pour gérer des navigateurs tels que Google Chrome ou Firefox. Simple d’utilisation, il implémente les composants <a href="https://symfony.com/doc/current/components/browser_kit.html">BrowserKit</a> et <a href="https://symfony.com/doc/current/components/dom_crawler.html">DomCrawler</a> de Symfony et contient toutes les fonctionnalités dont vous avez besoin pour tester vos applications. 



Son utilisation vous semblera familière si vous avez déjà créé <a href="https://symfony.com/doc/current/testing.html#functional-tests">un test fonctionnel pour une application Symfony</a> : l’API est exactement la même ! Il est important de garder à l’esprit que Panther étant une bibliothèque autonome, elle peut être utilisée dans tous les projets PHP. Panther trouve automatiquement votre installation locale de Chrome et la lance (merci <a href="https://sites.google.com/a/chromium.org/chromedriver/">ChromeDriver</a>). Vous n’avez rien d’autre à installer : pas besoin de serveur Selenium ni de pilote obscur. En mode test, Panther démarre automatiquement votre application à l’aide du <a href="http://php.net/manual/en/features.commandline.webserver.php">serveur web intégré de PHP</a>.



Vous pouvez vous concentrer sur la rédaction de vos tests ou scénarios, Panther s’occupe de tout le reste !&nbsp; Voyons ensemble comment l&rsquo;installer et l&rsquo;utiliser :&nbsp;



<h3>Installation</h3>



Pour installer Panther dans votre projet, utilisez <a href="https://getcomposer.org/" target="_blank" rel="noopener">Composer</a>. Vous pouvez utiliser l’option &#8211;dev si vous souhaitez vous servir uniquement de Panther pour les tests et non pour l’extraction de contenu :





<h3>Utilisation de base</h3>





<h3>Utilisation des tests</h3>



La classe PantherTestCase vous permet de rédiger aisément des tests E2E. Elle démarre automatiquement votre application en utilisant le serveur Web PHP intégré et vous permet de l’explorer à l’aide de Panther. Elle étend le TestCase de <a href="https://phpunit.de/">PHP Unit</a> et fournit tous les outils de tests auxquels vous êtes habitué·e.





Exécutez ce test de cette manière :





<h3>Un félin polymorphe</h3>



Si vous souhaitez tester une application Symfony, PantherTestCase étend automatiquement la classe WebTestCase. Cela signifie que vous pouvez facilement créer des tests fonctionnels, qui peuvent exécuter directement le noyau de votre application et accéder à tous vos services existants. Contrairement au client de Panther, le client de test ne supporte pas le JavaScript et la capture d’écran.&nbsp;En parallèle (et même pour les applications qui ne sont pas en Symfony), Panther peut également tirer parti de la bibliothèque <a href="https://github.com/FriendsOfPHP/Goutte" target="_blank" rel="noopener">Goutte</a>, qui est un intermédiaire entre les clients de test de Symfony et de Panther. Goutte envoie de vraies requêtes HTTP. Il est rapide et permet de naviguer sur n&rsquo;importe quelle page web, et pas seulement sur celles de l&rsquo;application testée. Il ne supporte pas JavaScript et d&rsquo;autres fonctionnalités avancées car il est entièrement écrit en PHP.



L&rsquo;intérêt de ces&nbsp;trois bibliothèques, c&rsquo;est qu&rsquo;elles implémentent exactement la même API.&nbsp;Vous pouvez donc&nbsp;passer de l&rsquo;une à l&rsquo;autre en appelant la méthode appropriée, et trouver le bon compromis pour chaque cas de test (Ai-je besoin de JavaScript ?&nbsp;Ai-je besoin d&rsquo;authentifier vers un serveur SSO externe ? Ai-je envie d’accéder au noyau de la requête en cours ?).





<h3>Fonctionnalités</h3>



Contrairement aux bibliothèques de test et d’extraction de contenu, Panther :



<ul><li style="text-align: justify;">Exécute le code JavaScript contenu dans les pages web</li><li style="text-align: justify;">Supporte tout ce que Chrome ou Firefox implémente.</li><li style="text-align: justify;">Permet la prise de captures d’écran</li><li style="text-align: justify;">Peut attendre apparition d’éléments chargés de manière asynchrone.</li><li style="text-align: justify;">Vous laisse exécuter votre propre code JS ou requêtes XPath dans le contexte de la page chargée.</li><li style="text-align: justify;">Prend en charge les installations de <a href="https://www.seleniumhq.org/" target="_blank" rel="noopener">serveur Selenium</a> personnalisées.</li><li style="text-align: justify;">Prend en charge les services de tests de navigateur à distance, y compris <a href="https://saucelabs.com/" target="_blank" rel="noopener">SauceLabs</a> et <a href="https://www.browserstack.com/" target="_blank" rel="noopener">BrowserStack</a>.</li></ul>



<h3>Documentation</h3>



Puisque Panther implémente l’API de plusieurs bibliothèques populaires, elle a déjà une vaste documentation :



<ul><li>Pour la classe Client, consultez <a href="https://symfony.com/doc/current/components/browser_kit.html">la documentation BrowserKit&rsquo;s</a></li><li>Pour la classe Crawler, consultez <a href="https://symfony.com/doc/current/components/dom_crawler.html">la documentation de DomCrawler</a></li><li>Pour Webdriver, lisez <a href="https://github.com/facebook/php-webdriver">la documentation PHP WebDriver de Facebook </a></li></ul>



<h3>Variables d’environnement</h3>



Les variables d’environnement suivantes peuvent être définies pour modifier certains comportements de Panther :



<ul><li>PANTHER_NO_HEADLESS : permet de désactiver le mode “sans interface graphique ” des navigateurs (cela désactivera la fenêtre de tests, ce qui peut être utile pour déboger)</li><li>PANTHER_NO_SANDBOX : permet de désactiver le sandboxing de Chrome (dangereux, mais permet d’utiliser Panther dans des conteneurs)</li><li>PANTHER_WEB_SERVER_DIR : permet de changer la racine du document du projet (placée dans public/ par défaut)</li><li>PANTHER_CHROME_DRIVER_BINARY : permet d’utiliser un autre binaire chromedriver, au lieu de compter sur ceux déjà fournis par Panther</li></ul>



<h3>Intégration de Docker</h3>



Voici une image Docker minimale qui peut exécuter Panther :





Faites-le&nbsp;avec la commande suivante : docker build . -t myproject



Exécutez la avec docker run -it -v « $PWD »:/srv/myproject -w /srv/myproject myproject bin/phpunit



<h3>Intégration&nbsp;de Travis</h3>



Panther fonctionnera tout de suite avec Travis si vous ajoutez l’addon Chrome :





<h3>Intégration de AppVeyor</h3>



Panther fonctionnera immédiatement avec AppVeyor tant que Google Chrome est installé. Voici un fichier appveyor.yml pour exécuter vos tests avec Panther :&nbsp;





<h3>Limitations</h3>



Les fonctionnalités suivantes ne sont pas encore supportées :



<ul><li>L’exploration de documents XML (seul le HTML est pris en charge)</li><li>Mise à jour de documents existants (les navigateurs sont principalement utilisés pour consommer des données, pas pour créer des pages web)</li><li>Définition de valeurs de formulaires à l’aide de la syntaxe de tableau PHP multidimensionnelle</li><li>Méthodes renvoyant vers une instance de DOMElement (parce que cette bibliothèque utilise WebDriverElement en interne)</li><li>Sélection de choix invalides dans select</li></ul>



Et vous, que pensez-vous de Panther ? N’hésitez pas à contribuer à ce projet en faisant quelques PR sur les améliorations restantes !