2021 n&rsquo;aura pas été de tout repos mais chez Les-Tilleuls.coop, nous essayons de rester positifs·ves (pardon) et faisons un bilan très satisfaisant l&rsquo;année passée. &nbsp;



Encore de beaux projets et partenariats ont vu le jour l&rsquo;année dernière. En 2021, nous avons aussi élu <a rel="noreferrer noopener" href="https://les-tilleuls.coop/blog/election-marion-age" target="_blank">Marion Agé à la co-gérance de notre Scop</a>, accueilli à nouveau une quinzaine de coopérateurs·trices à travers toutes nos antennes et mis à disposition publiquement <a rel="noreferrer noopener" href="https://les-tilleuls.coop/blog/grille-salariale-a-vote" target="_blank">notre grille de salaires</a>. Nous avons progressivement retrouvé notre communauté en lançant notre événement international : <a rel="noreferrer noopener" href="https://api-platform.com/con/2021/review" target="_blank">la API Platform Conference</a> (d&rsquo;ailleurs, petit scoop : cette convention sera de retour en septembre, on vous en dit plus très prochainement !). Côté tech, nous avons continué de <a rel="noreferrer noopener" href="https://symfony.com/doc/current/contributing/code/core_team.html#active-core-members" target="_blank">contribuer aux outils que nous utilisons</a> quotidiennement et on peut vous dire avec certitude qu&rsquo;<a rel="noreferrer noopener" href="https://api-platform.com/con/2021/conferences/the-journey-towards-api-platform-3/" target="_blank">API Platform 3 arrive</a> très prochainement !&nbsp;&nbsp;



Tradition oblige, nous profitons de ce billet pour vous souhaiter une très bonne année 2022. Nous avons concocté pour l&rsquo;occasion une carte de vœux que nous vous invitons à découvrir dès maintenant : <a rel="noreferrer noopener" href="http://2022.les-tilleuls.coop" target="_blank">2022.les-tilleuls.coop</a>. 



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2022/01/voeux-gif.gif" alt="" class="wp-image-4344" width="480" height="254"/></figure>



Vous êtes en retard dans l&rsquo;envoi de vos vœux ou tout simplement pas inspiré·e ? <a rel="noreferrer noopener" href="https://2022.les-tilleuls.coop/generate" target="_blank">Utilisez notre application pour les souhaiter à la personne de votre choix</a>. N&rsquo;hésitez pas à nous dire si vous l&rsquo;avez utilisée, ça nous fait plaisir d&rsquo;avoir quelques feedbacks ! Toujours en 2022, Les-Tilleuls.coop vous accompagne dans la réalisation de vos projets web. <a rel="noreferrer noopener" href="mailto:contact@les-tilleuls.coop?subject=Les-Tilleuls.coop%2C%20j'ai%20un%20projet%20%C3%A0%20vous%20confier%20" target="_blank">Échangeons en visio ou autour d&rsquo;un café</a> sur les prochaines évolutions de votre application ou sur vos besoins de formation, nous serons ravi·e·s de vous aider !

Souhaitez vos vœux 2022 avec notre générateur de messages !

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

Toutes les vidéos des conférences présentées à la API Platform Conference <a rel="noreferrer noopener" href="https://www.youtube.com/playlist?list=PL3hoUDjLa7eSo7-CAyiirYfhJe4h_Wxs4" target="_blank">sont publiées</a>. Entre l&rsquo;avenir de l&rsquo;architecture des API aux coulisses de la version imminente de API Platform, découvrez dès à présent les sujets qui ont été présentés lors de cette première édition accueillie avec succès à Lille et en ligne.



<h2>Conférences anglophones</h2>



<ul><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=p7mHHfj7ZPQ" target="_blank">The future of API (Platform) architecture</a> de Kévin Dunglas</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=hxTJPt06jjM" target="_blank">The journey towards API Platform 3</a> d&rsquo;Antoine Bluchet</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=JaEH7Tfzvos" target="_blank">Better PHP Sites with the Caddy Web Server</a> de Matt Holt</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=LHJuKAsL5cs" target="_blank">The API mindset: tech, product, business and legal</a> de Mehdi Medjaoui</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=5f2qoBH7tl8" target="_blank">Sylius and API Platform: the story of integration</a> de Lukasz Chrusciel</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=3m5An-s0r-k" target="_blank">How To Become A React-admin Grandmaster In 237 Easy Steps</a> de François Zaninotto</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=C72UE0ypr6c" target="_blank">API Horror Stories from an Unnamed Coworking Company</a> de Phil Sturgeon</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=zuPYqOsT-aw" target="_blank">Why JSON-LD and what is it?</a> de Samuel Rozé&nbsp;</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=vXk2Z1dy_gA" target="_blank">Symfony Runtime: wrapping API Platform in a lambda</a> de Nicolas Grekas</li></ul>



<h2>Conférences francophones</h2>



<ul><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=aB6lKL_SvYQ" target="_blank">Why PHP and Symfony are still into the game for any new project</a><a href="https://www.youtube.com/watch?v=W0KGdrx8BpQ"> </a>d&rsquo;Olivier Doucet</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=mYwL8snWvTs" target="_blank">A suitable serialization with API Platform and Symfony</a> de Mathias Arlaud</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=W0KGdrx8BpQ" target="_blank">API Platform Next.js client generator: contributing as a junior developer</a> de Justine Zahiri</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=iISeDdwN5lY" target="_blank">Secure and Practical Authentication in API Platform</a> de Robin Chalas</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=Qhbj-fCflMM" target="_blank">Unified permission management between API and client</a> de Marion Agé</li><li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=XpY7p062zIo" target="_blank">French tech et Start-up nation, what else?</a> de Hélène Maître-Marchois</li></ul>



Vous avez été inspiré·e par toutes ces conférences ? Nous travaillons déjà sur l&rsquo;organisation de la prochaine API Platform Con 2022 ! Contactez-nous si vous souhaitez faire partie de nos speakers l&rsquo;année prochaine ! Nous couvrons les frais de voyage, l&rsquo;hébergement et l&rsquo;accès complet à la conférence. En attendant d&rsquo;autres nouvelles de notre part à ce sujet, vous pouvez toujours (re)découvrir <a href="http://api-platform.com/con/2021/review" target="_blank" rel="noreferrer noopener">notre review</a> de l&rsquo;événement. À bientôt !

API Platform Con : les vidéos des conférences sont en ligne !

Des tests unitaires pour nos r&egrave;gles de conception


Du Domain-Driven-Design avec API Platform


Faites confiance aux d&eacute;veloppeurs&middot;euses de votre &eacute;quipe : voyez plus loin que les fonctionnalit&eacute;s


L&rsquo;architecture ESA : le futur des API web


Fiber : la porte ouverte sur l'asynchrone


WorkAdventure de la gen&egrave;se &agrave; aujourd'hui : retour d'exp&eacute;rience sur 1 an d'univers virtuels


Retour sur le Forum PHP 2021 (partie 2)

Vers la sobri&eacute;t&eacute; num&eacute;rique / Comment sauver la plan&egrave;te en ne faisant rien


Est-ce que vous faites de la biologie sans le savoir ?


Plong&eacute;e dans l'&eacute;cosyst&egrave;me Laravel


Guide pratique de lutte contre le &ldquo;syndrome&rdquo; de l&rsquo;imposteur


Retour sur le Forum PHP 2021 (partie 1)

...parce que nous aussi, nous &eacute;voluons !


...et parce que nous ne sommes pas une maison de retraite :)


Notre logo &agrave; travers les &acirc;ges


Nouvelle décennie, nouveau logo pour Les-Tilleuls.coop !

Des retrouvailles sur les chapeaux de roue


On peut dire quelque part que notre carte de fidélité à l&rsquo;AFUP a encore été renouvelée : les 21 et 22 octobre, notre équipe se déplacera depuis des 4 coins de la France pour assister au Forum PHP 2021 ! Cette édition, placée sous le signe des retrouvailles, se tiendra au Novotel Paris Est et à l&rsquo;heure où ces lignes sont écrites, la billetterie est déjà sold out depuis quelques semaines. Sponsor de longue date et ayant une affection particulière pour <a rel="noreferrer noopener" href="https://afup.org/home" target="_blank">cette association qui œuvre quotidiennement pour faire rayonner le PHP</a> à travers différentes initiatives, nous avons également la chance d&rsquo;avoir 3 de nos coopérateurs parmi les speakers de cet événement.



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" width="1024" height="576" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/Carte-forum2021-Les-Tilleuls-1024x576.png" alt="" class="wp-image-3245" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/Carte-forum2021-Les-Tilleuls-1024x576.png 1024w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/Carte-forum2021-Les-Tilleuls-600x338.png 600w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/Carte-forum2021-Les-Tilleuls-300x169.png 300w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/Carte-forum2021-Les-Tilleuls-768x432.png 768w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/Carte-forum2021-Les-Tilleuls-1536x864.png 1536w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/Carte-forum2021-Les-Tilleuls-2048x1152.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2>Des retrouvailles sur les chapeaux de roue</h2>



Deux ans que le Forum PHP n&rsquo;avait pas eu lieu en présentiel et même si la jauge habituelle a été volontairement baissée par rapport aux années précédentes, plus de 500 personnes sont attendues lors de ces 2 jours où des experts de notre langage de programmation préféré mais également des « jeunes pousses » partageront leurs dernières trouvailles et outils facilitant leurs quotidiens. Plongée dans l&rsquo;écosystème de Laravel, découverte de la version 6 de Symfony, état des lieux de la place des femmes dans l&rsquo;informatique ou conseils pour améliorer votre SEO tout en proposant des applications accessibles : toute la communauté trouvera son bonheur dans <a rel="noreferrer noopener" href="https://event.afup.org/forum-php-2021/planning-forum-php-2021/" target="_blank">la programmation annoncée</a>. 



Cette édition en présentiel ne signifie pas que « le monde d&rsquo;avant » est de retour. Pour que l&rsquo;événement se déroule dans les meilleures conditions, quelques règles ont été mises en place :



<ul><li>Le port du masque sera obligatoire pendant les deux jours</li><li>Il n&rsquo;y aura pas de vestiaire mais un service de bagagerie</li><li>Les micros seront nettoyés entre chaque intervention</li><li>Les gestes barrières seront toujours vivement conseillés</li></ul>



<h2>Les-Tilleuls.coop à l&rsquo;affiche </h2>



Nos coopérateurs <a rel="noreferrer noopener" href="https://twitter.com/matarld" target="_blank">Mathias Arlaud</a>, <a rel="noreferrer noopener" href="https://twitter.com/chalas_r" data-type="URL" data-id="https://twitter.com/chalas_r" target="_blank">Robin Chalas</a> et <a rel="noreferrer noopener" href="https://twitter.com/dunglas" target="_blank">Kévin Dunglas</a> auront la chance d&rsquo;échanger et partager leurs connaissances sur la scène du Novotel. Mathias et Robin présenteront en duo leur conférence Du Domain-Driven-Design avec API Platform qui, comme son titre l&rsquo;indique, montrera qu&rsquo;il est tout à fait compatible de faire du DDD avec <a rel="noreferrer noopener" href="https://api-platform.com/" target="_blank">notre framework</a>. Le Forum PHP sera leur première grande scène nationale et pour l&rsquo;occasion, ils se sont prêté au jeu d&rsquo;une interview sur leurs parcours respectifs : <a rel="noreferrer noopener" href="https://event.afup.org/forumphp2021-interview-mathias-arlaud-et-robin-chalas/" target="_blank">découvrez-là</a>. 



Kévin, de son côté, fera un bond dans le futur des APIs en nous présentant une nouvelle architecture qui s&rsquo;appelle ESA et qui promet de renouer avec les grands principes REST/HATEOAS tout en tirant partie au maximum des nouvelles capacités fournies par la plateforme web.



<center><blockquote class="twitter-tweet">J’ai le grand plaisir d’avoir été sélectionné pour le <a href="https://twitter.com/hashtag/ForumPHP?src=hash&amp;ref_src=twsrc%5Etfw">#ForumPHP</a> 2021 de l’<a href="https://twitter.com/afup?ref_src=twsrc%5Etfw">@afup</a> qui se déroulera en physique ? ! J’y présenterai un projet sur lequel je travaille depuis plusieurs mois : l’architecture d’API ESA. <a href="https://t.co/miZ4zefIla">pic.twitter.com/miZ4zefIla</a>— Kévin Dunglas (@dunglas) <a href="https://twitter.com/dunglas/status/1419953875977650183?ref_src=twsrc%5Etfw">July 27, 2021</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>



Le compte à rebours est désormais lancé : chez Les-Tilleuls.coop, nous sommes fiers de contribuer au développement de la communauté PHP en participant et soutenant financièrement ce genre d&rsquo;événements. D&rsquo;ailleurs, vous ne trouverez pas de goodies à nos couleurs dans le sac visiteurs : nous avons décidé de verser notre budget dédié à ce poste à l&rsquo;association <a rel="noreferrer noopener" href="https://www.actionprotectionanimale.com/" target="_blank">Action Protection Animale</a> qui lutte en partie pour la protection des éléphants. 



Et vous, faîtes-vous partie des chanceux·ses qui ont une place ? Dites-nous <a rel="noreferrer noopener" href="https://twitter.com/coopTilleuls" data-type="URL" data-id="https://twitter.com/coopTilleuls" target="_blank">sur Twitter</a> et n&rsquo;oubliez pas de passer nous voir sur notre stand, vous aurez peut-être l&rsquo;occasion de gagner un t-shirt aux couleurs de nos 10 ans !

Les-Tilleuls.coop sponsor et speaker du Forum PHP 2021

Des conf&eacute;rences bilingues et interdisciplinaires


Le 10 septembre dernier, après presque 9 mois de préparation, nous avons donné rendez-vous à la communauté et l’écosystème d’API Platform pour notre première conférence internationale dédiée à <a href="https://api-platform.com/" target="_blank" rel="noreferrer noopener">ce framework utilisé sur les 5 continents</a>. Cet événement, au format « phygital », a accueilli plus de 150 personnes sur place ainsi que 400 personnes inscrites en ligne pour suivre, depuis les États-Unis ou Taïwan, la track anglophone retransmise en direct depuis Livestorm.



Cet événement s’est déroulé à <a rel="noreferrer noopener" href="https://www.euratechnologies.com/" target="_blank">Euratechnologies</a>, le pôle d’excellence de la métropole lilloise où plus de 300 entreprises liées au secteur des nouvelles technologies sont implantées (dont notre coopérative). 15 speakers avaient répondu positivement à notre invitation à partager leurs expériences sur des sujets variés, le tout dans une ambiance d’anniversaire très chaleureuse.



<figure class="wp-block-image size-large is-style-rounded"><img loading="lazy" width="1024" height="768" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/PXL_20210910_0539597141-1024x768.jpg" alt="" class="wp-image-3175" srcset="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/PXL_20210910_0539597141-1024x768.jpg 1024w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/PXL_20210910_0539597141-600x450.jpg 600w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/PXL_20210910_0539597141-300x225.jpg 300w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/PXL_20210910_0539597141-768x576.jpg 768w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/PXL_20210910_0539597141-1536x1152.jpg 1536w, https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/09/PXL_20210910_0539597141-2048x1536.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2>Des conférences bilingues et interdisciplinaires</h2>



<ul><li>La journée a commencé par la keynote d’ouverture de Kévin Dunglas qui nous a <a rel="noreferrer noopener" href="https://dunglas.fr/2021/09/introducing-edge-side-apis-apiplatformcon-keynote/" target="_blank">résumé</a> l’histoire d’API Platform et présenté le futur des API avec le concept d’Edge Side API. </li><li>Il a été suivi d’Antoine Bluchet, qui nous a <a rel="noreferrer noopener" href="https://docs.google.com/presentation/d/1G53t3Aq4PVxkL0mVPL3T_fPLN6PdOyV-5lQLMJ88Oew/edit" target="_blank">présenté</a> les nouveautés de la version 3 d’API Platform ainsi que tout le travail effectué pour intégrer ces changements. </li><li><a rel="noreferrer noopener" href="https://twitter.com/mholt6/status/1438957864245088261" target="_blank">Matt Holt</a> nous a quant à lui exposé les bonnes pratiques pour utiliser le serveur web <a href="https://docs.google.com/presentation/d/1BM7b7VQV8fxBKxnaBK4qMzf3MdGhhDapfxqva8s_3Do/edit">Caddy</a> (remplaçant Nginx dans API Platform depuis la version 2.6), ses avantages et son incroyable simplicité. </li><li><a rel="noreferrer noopener" href="https://twitter.com/medjawii?lang=en" target="_blank">Medhi Medjaoui</a> nous a parlé de l’importance des APIs aujourd’hui, et de la manière dont elles régissent l’information et facilitent la communication globale au sein des organisations et entre elles. </li><li>Pendant ce temps sur la track française, Olivier Doucet nous a raconté l’histoire d’un projet ayant mal tourné à cause de technos non maîtrisées, et qui a été rattrapé grâce aux valeurs sûres que sont Symfony, API Platform et Mercure. </li><li>Mathias Arlaud nous a ensuite <a href="https://slides.com/mathiasarlaud/apip-con-a-suitable-serialization-with-api-platform-and-symfony">expliqué</a> les différentes manières de sérialiser nos données avec Symfony, dans quels contextes les appliquer, comment bien les comprendre et les maîtriser, et les manières dont elles ont été intégrées dans API Platform.</li><li>De son côté, Justine Zahiri nous a raconté comment, dans son drôle de parcours de libraire devenue développeuse, elle en est venue à contribuer à l’open source, et montrer que la contribution est l’affaire de tou⋅te⋅s, quel que soit son niveau, même junior.</li></ul>



<center><blockquote class="twitter-tweet">Trop fière de <a href="https://twitter.com/ZahiriJ?ref_src=twsrc%5Etfw">@ZahiriJ</a> qui donne sa première conférence à l’<a href="https://twitter.com/hashtag/ApiPlatformCon?src=hash&amp;ref_src=twsrc%5Etfw">#ApiPlatformCon</a> et qui prouve, par la même occasion, qu’il n’est pas nécessaire d’être dev senior pour contribuer à des projets open source comme <a href="https://twitter.com/ApiPlatform?ref_src=twsrc%5Etfw">@ApiPlatform</a> ? <a href="https://t.co/anzyKbyHs8">pic.twitter.com/anzyKbyHs8</a>— Cécile Helary Hamerel (@cecilehamerel) <a href="https://twitter.com/cecilehamerel/status/1436265635214987264?ref_src=twsrc%5Etfw">September 10, 2021</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>



<ul><li>Après la pause du midi et son délicieux buffet végétarien, les conférences ont repris avec Łukasz Chruściel, membre de la core team Sylius, qui a <a href="https://www.slideshare.net/ukaszChruciel1/sylius-and-api-platform-the-story-of-integration-250236018">parlé</a> de l’intégration d’API Platform dans son écosystème et des avantages qu’ils ont pu en tirer.</li><li>François Zaninotto nous a montré comment et pourquoi réutiliser tous les <a href="https://marmelab.com/react-admin/Admin.html">composants de React Admin</a>, rendus disponibles par Marmelab, pour construire des sites complets sans peine.</li><li>Phil Sturgeon nous a fait un amusant retour sur les pires manières de développer une API, et comment il a résolu ces problèmes grâce aux bonnes pratiques respectées par API Platform.</li><li>Robin Chalas a, quant à lui, <a href="https://www.slideshare.net/RobinChalas/secure-and-practical-authentication-in-api-platform">présenté</a> plusieurs méthodes pour sécuriser ses API Symfony, que ce soit grâce au composant security natif, au bundle JWT dont il est mainteneur, ou au système OAuth2.&nbsp;</li><li>Marion Agé a enchaîné sur un retour d’expérience nous <a href="https://github.com/K-mos/apip-conf">expliquant</a> la manière dont elle a conçu un système de gestion d’autorisations complexes, administrables selon les utilisateurs, avec une modification en temps réel de l’interface des utilisateurs concernés grâce à Mercure en Vue.js.</li><li>Enfin, Helène Maître-Marchois nous a interrogé sur la nécessité de rester dans des entreprises dont on ne partage pas les valeurs, sur la possibilité de rejoindre des SCOPs, afin de profiter de notre position de force en tant que développeur⋅se⋅s pour changer le monde et le rendre meilleur !</li><li>Puis pour les deux dernières conférences de la journée, Samuel Rozé a présenté le format JSON-LD et la manière dont les données peuvent être standardisées afin les croiser facilement, puis Nicolas Grekas a présenté le composant <a href="https://symfony.com/doc/current/components/runtime.html">Runtime</a> de Symfony et ses implications pour la programmation fonctionnelle en PHP.</li></ul>



<center><blockquote class="twitter-tweet">This is the last talk of <a href="https://twitter.com/hashtag/ApiPlatformCon?src=hash&amp;ref_src=twsrc%5Etfw">#ApiPlatformCon</a> 2021: <a href="https://twitter.com/nicolasgrekas?ref_src=twsrc%5Etfw">@nicolasgrekas</a> with his presentation of <a href="https://twitter.com/hashtag/Symfony?src=hash&amp;ref_src=twsrc%5Etfw">#Symfony</a> Runtime <a href="https://t.co/Ba4yGiD1GG">pic.twitter.com/Ba4yGiD1GG</a>— API Platform (@ApiPlatform) <a href="https://twitter.com/ApiPlatform/status/1436347686714761228?ref_src=twsrc%5Etfw">September 10, 2021</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>



<h2>Un challenge de taille</h2>



L&rsquo;organisation de cet événement fut un véritable challenge pour notre coopérative compte tenu du contexte sanitaire, mais tout s’est déroulé à merveille, grâce au respect des normes sanitaires par les participants : le port du masque était obligatoire et une distanciation dans les salles avec une séparation d’un siège sur deux était requise dans la mesure du possible.



Nous sommes heureux d’avoir pu retrouver notre communauté de visu après plus d’un an et demi d’événements tenus à distance, nous avons eu le sentiment de vivre les retrouvailles d’une réunion de famille ! Ce sentiment a perduré pendant la soirée communautaire qui se tenait au Mama Shelter où nous avons soufflé, avec notre centaine d’invité·e·s, notre dixième anniversaire. Au programme de cette soirée : mignardises, frise chronologique en photo, tag géant réalisé à plusieurs mains, et dévoilement de notre nouvelle identité visuelle, que nos coopérateurs Laury Sorriaux et Grégory Copin se feront un plaisir de vous présenter dans de futurs articles.



<center><blockquote class="twitter-tweet">On est dans cette histoire longue vie au <a href="https://twitter.com/coopTilleuls?ref_src=twsrc%5Etfw">@coopTilleuls</a> <a href="https://twitter.com/hashtag/10ansDeja?src=hash&amp;ref_src=twsrc%5Etfw">#10ansDeja</a> <a href="https://t.co/EhEVkVXFG2">pic.twitter.com/EhEVkVXFG2</a>— actu senzo (@Actusenzo) <a href="https://twitter.com/Actusenzo/status/1436451314981027842?ref_src=twsrc%5Etfw">September 10, 2021</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>



Un grand merci à Cécile Helary Hamerel pour tout le travail d’organisation effectué ainsi qu’à tous les speakers pour avoir partagé leurs conférences ! Rendez-vous en 2022 !