Am&eacute;liorer les biblioth&egrave;ques utilis&eacute;es par Mercure


Montez en comp&eacute;tences sur Mercure


Changements dans l&rsquo;impl&eacute;mentation de r&eacute;f&eacute;rence&nbsp;

Sortie de Mercure 0.10 !

API Platform, c’est à ce jour :&nbsp;



<ul><li role="presentation">Plus de 500 contributrices et contributeurs qui ont participé à son développement ;</li><li role="presentation">3,8 millions de <a href="https://packagist.org/packages/api-platform/core" target="_blank" rel="noopener">téléchargements sur Packagist</a> ;</li><li role="presentation">Une core team grandissante jour après jour ;</li><li role="presentation">6000 étoiles sur <a href="https://github.com/api-platform/api-platform" target="_blank" rel="noopener">Github</a> ;</li><li role="presentation">Plus de 3000 membres présents sur le channel #api-platform du Slack de Symfony ;</li><li role="presentation">Une référence technologique reconnue et utilisée par de grands noms du web à travers le monde&nbsp; : Orange, Decathlon, Arte ou encore France Télévisions utilisent API Platform.</li></ul>



Ces dernières semaines, nous avons mis à jour le site d’<a href="https://api-platform.com/" target="_blank" rel="noopener">API Platform</a> en développant davantage les sections dédiées à la communauté. Découvrons-les ensemble :&nbsp;



<blockquote class="twitter-tweet">The <a href="https://twitter.com/ApiPlatform?ref_src=twsrc%5Etfw">@ApiPlatform</a> website now has a community section with a dedicated page for each contributor, the upcoming events and awesome wallpapers featuring Webby! Thanks <a href="https://twitter.com/ginifizz?ref_src=twsrc%5Etfw">@ginifizz</a> for your amazing work! <a href="https://t.co/oq8K35rnXG">https://t.co/oq8K35rnXG</a>— Kévin Dunglas (@dunglas) <a href="https://twitter.com/dunglas/status/1234887739675414528?ref_src=twsrc%5Etfw">March 3, 2020</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>



<h3>Top contributors</h3>



Parce que nous pensons que chaque projet communautaire devrait valoriser les personnes qui y contribuent, nous affichons désormais la liste de tous les contributeurs d’API Platform sur <a href="https://api-platform.com/community/contributors/" target="_blank" rel="noopener">une page dédiée</a>. Sans grande surprise, la majorité de l’équipe maintenant les composants arrive en tête du classement mais si vous aussi&nbsp;vous avez contribué au projet, vous devriez vous apercevoir dans la liste !



<figure class="wp-block-image"><a href="https://api-platform.com/community/contributors/v" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/353.gif" alt="giphy" title="giphy"/></a></figure>



En plus de l’élaboration du classement par ordre de contributions, lorsque vous cliquez sur un profil, vous aurez le détail de tous les&nbsp;dépôts&nbsp;sur lesquels le contributeur ou la contributrice aura travaillé&nbsp;:&nbsp;



<figure class="wp-block-image"><a href="https://api-platform.com/community/contributors/Deuchnord" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/355.png" alt="deuchnord" title="deuchnord"/></a></figure>



<h3>Événements</h3>



Maintenant, vous pouvez consulter les prochains meetups dédiés à votre framework préféré sur <a href="https://api-platform.com/community/events/">une page spéciale</a>. Restez à l’écoute, d’autres événements devraient voir le jour très prochainement. Pour le moment seuls les événements organisés sur Meetup sont ajoutés via leur API, nous regardons à l’heure actuelle pour en ajouter d’autres venant d&rsquo;autres plateformes. N&rsquo;hésitez pas à venir nous filer <a rel="noreferrer noopener" href="https://github.com/api-platform/website" target="_blank">un coup de main</a> !&nbsp;



<figure class="wp-block-image"><a href="https://api-platform.com/community/events/" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/356.png" alt="Events" title="Events"/></a></figure>



<h3>Ressources</h3>



Vous pouvez aussi, depuis la partie Ressources accéder à différents contenus :&nbsp;



<ul><li>News : rien ne change de ce côté là par rapport à avant. Dans cet onglet, vous avez le fil Twitter de la page API Platform qui s’affiche. Si vous n’êtes toujours pas <a href="https://twitter.com/ApiPlatform" target="_blank" rel="noreferrer noopener">abonné·e à ce compte</a>, c’est le moment ou&nbsp;jamais 🙂&nbsp;</li><li>Charte graphique : vous avez une présentation sur&nbsp;API Plattform à faire ou alors vous voulez afficher sur un rollup que ce framework fait partie des expertises de votre société ? Vous avez dorénavant&nbsp;accès à une page où vous pouvez retrouver nos différents logos et typos en SVG ou PNG. Ces créations sont protégées par <a href="https://api-platform.com/trademark-policy" target="_blank" rel="noreferrer noopener">une charte</a>, pensez à nous prévenir lorsque vous vous en servez.</li><li>Fonds d’écran : désormais, vous pouvez aussi télécharger des fonds d’écran API Platform (formats 2880 x 1800 ; 1920 x 1080 ; 1920 x 1200). Inspirations Marvel, DC Comics ou intergalactiques : il y en a pour tous les goûts : <a href="https://api-platform.com/resources/wallpapers/" target="_blank" rel="noreferrer noopener">https://api-platform.com/resources/wallpapers/</a>.&nbsp;</li><li>Coloring Webby : pendant le confinement, nous avons mis à disposition des <a href="https://api-platform.com/resources/colouring-webby/" target="_blank" rel="noreferrer noopener">coloriages API Platform à imprimer</a> pour laisser libre court à votre créativité (ou celle des plus petits). Certains d&rsquo;entre vous nous ont partagé&nbsp;leurs&nbsp;chefs-d’oeuvres, ça nous a fait chaud au coeur 🙂&nbsp;</li></ul>



<blockquote class="twitter-tweet"><a href="https://twitter.com/coopTilleuls?ref_src=twsrc%5Etfw">@coopTilleuls</a> voilà un chef-d&rsquo;œuvre de mon fils de cinq ans, ravi d&rsquo;avoir colorié « des trucs de l&rsquo;espace »! <a href="https://t.co/MWQmQqrqSf">pic.twitter.com/MWQmQqrqSf</a>— Christophe Dujarric (@Chris_Dujarric) <a href="https://twitter.com/Chris_Dujarric/status/1248252567437692930?ref_src=twsrc%5Etfw">April 9, 2020</a></blockquote>



Nous travaillons à l&rsquo;heure actuelle sur de nouvelles évolutions du site, restez à l&rsquo;écoute ! <a rel="noreferrer noopener" href="https://github.com/api-platform/" target="_blank">Aidez-nous&nbsp;à améliorer continuellement ce projet en y contribuant</a>. Vous pouvez également lui donner&nbsp;une étoile sur Github ou le suivre&nbsp;sur&nbsp;<a rel="noreferrer noopener" href="https://twitter.com/ApiPlatform" target="_blank">Twitter</a>&nbsp;!&nbsp;

API Platform : mise en avant de la communauté et ressources documentaires

La pandemia di coronavirus ha fatto sì che vaste parti del mondo siano sottoposte a un contenimento indefinito. <a href="https://click-n-collect.shop/en" target="_blank" rel="noopener">Sylius Click &lsquo;N&rsquo; Collect</a> è una soluzione che permette di continuare a vendere senza contatto fisico o consegna, nel rispetto delle norme di salute e in completa sicurezza!



<figure class="wp-block-image"><a href="https://click-n-collect.shop/en" 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>







Abilitando la raccolta senza contatto degli acquisti, Sylius Click &lsquo;N&rsquo; Collect protegge sia i vostri lavoratori che i vostri clienti. Sylius Click &lsquo;N&rsquo; Collect è un plugin per la piattaforma e-commerce Sylius. E gratuito, open source e progettato da Les-Tilleuls.coop. Può essere utilizzato in aggiunta a tutte le altre caratteristiche di Sylius e a tutti gli altri plugin disponibili.



<h3>Come funziona?</h3>



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



Come cliente:&nbsp;



<ul><li style="text-align: justify;" role="presentation">Andate sul sito del negozio dove desiderate effettuare i vostri acquisti.</li><li style="text-align: justify;" role="presentation">Scegliete il luogo di ritiro (se il vostro negozio è presente in più sedi)&nbsp;</li><li style="text-align: justify;" role="presentation">Scegliete tra le fasce orarie disponibili quella in cui volete ritirare i vostri prodotti</li><li style="text-align: justify;" role="presentation">Pagate il vostro ordine con il metodo di pagamento preferito (si consiglia il pagamento online per evitare il contatto fisico, Stripe e PayPal sono anche supportati in modo nativo)</li><li style="text-align: justify;" role="presentation">Scrivi il tuo numero d&rsquo;ordine</li><li style="text-align: justify;" role="presentation">All&rsquo;orario previsto, andate a ritirare i vostri prodotti senza alcun contatto. Facoltativo: utilizzate il codice PIN fornito per recuperare i vostri prodotti.&nbsp;</li></ul>



<figure class="wp-block-image"><a href="https://click-n-collect.shop/en" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/345.png" alt="italien client" title="italien client"/></a></figure>







Come mercante:



<ul><li style="text-align: justify;">Controllate il vostro calendario nell&rsquo;interfaccia di amministrazione per vedere i vostri ordini correnti</li><li style="text-align: justify;">Preparate i vostri ordini: metteteli in sacchetti o in magazzino, quindi rendete il numero d&rsquo;ordine facilmente visibile al cliente (agrafatelotelo o scrivetelo sul pennarello).</li><li style="text-align: justify;">Inserite i vostri ordini nel vostro spazio di stoccaggio (scaffali, scaffali, scatole, ecc.).</li><li style="text-align: justify;">Tra un ordine e l&rsquo;altro, pulire accuratamente l&rsquo;area di stoccaggio e gli eventuali lucchetti con disinfettanti. Facoltativo: conservazione sicura con un lucchetto con il codice PIN che è stato trasmesso al cliente.</li><li style="text-align: justify;">Monitorate in modo sicuro i vostri ordini dal registratore di cassa, dietro una finestra o con un sistema di videosorveglianza.</li></ul>



<a href="https://click-n-collect.shop/en" target="_blank" rel="noopener"><img id="image" style="width: 100%;" title="italien" src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/344.png" alt="italien"></a>E fallo di nuovo! Con Sylius Click &lsquo;N&rsquo; Collect, potete mantenere la vostra attività, impedendo al tempo stesso la diffusione del virus!&nbsp;Volete maggiori informazioni su questo strumento? <a href="https://les-tilleuls.coop/en/contact" target="_blank" rel="noopener">Contattateci</a>, rimaniamo disponibili a distanza 🙂&nbsp;

Sylius Click 'N' Collect: continuate la vostra attività in sicurezza durante la pandemia del COVID-19

En raison de la pandémie liée au coronavirus, une grande partie du monde est sous confinement pour une durée indéterminée. <a href="https://click-n-collect.shop/" target="_blank" rel="noopener">Sylius Click &lsquo;N&rsquo; Collect</a> est une solution vous permettant de continuer à vendre sans contact physique ni livraison donc en toute sécurité et dans le respect des consignes de sécurité sanitaire !

<figure class="wp-block-image"><a href="https://click-n-collect.shop/en" 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>



En permettant la collecte sans contact des achats, Sylius Click &lsquo;N&rsquo; Collect protège vos travailleurs ainsi que vos clients. Sylius Click &lsquo;N&rsquo; Collect est un plugin pour la plateforme e-commerce <a href="https://sylius.com/partners/les-tilleus-coop/" target="_blank" rel="noopener">Sylius</a>, dont nous sommes partenaires. Il est gratuit, Open Source et conçu par nos petites mains. Il peut être utilisé en complément de toutes les autres fonctionnalités de Sylius et de tous les autres plugins disponibles.

<h3>Comment cela fonctionne ?</h3>

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

En&nbsp;tant que client :&nbsp;

<ul><li style="text-align: justify;" role="presentation">Rendez-vous sur le site de la boutique où vous souhaitez effectuer vos achats</li><li style="text-align: justify;" role="presentation">Choisissez le lieu de collecte (si votre boutique est présente dans plusieurs endroits)&nbsp;</li><li style="text-align: justify;" role="presentation">Sélectionnez parmi les créneaux horaires disponibles celui où vous voulez récupérer vos produits</li><li style="text-align: justify;" role="presentation">Réglez votre commande avec le moyen de paiement que vous préférez (nous recommandons le paiement en ligne pour éviter tout contact physique, Stripe et PayPal sont supportés nativement)</li><li style="text-align: justify;" role="presentation">Notez votre numéro de commande</li><li style="text-align: justify;" role="presentation">À l&rsquo;heure prévue, allez récupérer vos produits sans le moindre contact. Facultatif : utilisez le code PIN fourni pour retirer vos produits.</li></ul>

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



En&nbsp;tant que commerçant :&nbsp;

<ul><li style="text-align: justify;" role="presentation">Consultez votre calendrier dans votre interface d&rsquo;administration afin de voir vos commandes en cours</li><li style="text-align: justify;" role="presentation">Préparez vos commandes : placez-les dans des sacs ou des rangements, puis faites en sorte que le numéro de commande soit facilement visible par le client (agrafez-le ou écrivez-le au marqueur)</li><li style="text-align: justify;" role="presentation">Placez vos commandes dans vos rangements (étagère, rayonnage, casiers, cartons…)</li><li style="text-align: justify;" role="presentation">Entre chaque commande nettoyez avec précaution le rangement et l’éventuel cadenas avec des produits désinfectants</li><li style="text-align: justify;" role="presentation">Facultatif : sécurisez le rangement en utilisant un cadenas bloqué avec le code PIN&nbsp; qui a été transmis au client</li><li style="text-align: justify;" role="presentation">Surveillez vos collectes de commande en toute sécurité depuis votre caisse, derrière une fenêtre ou à l&rsquo;aide d&rsquo;un système de vidéo surveillance</li></ul>

<figure class="wp-block-image"><a href="https://click-n-collect.shop/fr" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/338.png" alt="version centrée" title="version centrée"/></a></figure>



Et recommencez ! Avec Sylius Click ‘N’ Collect, vous poursuivez votre activité tout en empêchant le virus de se propager !&nbsp;Vous souhaitez des informations complémentaires au sujet de cet outil ? Contactez-nous, <a href="https://les-tilleuls.coop/fr/blog/article/covid-19" target="_blank" rel="noopener">nous restons disponibles à distance</a> ! Vous pouvez également tester la démo à cette adresse :&nbsp;<a href="https://demo.click-n-collect.shop/en_US/">https://demo.click-n-collect.shop/en_US/</a>.

Sylius Click 'N' Collect :  une solution libre et gratuite de vente sans contact et sans livraison pour faire face à la pandémie

<a href="https://api-platform.com/" target="_blank" rel="noopener">API Platform</a> est un framework Open Source&nbsp;permettant de construire et consommer des API REST (JSON-LD, Hydra, JSON:API&#8230;) et GraphQL. À l&rsquo;occasion du Hacktoberfest, nous voulons remercier tous nos contributeurs en leur offrant un t-shirt API Platform au design inédit. Pour remporter un t-shirt, c&rsquo;est très simple : faites 3 pull requests sur l&rsquo;un des dépôts <a href="https://github.com/api-platform" target="_blank" rel="noopener">API Platform sur GitHub</a> avant le 31 octobre, puis <a href="https://cooptilleuls.typeform.com/to/CG0pLd" target="_blank" rel="noopener">remplissez ce formulaire</a>.

<figure class="wp-block-image"><a href="https://cooptilleuls.typeform.com/to/CG0pLd" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/314.jpg" alt="Hacktoberfest" title="Hacktoberfest"/></a></figure>



Quelques précisions :&nbsp;

<ul><li style="text-align: justify;">Pour gagner un t-shirt, les PR acceptées doivent avoir été ouvertes entre le 1er et le 31 octobre et approuvées par la core team&nbsp;d&rsquo;API Platform.</li><li style="text-align: justify;">Toutes les contributions sont les bienvenues, même les plus minimes.</li><li style="text-align: justify;">Besoin d&rsquo;un coup de main pour trouver un sujet sur lequel vous pencher ?&nbsp;&nbsp;Quelques issues détiennent un label Hacktoberfest&nbsp;sur les repos&nbsp;<a href="https://github.com/api-platform/core/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest" target="_blank" rel="noopener noreferrer">API Platform core (PHP)</a>,&nbsp;<a href="https://github.com/api-platform/client-generator/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest" target="_blank" rel="noopener noreferrer">Client Generator</a>,&nbsp;<a href="https://github.com/api-platform/docs/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest" target="_blank" rel="noopener noreferrer">Docs</a>,&nbsp;<a href="https://github.com/api-platform/admin/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest" target="_blank" rel="noopener noreferrer">Admin (JavaScript)</a>,&nbsp;<a href="https://github.com/api-platform/api-doc-parser/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest" target="_blank" rel="noopener noreferrer">API Doc Parser (JavaScript)</a>&nbsp;ou dans la&nbsp;<a href="https://github.com/api-platform/api-platform/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest" target="_blank" rel="noopener noreferrer">Distribution</a>&nbsp;!</li><li style="text-align: justify;">Ne manquez pas le hackathon Symfony x API Platorm x React Admin le 30 octobre prochain dans nos bureaux de Paris ! <a href="https://www.meetup.com/fr-FR/meetup-group-RzDLfqfs/events/265555771/" target="_blank" rel="noopener">Plus d&rsquo;infos sur Meetup</a>.</li></ul>

À propos de Hacktoberfest :&nbsp;Hacktoberfest est une célébration d&rsquo;un mois organisée par DigitalOcean (en partenariat avec Dev) pour promouvoir la collaboration et les contributions open source. Découvrez <a href="https://hacktoberfest.digitalocean.com/" target="_blank" rel="noopener">le site web du Hacktoberfest</a>.

Participez au Hacktoberfest avec API Platform !

<a href="https://api-platform.com" target="_blank" rel="noopener">API Platform</a> is a popular web framework providing server and client components for building and consuming REST (JSON-LD, Hydra, JSON:API…) and GraphQL APIs. On the occasion of Hacktoberfest, we would like to thank all our contributors by giving them a free API Platform Contributor t-shirt. To win a t-shirt, make 3 pull requests on API Platform&rsquo;s GitHub repositories by October 31st, and <a href="https://cooptilleuls.typeform.com/to/CG0pLd" target="_blank" rel="noopener">then fill in this form</a>.

<figure class="wp-block-image"><a href="https://cooptilleuls.typeform.com/to/CG0pLd" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/314.jpg" alt="Hacktoberfest" title="Hacktoberfest"/></a></figure>



Notes:

<ul><li>Pull requests have to be approved by the API Platform Core Team. As long as they&rsquo;ve been opened between October 1 and October 31, they count toward a free t-shirt.</li><li>All contributions are welcome including small improvements to our documentation.</li><li>Looking for easy picks to earn a t-shirt? Some issues are already tagged on <a href="https://github.com/api-platform/core/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest" target="_blank" rel="noopener">API Platform core (PHP)</a>, <a href="https://github.com/api-platform/client-generator/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest" target="_blank" rel="noopener">Client Generator</a>, <a href="https://github.com/api-platform/docs/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest" target="_blank" rel="noopener">Docs</a> or in the <a href="https://github.com/api-platform/api-platform/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest" target="_blank" rel="noopener">Distribution</a>!</li></ul>

Hacktoberfest is a month-long celebration organized by DigitalOcean (in partnership with Dev) to promote Open Source collaboration and contributions. Check out <a href="https://hacktoberfest.digitalocean.com/" target="_blank" rel="noopener">Hacktoberfest&rsquo;s website</a>.

Celebrate Hacktoberfest with API Platform

Depuis quelques temps, nous avons instauré une nouvelle routine dans notre SCOP : tous les deux mois, l’ensemble de l’équipe se rejoint pour une journée entière dédiée à la contribution aux outils Libres que nous utilisons, <a href="https://api-platform.com">développons&#8230;</a> ou pas !



Cette nouvelle initiative vient en complément du temps déjà alloué à certains de nos coopérateurs pour maintenir <a href="https://symfony.com">certains</a> <a href="https://mercure.rocks">des</a> <a href="https://github.com/symfony/panther">projets</a> qui permettent à notre structure (comme tant d’autres) de prospérer. La problématique de la pérennité et de la maintenance des <a href="https://www.gnu.org/philosophy/free-sw.fr.html">Logiciels Libres</a> — qui sont pourtant le socle de la société de l’information — <a href="https://www.vice.com/en_us/article/43zak3/the-internet-was-built-on-the-free-labor-of-open-source-developers-is-that-sustainable">est un sujet complexe</a> et <a href="http://themaintainers.org/">d’utilité publique</a> auquel peu de réponses efficaces ont pour le moment été apportées.



En dédiant du temps à nos développeurs pour travailler sur ces projets, notre coopérative tente d’améliorer la situation, et <a href="https://techcrunch.com/2018/06/23/open-source-sustainability/">de contribuer en retour aux infrastructures d’intérêt général</a> créées et maintenues gratuitement par des développeurs du monde entier. C&rsquo;est aussi une bonne occasion pour nos équipes de <a href="https://www.quora.com/Is-there-the-other-way-to-improve-my-programming-skills-by-contributing-to-my-own-strength-in-an-open-source-project">monter en compétence</a>, de découvrir de nouvelles technologies et de se confronter à des problématiques avancées.



Malgré le calme du mois d’août, nous avons à nouveau relevé ce défi : il y a quelques jours, une vingtaine de coopérateurs se sont regroupés pour corriger des problèmes de sécurité, résoudre des bugs, relire des patchs proposés par la communauté et ajouter des nouvelles fonctionnalités sur différents projets libres que nous affectionnons..



<blockquote class="twitter-tweet">Hier, c’était notre journée dédiée à l’<a href="https://twitter.com/hashtag/OSS?src=hash&amp;ref_src=twsrc%5Etfw">#OSS</a> ! Entre ouvertures d’issues ou de PR sur <a href="https://twitter.com/ApiPlatform?ref_src=twsrc%5Etfw">@ApiPlatform</a>, <a href="https://twitter.com/symfony?ref_src=twsrc%5Etfw">@symfony</a> ou encore <a href="https://twitter.com/hashtag/ReactAdmin?src=hash&amp;ref_src=twsrc%5Etfw">#ReactAdmin</a>, notre équipe n’a pas chômé ! Nous vous dévoilerons bientôt sur le blog comment se déroule ce type de journée dans notre <a href="https://twitter.com/hashtag/SCOP?src=hash&amp;ref_src=twsrc%5Etfw">#SCOP</a> <a href="https://t.co/ATOJJpEvUR">pic.twitter.com/ATOJJpEvUR</a>— Les-Tilleuls.coop (@coopTilleuls) <a href="https://twitter.com/coopTilleuls/status/1163730645266444288?ref_src=twsrc%5Etfw">August 20, 2019</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>



La journée a démarré par la constitution des groupes de travail :&nbsp;



<ul><li style="text-align: justify;">Le groupe de travail API Platform s’est affairé à sortir <a href="https://twitter.com/dunglas/status/1163721364194365440" target="_blank" rel="noopener">API Platform 2.4.6</a> et à préparer la publication imminente de API Platform 2.5 beta&nbsp;;</li><li style="text-align: justify;">L&rsquo;équipe travaillant sur React Admin s’est en particulier concentrée sur la finalisation d’une toute nouvelle version de l’intégration entre API Platform et ce composant (réalisée en collaboration avec <a href="https://marmelab.com/fr/">Marmelab</a>) qui va améliorer énormément sa facilité d’utilisation et de personnalisation ;</li><li style="text-align: justify;">L&rsquo;équipe travaillant sur Symfony s’est concentrée&nbsp;sur la correction de bugs touchant l’outil.</li></ul>



<h3>Découvrez nos contributions :</h3>



<ul><li>L&rsquo;équipe a finalisé l’ajout d’une <a href="https://github.com/api-platform/core/pull/2983" target="_blank" rel="noopener">nouvelle fonctionnalité majeure qui arrivera dans API Platform 2.5</a> : le support des spécificités des formats d’API générés (tel que Hydra) dans la documentation OpenAPI auto-générée, et la possibilité de générer des JSON Schema correspondant à une resource ;</li><li>En utilisant cette nouvelle infrastructure, Jacques Lefebvre a ajouté <a href="https://github.com/api-platform/core/pull/2996">une commande de permettant d’exporter un JSON Schema à partir d’une ressource</a>&nbsp;;</li><li>Quentin Barloy <a href="https://github.com/api-platform/core/pull/2990">a résolu un bug </a>touchant API Platform lorsqu’un data provider renvoie un générateur, il a également amélioré<a href="https://github.com/api-platform/docs/pull/858"> la documentation</a> concernant cette fonctionnalité. ll <a href="https://github.com/api-platform/core/pull/2995">a également ajouté des tests unitaires</a> couvrant le tout nouveau générateur de JSON Schema ;</li><li>Kévin Van Der Stracten a réalisé <a href="https://github.com/api-platform/core/pull/2994">sa première correction de bug</a> sur API Platform, avec l’aide d’Antoine Bluchet ;</li><li>Grégory Copin<a href="https://github.com/api-platform/client-generator/pull/145"> a adapté le générateur d’application NextJS fournit avec&nbsp;</a><a href="https://github.com/api-platform/client-generator/pull/145">API Platform</a> afin d’utiliser la nouvelle version du populaire framework JavaScript ;</li><li>Mathieu Dewet, en collaboration avec Robin Chalas, a <a href="https://github.com/symfony/symfony/pull/33246">&nbsp;corrigé l&rsquo;implémentation de la méthode refreshUser du LdapProvider</a>, et corrigé quelques autres problèmes dans Symfony ;</li><li>Vincent Chalamon a drastiquement amélioré <a href="https://github.com/api-platform/core/pull/2992">la sécurité et la facilité d’utilisation du mécanisme de contrôle d’accès fourni avec API Platform</a>&nbsp;;</li><li>Grégoire Hébert a ajouté une nouvelle fonctionnalité à API Platform permettant de choisir <a href="https://github.com/api-platform/core/pull/2998">quelles versions d’OpenAPI activer</a>&nbsp;;</li><li>Jean-François Thuillier et Morgan Auchedé ont&nbsp;<a href="https://github.com/coopTilleuls/admin/pull/14">finalisé</a> la nouvelle version de API Platform Admin et commencé à <a href="https://github.com/coopTilleuls/docs/pull/1">rédiger de la documentation</a>.</li></ul>



Bilan de cette journée de travail : 13 PR ont été mergées, 2 issues ouvertes et d’autres sujets sont en cours de réflexion.&nbsp;



Chez Les-Tilleuls.coop, nous encourageons et accompagnons nos coopérateurs, même les débutants ou les plus timides, à contribuer aux logiciels qu’ils utilisent. La communauté du Logiciel Libre est basée sur le partage de connaissances, la collaboration et l’échange. Chaque contribution, peu importe son envergure, est bénéfique et a un effet durable sur l’écosystème.&nbsp;Des réticences peuvent survenir, liées à la peur de ne pas se sentir légitime d’apporter quelque chose mais il faut garder à l’esprit que nous avons la chance d’avoir accès à une grande communauté de contributeurs agissant pour l’amélioration continue et la fiabilité des logiciels que nous utilisons. Les accompagner dans cette amélioration est la meilleure manière de les remercier pour tout le temps qu’ils ont déjà entrepris dans cette démarche.&nbsp;

Une journée chez Les-Tilleuls.coop : contribution collective au Logiciel Libre

D&eacute;couvrez nos contributions issues du hackathon


Ce week-end, nous étions invités par la Commission Européenne à participer à un hackathon de 48 heures&nbsp;axé sur&nbsp;la sécurité, aux côtés de contributeurs et core-members de <a href="https://symfony.com/" target="_blank" rel="noopener">Symfony</a> et <a href="https://api-platform.com/" target="_blank" rel="noopener">API Platform</a>. Les frameworks&nbsp;<a href="https://twitter.com/symfony" target="_blank" rel="noopener">Symfony</a> et <a href="https://les-tilleuls.coop/fr/blog/article/api-platform-2-4-beta-mongodb-elasticsearch-mercure-symfony-messenger-et-bien-plus" target="_blank" rel="noopener">API&nbsp;Platform</a> se&nbsp;sont imposés depuis quelques années dans l&rsquo;écosystème PHP.&nbsp;La Commission Européenne l&rsquo;a bien compris et souhaite désormais&nbsp;les intégrer dans ses projets. C&rsquo;est dans cette optique que la Direction Générale Informatique de la Commission Européenne (DG&nbsp;DIGIT) a&nbsp;ouvert un programme de bug bounty&nbsp;ainsi qu&rsquo;un&nbsp;hackathon, le tout supporté par le <a href="https://joinup.ec.europa.eu/collection/eu-fossa-2" target="_blank" rel="noopener">EU-FOSSA 2</a>.



Ce hackathon était sur invitation et a&nbsp;regroupé une cinquantaine de développeurs·ses&nbsp;dont les missions principales étaient de discuter de la diversité au sein de l&rsquo;écosystème, corriger les problèmes de sécurité, réduire le nombre de tickets de support ouverts ainsi que le nombre de contributions en attente.



<figure class="wp-block-image"><a href="https://www.flickr.com/photos/bemyapp/albums/72157679752994498/page2" target="_blank" rel="noopener"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/299.jpg" alt="team hackathon" title="team hackathon"/></a></figure>







Lors de ces deux jours, 5&nbsp;points de sécurité ont été patchés. 20&nbsp;pull requests ont été mergées sur le projet <a href="https://github.com/api-platform/api-platform" target="_blank" rel="noopener">API Platform</a>, 10&nbsp;nouvelles PR ont été ouvertes, 87 issues ont été fermées et 4 nouvelles ont été ouvertes. Du côté de Symfony, près de 100 PR ont été mergées, 25 ouvertes, 84 issues ont été fermées et 11 ont été ouvertes. Un énorme travail a&nbsp;été effectué lors de ce week-end ! Si nous devions comparer ça à&nbsp;des journées de travail « classiques »,&nbsp;nous avons abattu en 2 jours l&rsquo;équivalent de&nbsp;2 mois de travail.



<figure class="wp-block-image"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/297.png" alt="null" title="API p"/></figure>







<figure class="wp-block-image"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/298.png" alt="null" title="Symfony Hackathon"/></figure>







Une chose a été relevée par les organisateurs lors de ces deux jours :&nbsp;ils avaient rarement vu une équipe&nbsp;aussi investie dans leur travail&nbsp;et dans un projet. J&rsquo;ai le souvenir d&rsquo;un moment de flottement alors que nous venions de passer 2 jours à travailler de manière intense :&nbsp;nous attendions une personne pour démarrer une présentation, et personne ne souhaitait attendre 15 minutes à ne rien faire. Chacun a&nbsp;souhaité retourner sur ce qu&rsquo;il était en train de faire. Si ça n&rsquo;est pas le reflet d&rsquo;une équipe de gens passionnés et investis dans l&rsquo;Open Source, je ne sais pas ce que c&rsquo;est.



<h3>Découvrez nos contributions issues du hackathon</h3>



<ul><li style="text-align: justify;">Depuis maintenant 2 ans, API Platform propose l&rsquo;implémentation de subresources, permettant d&rsquo;imbriquer des relations depuis une ApiResource. Bien qu&rsquo;intéressante et très utilisée aujourd&rsquo;hui, cette fonctionnalité est souvent complexe à prendre en main et&nbsp;limitée. Avec l&rsquo;aide de <a href="https://github.com/vincentchalamon" target="_blank" rel="noopener">Vincent Chalamon</a>, <a href="https://twitter.com/s0yuka" target="_blank" rel="noopener">Antoine Bluchet</a> et&nbsp;<a href="https://github.com/torreytsui" target="_blank" rel="noopener">Torrey Tsui</a>, nous avons effectué&nbsp;des recherches sur l&rsquo;amélioration des <a href="https://github.com/api-platform/core/issues/2706" target="_blank" rel="noopener">subresources</a>, la&nbsp;simplification de son implémentation&nbsp;et la gestion étendue des collections.</li><li style="text-align: justify;">Grâce à <a href="https://github.com/jewome62" target="_blank" rel="noopener">Jérôme Desjardins</a>, il est désormais possible d&rsquo;hydrater des objets existants (<a href="https://github.com/symfony/symfony/pull/30607" target="_blank" rel="noopener">object_to_populate</a>) récursivement avec le <a href="https://symfony.com/doc/current/components/serializer.html" target="_blank" rel="noopener">composant Serializer de Symfony</a>, de normaliser un&nbsp;objet de type <a href="https://github.com/symfony/symfony/pull/30915" target="_blank" rel="noopener">DateTimeZone</a> et également d&rsquo;<a href="https://github.com/symfony/symfony/pull/30956" target="_blank" rel="noopener">instancier un objet dynamique&nbsp;à partir d&rsquo;un tableau de valeur</a>.</li><li style="text-align: justify;"><a href="https://github.com/alanpoulain" target="_blank" rel="noopener">Alan Poulain</a>&nbsp;a pu travailler sur plusieurs sujets comme GraphQL, MongoDB&nbsp;et le système d&rsquo;évènements d&rsquo;API Platform. Du côté&nbsp;de GraphQL, certains aspects de la certification n&rsquo;étaient&nbsp;pas respectés dans leur entièreté. Les <a href="http://github.com/api-platform/core/pull/2705" target="_blank" rel="noopener">input via Messenger</a> n&rsquo;étaient pas testés avec MongoDB et <a href="https://github.com/api-platform/core/pull/2707" target="_blank" rel="noopener">la documentation a été améliorée</a>. Au niveau des événements, API Platform s&rsquo;appuie sur ceux de Symfony, ce qui peut être&nbsp;problématique puisqu&rsquo;il se veut être un framework agnostique. Afin de faciliter le portage vers d&rsquo;autres frameworks tels que Laravel, <a href="https://github.com/api-platform/core/pull/2506" target="_blank" rel="noopener">Alan a travaillé sur le déport vers des événements internes</a> à API Platform. Ce déport se veut progressif, pour déprécier dans un premier temps la dépendance avec Symfony avant de complètement couper les ponts pour la version 3 d&rsquo;API Platform.</li><li><a href="https://twitter.com/Deuchnord" target="_blank" rel="noopener">Jérôme Tanghe</a>,&nbsp;de son côté,&nbsp;s&rsquo;est penché sur le générateur de client afin de lui <a href="https://github.com/api-platform/client-generator/pull/114">apporter de l&rsquo;amour</a>. Un peu de nettoyage sur la documentation et le support de <a href="https://github.com/dunglas/mercure" target="_blank" rel="noopener">Mercure</a> au sein de <a href="https://vuejs.org/" target="_blank" rel="noopener">VueJS</a>&nbsp;lors de la génération ont été ses principales préoccupations lors de ce week-end.</li><li style="text-align: justify;"><a href="https://github.com/jfthuillier" target="_blank" rel="noopener">Jean-François Thuillier</a> a complété la documentation de l&rsquo;admin afin d&rsquo;expliquer comment <a href="https://github.com/api-platform/docs/pull/765" target="_blank" rel="noopener">surcharger certaines fonctions</a>. Il a également pu travailler sur un POC afin d&rsquo;utiliser les « Guessers » de React Admin avec API Platform.</li><li style="text-align: justify;"><a href="https://github.com/antograssiot" target="_blank" rel="noopener">Anthony Grassiot</a> a pu travailler sur la sécurité en&nbsp;<a href="https://github.com/api-platform/core/pull/2710" target="_blank" rel="noopener">verrouillant&nbsp;l&rsquo;accès à une ressource avant qu&rsquo;elle soit manipulée</a>. Il a également amélioré la <a href="https://github.com/api-platform/core/pull/1974" target="_blank" rel="noopener">détermination pour une propriété d&rsquo;être accessible en lecture et en écriture</a>, il a aussi&nbsp;ajouté des tests et avancé&nbsp;sur un sujet complexe qu&rsquo;est le choix d&rsquo;une <a href="https://github.com/api-platform/core/pull/2708" target="_blank" rel="noopener">stratégie de génération des urls</a>.</li><li style="text-align: justify;"><a href="https://twitter.com/toflar" target="_blank" rel="noopener">Yanick Witschi</a>&nbsp;a <a href="https://github.com/api-platform/core/pull/2703" target="_blank" rel="noopener">supprimé de grosses dépendances à l&rsquo;ODM</a>&nbsp;de Doctrine pour les tests, ajouté le support d&rsquo;un <a href="https://github.com/api-platform/core/pull/2698" target="_blank" rel="noopener">paramètre de pagination pour les subresources</a>, et s&rsquo;est penché sur la création d&rsquo;un <a href="https://github.com/api-platform/core/pull/1645" target="_blank" rel="noopener">endpoint pour faire des opérations groupées</a>.</li><li style="text-align: justify;"><a href="https://twitter.com/Nekdev" target="_blank" rel="noopener">Maxime Veber</a> a pu corriger <a href="https://github.com/api-platform/core/pull/2713" target="_blank" rel="noopener">les messages d&rsquo;erreur</a> lors de la récupération de l&rsquo;identifiant d&rsquo;une ressource qui était trop vague, et travaillé sur la <a href="https://github.com/api-platform/core/pull/2713" target="_blank" rel="noopener">résolution de ressource par héritage</a>.</li><li style="text-align: justify;"><a href="http://twitter.com/pborreli" target="_blank" rel="noopener">Pascal Borreli</a>&nbsp;a amélioré&nbsp;les <a href="https://github.com/api-platform/api-platform/pull/1094">charts helms pour le déploiement Kubernetes</a>, corrigé un point de sécurité sur Symfony et a&nbsp;ajouté&nbsp;<a href="http://github.com/symfony/symfony/pull/30984">une option sur les adapter de cache</a> pour mettre en mémoire les mêmes appels lors d&rsquo;une même requête.&nbsp;</li><li style="text-align: justify;"><a href="https://twitter.com/cDaed" target="_blank" rel="noopener">Hamza Amrouche</a>&nbsp;a amélioré la gestion des identifiants et pour ma part, <a href="https://github.com/api-platform/core/pull/2697" target="_blank" rel="noopener">j&rsquo;ai corrigé le fait qu&rsquo;API Platform tente de purger le cache</a> même lorsqu&rsquo;une ressource ne possède pas d&rsquo;opération GET&nbsp;(ce qui provoquait une erreur).</li><li style="text-align: justify;">J&rsquo;ai également pu travailler sur la documentation avec Vincent Chalamon afin de pouvoir&nbsp;<a href="https://github.com/api-platform/website/pull/103" target="_blank" rel="noopener">changer la version de l&rsquo;API</a>&nbsp;depuis l&rsquo;interface ou le format&nbsp;de configuration.&nbsp;</li><li style="text-align: justify;">En plus de fermer le plus d&rsquo;issues possibles,&nbsp;<a href="https://github.com/soyuka" target="_blank" rel="noopener">Antoine Bluchet</a>&nbsp;a accompagné différents contributeurs durant ces deux jours. Il était le contrôleur&nbsp;aérien d&rsquo;API Platform lors de ce week-end.</li></ul>



Retrouvez&nbsp;l&rsquo;intégralité des contributions tous dépôts confondus à l&rsquo;adresse :&nbsp;<a href="https://eufossa.github.io/symfony-hackathon-2019/" target="_blank" rel="noopener">https://eufossa.github.io/symfony-hackathon-2019/</a>.



<h3>Une expérience incomparable</h3>



Ce hackathon fut une véritable aventure humaine. La majorité de l&rsquo;équipe présente venait des quatres coins de l&rsquo;Europe, même des développeurs venus de Russie, du Maroc ou de Cuba&nbsp;étaient là.&nbsp;Nous avons pu rencontrer, pour de vrai, des personnes avec qui nous échangions principalement sur&nbsp;Github ou Twitter. Côté organisation, c&rsquo;était parfait. Tout était pris en charge par la Commission Européenne via la société BeMyApp :&nbsp;le transport, l&rsquo;hébergement, la restauration et&nbsp;le lieu (exceptionnel) du hackathon. Au&nbsp;nom de tous les Tilleuls présents lors de ce week-end, je tiens à remercier toutes les personnes ayant participé à l&rsquo;organisation de cet événement, notamment&nbsp;<a href="http://linkedin.com/in/jfhovinne" target="_blank" rel="noopener">Jean-François Hovinne</a>,&nbsp;à l&rsquo;initiative de cet événement. Merci également à BeMyApp qui était à nos petits soins lors de ces deux jours.



<blockquote class="twitter-tweet" data-lang="fr">The first hackathon of EU-FOSSA 2 project&rsquo;s series of <a href="https://twitter.com/hashtag/FOSSHackathons?src=hash&amp;ref_src=twsrc%5Etfw">#FOSSHackathons</a> is soon over! Thank you <a href="https://twitter.com/symfony?ref_src=twsrc%5Etfw">@symfony</a> <a href="https://twitter.com/EU_DIGIT?ref_src=twsrc%5Etfw">@EU_DIGIT</a> <a href="https://twitter.com/ApiPlatform?ref_src=twsrc%5Etfw">@ApiPlatform</a> <a href="https://twitter.com/coopTilleuls?ref_src=twsrc%5Etfw">@coopTilleuls</a>. Amazing energy and achievements! We&rsquo;ll post a Medium post covering the event next week, stay tuned <a href="https://t.co/R0sZsItp0B">pic.twitter.com/R0sZsItp0B</a>— BeMyApp Belgium (@bemyappBE) <a href="https://twitter.com/bemyappBE/status/1114901233930731525?ref_src=twsrc%5Etfw">7 avril 2019</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>



Nous sommes revenus épuisés mais heureux d&rsquo;avoir apporté, encore plus que d&rsquo;habitude, notre pierre à l&rsquo;édifice des projets Open Source&nbsp;aussi prodigieux que Symfony et API Platform. Les logiciels libres sont&nbsp;souvent mal compris puisque&nbsp;régulièrement associés à la notion de gratuité, or&nbsp;beaucoup de gens s&rsquo;y investissent pleinement. Si des personnes sont prêtes à consacrer de leur temps libre à l&rsquo;amélioration de tels outils, les entreprises devraient sans doute y investir beaucoup plus. Toutes sortes de contributions sont possibles : libérer du temps à vos employés, mettre à disposition vos locaux, sponsoriser des événements ou des développements&nbsp;(comme le support d&rsquo;ElasticSearch dans API Platform)&#8230; Amis employeurs, laissez libre cours à votre créativité.&nbsp;Vos développeurs et les outils que vous utilisez au quotidien ont besoin de votre soutien.&nbsp;



Notre équipe serait&nbsp;ravie&nbsp;d&rsquo;organiser un&nbsp;hackathon similaire&nbsp;à Lille, <a href="https://les-tilleuls.coop/fr/blog/article/retour-sur-la-semaine-sylius-lille" target="_blank" rel="noopener">comme nous avions fait en octobre dernier</a>. N&rsquo;hésitez pas à nous contacter !&nbsp;

Retour sur le Hackathon EU-Fossa Symfony / API Platform

// pages/index.js
import React from 'react';
import withESI from 'react-esi';
import MyFragment from 'components/MyFragment';

const MyFragmentESI = withESI(MyFragment, 'MyFragment');
// Le second paramètre est un ID unique identifiant ce fragment.
// Si vous utilisez différentes instances du même composant, utilisez un ID différent par instance.
const Index = () => (
        &lt;div>
            &lt;h1>React ESI demo app&lt;/h1>
            &lt;MyFragmentESI greeting="Hello!"/>
        &lt;/div>
    )
;

// components/MyFragment.js
import React from 'react';

export default class MyFragment extends React.Component {
    render() {
        return (
            &lt;section>
                &lt;h1>A fragment that can have its own TTL&lt;/h1>
                &lt;div>{this.props.greeting /* accédez aux props comme d’habitude */}&lt;/div>
                &lt;div>{this.props.dataFromAnAPI}&lt;/div>
            &lt;/section>
        );
    }

    static async getInitialProps({props, req, res}) {
        return new Promise(resolve => {
            if (res) {
                // Réglage d’un TTL pour le fragment
                res.set('Cache-Control', 's-maxage=60, max-age=30');
            }      // Simulation d’un délai (appel à un service distant tel qu’une API web)
            setTimeout(
                () =>
                    resolve({
                        ...props, // Ce sont les props venant de index.js, qui ont été transmises via l’URL interne
                        dataFromAnAPI: 'Hello there'
                    }),
                2000
            );
        });
    }
}

// server.js
import express from 'express';
import {path, serveFragment} from 'react-esi/lib/server';

const server = express();
server.use((req, res, next) => {
    // Envoie l’en-tête Surrogate-Control pour annoncer aux proxys le support des ESI (optionnel avec Varnish, suivant votre config)
    res.set('Surrogate-Control', 'content="ESI/1.0"');
    next();
});
server.get(path, (req, res) =>
    // "path" a comme valeur par défaut /_fragment, vous pouvez la changer en réglant la variable d'environnement REACT_ESI_PATH
    serveFragment(
        req,
        res,
        // "fragmentID" est le second paramètre passé au HOC "WithESI", le composant racine utilisé pour ce fragment doit être retourné
        fragmentID => require(`./components/${fragmentID}`).default)
);// ...
// Les autres routes  Express sont ici
server.listen(80);

// server.js
import express from 'express';
import next from 'next';
import {path, serveFragment} from 'react-esi/lib/server';

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({dev})
const handle = app.getRequestHandler()
app.prepare().then(() => {
    const server = express();
    server.use((req, res, next) => {
        // Envoie l’en-tête Surrogate-Control pour annoncer aux proxys le support des ESI (optionnel avec Varnish)
        res.set('Surrogate-Control', 'content="ESI/1.0"');
        next();
    });
    server.get(path, (req, res) =>
        serveFragment(req, res, fragmentID => require(`./components/${fragmentID}`).default)
    );
    server.get('*', handle); // Routes Next.js  
    server.listen(port, err => {
        if (err) throw err;
        console.log(`> Ready on http://localhost:${port}`);
    });
});

Passage d'attributs &agrave; l'&eacute;l&eacute;ment &lt;esi:include&gt;


{
  esi: {
    attrs: {
      alt: "Texte alternatif",
      onerror: "continue"
    }
  }
}

<a href="https://github.com/dunglas/react-esi" target="_blank" rel="noopener">Retrouvez la version originale de cet article ici</a>.



React ESI est une bibliothèque de cache extrêmement puissante pour les applications <a href="https://reactjs.org/">React</a> et <a href="https://nextjs.org/">Next.js</a>, capable de créer des applications dynamiques aussi rapides que des sites statiques.



React ESI offre un moyen simple d&rsquo;améliorer les performances de votre application en stockant des fragments de pages rendues côté serveur dans des serveurs de cache périphériques (edge cache servers) tels que ceux proposés par Fastly ou Akamai (le logiciel Varnish est également supporté). Cela signifie qu&rsquo;après le premier rendu, des fragments de vos pages seront servis en quelques millisecondes par des serveurs proches de vos utilisateurs finaux ! React ESI est un moyen très efficace d&rsquo;améliorer les performances et le référencement de vos sites web, ainsi que pour réduire considérablement vos coûts d&rsquo;hébergement et la consommation d&rsquo;énergie de ces applications.



Vu qu&rsquo;il repose sur <a href="https://www.w3.org/TR/esi-lang">la spécification W3C ESI</a> (Edge Side Includes), React ESI prend en charge de manière native la plupart des fournisseurs de cache cloud comme <a href="https://blog.cloudflare.com/edge-side-includes-with-cloudflare-workers/">Cloudflare Workers</a>, <a href="https://www.akamai.com/fr/fr/support/esi.jsp">Akamai</a> et <a href="https://docs.fastly.com/guides/performance-tuning/using-edge-side-includes">Fastly</a>. Bien entendu, React ESI supporte également le serveur de cache open source <a href="https://varnish-cache.org/intro/index.html#intro">Varnish</a>, que vous pouvez utiliser gratuitement dans votre propre infrastructure (voici un <a href="https://github.com/zeit/next.js/blob/canary/examples/with-react-esi/docker/varnish/default.vcl">exemple de configuration</a>).



React ESI permet de spécifier un TTL (Time To Live) différent par composant React, puis de générer le code HTML lui correspondant de manière asynchrone à l&rsquo;aide d&rsquo;une URL sécurisée (signée). Le serveur de cache récupère ce fragment de HTML depuis l’application Node puis le stocke. Il assemble finalement ensuite la page finale et l&rsquo;envoie au navigateur. React ESI permet également aux composants d’être rendus par le navigateur côté client, sans nécessiter de configuration spécifique.



<figure class="wp-block-image"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/294.png" alt="react esi" title="react esi"/></figure>



Exemple : découvrez comment utiliser React ESI avec <a href="https://github.com/zeit/next.js/blob/canary/examples/with-react-esi/">Next.js et Varnish</a>



<h3>Installation </h3>



Utilisez votre gestionnaire de paquets JS préféré pour installer la bibliothèque.



Avec Yarn :





Ou avec NPM :





<h3>Usage</h3>



React ESI fournit un <a href="https://reactjs.org/docs/higher-order-components.html">Higher Order Component</a> qui :



<ul><li style="text-align: justify;">Remplace le composant encapsulé par une balise ESI côté serveur (ne vous inquiétez pas, React ESI fournit également l&rsquo;outillage nécessaire pour générer le fragment correspondant) ;</li><li style="text-align: justify;">Refait le rendu du composant encapsulé côté client et l’alimente avec les props calculées côté serveur (si nécessaire).</li></ul>



React ESI appelle automatiquement une méthode static async nommée getInitialProps() pour renseigner les props initiales du composant. Côté serveur, cette méthode peut accéder à la requête et à la réponse HTTP pour, par exemple, définir l&rsquo;en-tête Cache-Control ou des <a href="https://api-platform.com/docs/core/performance/#enabling-the-built-in-http-cache-invalidation-system">cache tags</a>.



Ces props renvoyées par getInitialProps() seront également injectées dans le code HTML généré par le serveur (dans une balise &lt;script&gt;). Côté client, le composant réutilisera les props provenant du serveur (la méthode ne sera pas appelée une seconde fois). Si la méthode n&rsquo;a pas été appelée côté serveur, elle sera appelée côté client lors du premier montage du composant.



<h3>Le Higher Order Component</h3>





Les props initiales doivent être sérialisables avec JSON.stringify(). Attention à Map, Set et Symbol !



Nb : pour plus de commodité, getInitialProps() a la même signature que la fonction du même nom fournie par Next.js. Cependant, c&rsquo;est une implémentation totalement indépendante et autonome (vous n&rsquo;avez pas besoin de Next.js pour l&rsquo;utiliser).



<h3>Servir les fragments</h3>



React ESI fournit un contrôleur prêt à l’emploi compatible avec <a href="https://expressjs.com/">Express</a> :





Alternativement,&nbsp;voici un exemple complet utilisant un serveur <a href="https://github.com/zeit/next.js/tree/master/examples/custom-server-express">Next.js</a> :





<h3>Fonctionnalités</h3>



<ul><li style="text-align: justify;">Support de Varnish, Cloudflare Workers, Akamai, Fastly et tous les autres systèmes de cache prenant en charge ESI</li><li style="text-align: justify;">Écrit en Typescript </li><li style="text-align: justify;">API similaire à Next.js</li></ul>



<h3>Variables d’environnement</h3>



React ESI peut être configuré à l&rsquo;aide de variables d&rsquo;environnement :



<ul><li>REACT_ESI_SECRET : une clé secrète utilisée pour signer l&rsquo;URL du fragment (il est vivement recommandé de la définir pour éviter les problèmes lors du redémarrage du serveur ou de l&rsquo;utilisation de multiples serveurs)</li><li style="text-align: justify;">REACT_ESI_PATH : le chemin interne utilisé pour générer le fragment, qui ne doit pas être exposé publiquement (par défaut : /_fragment)</li></ul>



<h3>Passage d&rsquo;attributs à l&rsquo;élément &lt;esi:include&gt;</h3>



Pour transmettre des attributs à l&rsquo;élément &lt;esi:include&gt; généré par React ESI, passez une prop au HOC ayant la structure suivante :





<h3>Dépannage</h3>



<ul><li style="text-align: justify;">Le cache n’est jamais utilisé &nbsp;</li></ul>



Par défaut, la plupart des proxys (y compris Varnish) ne servent jamais de réponse à partir du cache si la demande contient un cookie. Si vous testez avec localhost ou un domaine local similaire, effacez tous les cookies préexistants pour cette origine. Si les cookies sont attendus (par exemple : Google Analytics ou des cookies publicitaires), vous devez configurer correctement votre proxy de cache pour les ignorer. Voici <a href="https://www.varnish-software.com/wiki/content/tutorials/varnish/sample_vclTemplate.html#cookie-manipulation">quelques exemples pour Varnish</a>.&nbsp;



<h3>Aller plus loin</h3>



React ESI fonctionne très bien avec les stratégies de cache avancées, notamment :



<ul><li style="text-align: justify;">l&rsquo;invalidation du cache (purge) avec les tags de cache (<a href="https://github.com/varnish/varnish-modules/blob/master/docs/vmod_xkey.rst">Varnish</a> / <a href="https://blog.cloudflare.com/introducing-a-powerful-way-to-purge-cache-on-cloudflare-purge-by-cache-tag/">Cloudflare</a>)</li><li style="text-align: justify;">le préchauffage du cache lorsque les données changent dans la couche de persistance (<a href="https://blog.theodo.fr/2015/11/auto-warm-up-varnish4-cache/">Varnish</a>)</li></ul>



Essayez-les !



<h3>Vue.JS/Nuxt</h3>



Nous aimons tout autant Vue et Nuxt que React et Next. Nous portons donc actuellement React ESI vers cette plate-forme. <a href="https://les-tilleuls.coop/fr/contact" target="_blank" rel="noopener">Contactez-nous</a> si vous voulez aider !



<h3>Passez le mot !</h3>



Vous aimez React ESI&nbsp;? Rejoignez les 200 personnes lui ayant déjà mis une&nbsp;<a href="https://github.com/dunglas/react-esi" target="_blank" rel="noopener">étoile sur Github</a> et n’hésitez pas à&nbsp;contribuer ! Notre coopérative sera également ravie de vous accompagner dans la mise en place de React ESI dans votre projet&nbsp;🙂

Rendez vos applications React et Next.js plus rapides que la lumière grâce à React ESI

OpenAPI v3 et ReDoc

Prise en charge am&eacute;lior&eacute;e du DTO

&lt;?php

namespace AppEntity;

use ApiPlatformCoreAnnotationApiResource;
use AppDtoBookInput;
use AppDtoBookOutput;

/**
 * @ApiResource(
 *   inputClass=BookInput::class,
 *   outputClass=BookOutput::class
 * )
 */
final class Book
{
    // ...
}

Cache HTTP headers

&lt;?php

use ApiPlatformCoreAnnotationApiResource;

/**
 * @ApiResource(cacheHeaders={"max_age"=60, "shared_max_age"=120})
 */
class Book
{
    // ...
}

Support de MongoDB

Sunset HTTP header

&lt;?php

namespace AppEntity;
/**
 * @ApiResource(itemOperations={
 *     "get"={
 *         "deprecation_reason"="Retrieve a Book instead",
 *         "sunset"="01/01/2020"
 *     }
 * })
 */
class Parchment
{
    // ...
}

G&eacute;n&eacute;rateur de client am&eacute;lior&eacute;

Aidez-nous &agrave; promouvoir API Platform !

&lt;?php

namespace AppDocument;

use ApiPlatformCoreAnnotationApiResource;
use DoctrineODMMongoDBMappingAnnotations as ODM;

/**
 * @ApiResource
 * @ODMDocument
 */
class Book
{
    /**
     * @ODMId(strategy="INCREMENT", type="integer")
     */
    public $id;

    /**
     * @ODMField(type="string")
     */
    public $title;
}

Support de Elasticsearch

&lt;?php

namespace AppModel;
 
use ApiPlatformCoreAnnotationApiProperty;
use ApiPlatformCoreAnnotationApiFilter;
use ApiPlatformCoreAnnotationApiResource;
use ApiPlatformCoreBridgeElasticsearchDataProviderFilterMatchFilter;
 
/**
 * @ApiResource
 */
class Tweet
{
    /**
     * @ApiProperty(identifier=true)
     *
     * @var string
     */
    public $id;
 
    /**
     * @var User
     */
    public $author;
 
    /**
     * @var DateTimeInterface
     */
    public $date;
 
    /**
     * @ApiFilter(MatchFilter::class)
     *
     * @var string
     */
    public $message;
}

Mise &agrave; jour en temps r&eacute;el du client avec Mercure

&lt;?php

namespace AppEntity;

use ApiPlatformCoreAnnotationApiResource;

/**
 * @ApiResource(mercure=true)
 */
class Book
{
    // ...
}

CQRS et traitement des messages asynchrones avec Symfony Messenger

&lt;?php

namespace AppEntity;

use ApiPlatformCoreAnnotationApiResource;
use SymfonyComponentValidatorConstraints as Assert;

/**
 * @ApiResource(
 *     messenger=true,
 *     collectionOperations={
 *         "post"={"status"=202}
 *     },
 *     itemOperations={},
 *     outputClass=false
 * )
 */
class ResetPasswordRequest
{
    /**
     * @var string
     *
     * @AssertNotBlank
     */
    public $username;
}

&lt;?php

namespace AppHandler;

use AppEntityResetPasswordRequest;
use SymfonyComponentMessengerHandlerMessageHandlerInterface;

class ResetPasswordRequestHandler implements MessageHandlerInterface
{
    public function __invoke(ResetPasswordRequest $forgotPassword)
    {
        // do something with the resource
    }
}

Serveur Push

&lt;?php

namespace AppEntity;

use ApiPlatformCoreAnnotationApiProperty;
use ApiPlatformCoreAnnotationApiResource;

/**
 * @ApiResource
 */
class Book
{
    /**
     * @ApiProperty(push=true)
     *
     * @var Author
     */
    public $author;
}

D&eacute;tection de filtres dans API Platform Admin

import React from 'react';
import {HydraAdmin} from '@api-platform/admin';

export default () => &lt;HydraAdmin entrypoint="https://api.example.com"/>;

API Platform 2.4 beta : MongoDB, Elasticsearch, Mercure, Symfony Messenger et bien plus !

Hello tout le monde ! Je suis <a href="https://twitter.com/Pandora_angora" target="_blank" rel="noopener">Caroline</a>, développeuse back-end fraîchement arrivée chez Les-Tilleuls.coop ! Aujourd&rsquo;hui, c&rsquo;était ma première assemblée générale (AG) et la première de l&rsquo;année 2019. Voici mon retour sur cette journée un peu particulière.



<h3>Que faisons-nous lors d&rsquo;une AG ?</h3>



Les-Tilleuls.coop étant une SCOP (<a href="https://les-tilleuls.coop/fr/blog/article/5-idees-recues-sur-notre-cooperative" target="_blank" rel="noopener">rendez-vous ici pour en savoir plus</a>), nous prenons les décisions ensemble&nbsp;de manière démocratique.&nbsp;Chaque salarié&nbsp;peut faire des propositions ou&nbsp;donner son avis sur différents domaines. Une fois par mois, tous les coopérateurs se réunissent au bureau de Lille pour prendre des décisions diverses liées&nbsp;aux&nbsp;nouveautés juridiques, le budget ou le recrutement. Chaque coopérateur possède&nbsp;un vote représentant&nbsp;une voix, c&rsquo;est pas la dictature ici.



Le bureau est plus animé que d&rsquo;habitude.&nbsp;On passe d&rsquo;une douzaine de personnes à une trentaine en quelques minutes. On prend un petit-déjeuner ensemble, on discute puis on se fait un Tetris avec les fauteuils afin que tout le monde&nbsp;puisse rentrer dans la salle de réunion (<a href="https://twitter.com/coopTilleuls/status/1009052552145620992" target="_blank" rel="noopener">vivement nos nouveaux locaux</a>&nbsp;!).



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







Tetris avec les fauteuils.



&nbsp;



L&rsquo;ordre du jour est établi quelques jours auparavant et envoyé à chaque coopérateur qui&nbsp;peut y contribuer directement. Si on a une proposition d&rsquo;outil, une idée, on ne doit pas hésiter à l&rsquo;ajouter et à la présenter à tous lors de l&rsquo;AG. On discute ainsi des différents points, donne son avis et puis on vote à main levée (pour, contre, abstention). &nbsp;



Olivier&nbsp;(notre directeur financier) débute cette première AG de l&rsquo;année par le bilan du chiffre d&rsquo;affaires de l&rsquo;année 2018. Ce fut l&rsquo;occasion de parler de la relation client, les points forts et faibles, d&rsquo;avoir des conseils sur les procédés à améliorer.



Un aspect important dans la vie de notre coopérative&nbsp;concerne le recrutement. Nous discutons des profils des candidats par mail ou sur Slack, nous votons leur embauche ensemble lors de l&rsquo;AG. Pendant une AG,&nbsp;nous pouvons aussi suggérer un candidat puis votons pour décider si nous creusons la piste ou non, et quelle offre nous pouvons lui proposer. Nous faisons aussi le point sur les recrutements en cours et la stratégie marketing à adopter pour les recrutements futurs (<a href="http://les-tilleuls.coop/fr/jobs" target="_blank" rel="noopener">nous recrutons</a>, viendez ! &lt;3 ).



On présente ensuite les différents prospects, les&nbsp;demandes actuelles du client, quels sont ses besoins et on planifie quel coopérateur sera disponible et le plus adapté pour chaque&nbsp;mission. On vote ensuite toutes les autres propositions concernant la vie de la scop, comme le budget pour un événement ou la mise en place d&rsquo;une nouvelle réforme.



Il est 12h30, nous&nbsp;terminons&nbsp;l&rsquo;AG sur la présentation des différents ateliers prévus l&rsquo;après-midi. Nous en profitons pour&nbsp;travailler ensemble sur des projets internes, sur des contributions&nbsp;Open Source ou à&nbsp;nous&nbsp;entraîner pour des&nbsp;conférences.&nbsp;



En fin de journée, un compte rendu de l&rsquo;AG est envoyé à tous et nous fixons&nbsp;une date pour la prochaine AG mensuelle. On célèbre la fin de l&rsquo;AG avec un bon repas dans une brasserie sympa. Un moment convivial à partager&nbsp;avec les coopérateurs des différents bureaux 🙂



<figure class="wp-block-image"><img src="https://les-tilleuls-wordpress.preprod-tilleuls.ovh/wp-content/uploads/2021/08/287.jpg" alt="TEAM 3B" title="TEAM 3B"/></figure>







Nous mangeons de manière très équilibrée pour survivre au froid.



<h3>Les ateliers</h3>



Plusieurs groupes se sont formés l&rsquo;après-midi&nbsp;pour travailler sur les différents projets internes, des projets Open Source, des préparations de formation ou de meetup à venir. Cet après-midi j&rsquo;ai suivi une formation en visio-conférence sur <a href="https://blackfire.io/" target="_blank" rel="noopener">Blackfire</a> dispensée par&nbsp;Christophe Dujarric.



<blockquote class="twitter-tweet" data-lang="fr">Cet après-midi, c’est formation <a href="https://twitter.com/blackfireio?ref_src=twsrc%5Etfw">@blackfireio</a> avec <a href="https://twitter.com/Chris_Dujarric?ref_src=twsrc%5Etfw">@Chris_Dujarric</a> en attendant le meetup <a href="https://twitter.com/afup_hdf?ref_src=twsrc%5Etfw">@afup_hdf</a> de demain <a href="https://twitter.com/hashtag/Masterclass?src=hash&amp;ref_src=twsrc%5Etfw">#Masterclass</a> <a href="https://t.co/N32J6bTQHp">pic.twitter.com/N32J6bTQHp</a>— Les-Tilleuls.coop (@coopTilleuls) <a href="https://twitter.com/coopTilleuls/status/1087362605465985027?ref_src=twsrc%5Etfw">21 janvier 2019</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>



J&rsquo;ai ensuite terminé ma journée sur l&rsquo;atelier rédaction pour le blog. Encore une journée bien remplie au sein de la coopérative. A bientôt !

Une journée chez Les-Tilleuls.coop

Impl&eacute;mentation de r&eacute;f&eacute;rence du hub


// The subscriber subscribes to updates for the https://example.com/foo topic
// and to any topic matching https://example.com/books/{name}
const url = new URL('https://hub.example.com/subscribe');
url.searchParams.append('topic', 'https://example.com/books/{id}');
url.searchParams.append('topic', 'https://example.com/users/dunglas');
const eventSource = new EventSource(url);// The callback will be called every time an update is published
eventSource.onmessage = e => console.log(e); // do something with the payload


fetch('https://example.com/books/1') // Has this header `Link: ; rel="mercure"`
    .then(response => {
        // Extract the hub URL from the Link header
        const hubUrl = response.headers.get('Link').match(/&lt;(.*)>.*rel="mercure".*/)[1];
        // Subscribe to updates using the first snippet, do something with response's body...
    });

// Handle a POST, PUT, PATCH or DELETE request or finish an async job...
// and notify the hub
const https = require('https');
const querystring = require('querystring');
const postData = querystring.stringify({
    'topic': 'https://example.com/books/1',
    'data': JSON.stringify({foo: 'updated value'}),
});
const req = https.request({
    hostname: 'hub.example.com',
    port: '443',
    path: '/publish',
    method: 'POST',
    headers: {
        Authorization: 'Bearer ', // the JWT key must be shared between the hub and the server
        'Content-Type': 'application/x-www-form-urlencoded',
        'Content-Length': Buffer.byteLength(postData),
    }
}, /* optional response handler */);
req.write(postData);
req.end();// You'll probably prefer use the request library or the node-fetch polyfill in real projects,
// but any HTTP client, written in any language, will be just fine

Emplois asynchrones

Montage collaboratif

Binaire pr&eacute;-compil&eacute;

Image Docker&nbsp;


docker run 
    -e PUBLISHER_JWT_KEY=myPublisherKey -e SUBSCRIBER_JWT_KEY=mySubcriberKey -e DEMO=1 -e ALLOW_ANONYMOUS=1 
    -p 80:80 
    dunglas/mercure


docker run 
    -e JWT_KEY=myKey -e ACME_HOSTS=example.com 
    -p 80:80 -p 443:443 
    dunglas/mercure

<a href="https://github.com/dunglas/mercure" target="_blank" rel="noopener">Retrouvez la version EN de cet article ici</a>.



Mercure est un protocole permettant de transmettre en temps réel des mises à jour de données vers les navigateurs web (ou autres clients HTTP) de manière fiable, rapide et économe en énergie. Mercure est particulièrement utile pour publier des mises à jour en temps réel des ressources exposées via des API Web (ex : pour être consommées par des applications web et mobiles réactives). Le protocole a été publié en tant qu’<a href="https://datatracker.ietf.org/doc/draft-dunglas-mercure/" target="_blank" rel="noopener">Internet Draft</a>, et est maintenu <a href="https://github.com/dunglas/mercure/blob/master/spec/mercure.md" target="_blank" rel="noopener">dans ce dépôt GitHub</a>.



Une implémentation de référence du hub Mercure (le serveur) est également disponible <a href="https://github.com/dunglas/mercure" target="_blank" rel="noopener">sur ce dépôt</a>. Cette implémentation écrite en <a href="https://golang.org/" target="_blank" rel="noopener">Go</a> est publiée sous licence libre (AGPL). Une bibliothèque Go (qui peut être utilisée dans n&rsquo;importe quelle application écrite en ce langage, qui n’a alors plus besoin de Hub) ainsi qu’une <a href="https://docs.docker.com/engine/reference/commandline/images/" target="_blank" rel="noopener">image officielle Docker</a> sont également fournies.



<a href="https://demo.mercure.rocks/" target="_blank" rel="noopener">Jetez un oeil à la démo !</a>



En&nbsp;complément à la version Open Source, une version haute disponibilité (hébergée ou on premise) de Mercure est <a href="mailto:dunglas+mercure@gmail.com?subject=I%27m%20interested%20in%20Mercure%27s%20private%20beta">disponible en bêta privée</a>.



<h2>Mercure en quelques mots&nbsp;</h2>



<ul><li style="text-align: justify;">Support natif de navigateurs, pas de bibliothèque ni de SDK requis (basé&nbsp;sur <a href="https://www.smashingmagazine.com/2018/02/sse-websockets-data-flow-http2/" target="_blank" rel="noopener">les “Server-Sent Events</a>”).</li><li style="text-align: justify;">Compatible avec tous les serveurs existants, même ceux qui ne supportent pas les connexions persistantes (architecture serverless, PHP, FastCGI…).</li><li style="text-align: justify;">Support natif de la reconnexion et de la récupération des événements perdus.</li><li>Mécanisme d&rsquo;autorisation basé sur <a href="https://jwt.io/" target="_blank" rel="noopener">JWT</a> (envoi sécurisé d&rsquo;une mise à jour à certains “abonnés” sélectionnés).</li><li>Exploite le <a href="https://developers.google.com/web/fundamentals/performance/http2/#request_and_response_multiplexing" target="_blank" rel="noopener">multiplexage HTTP/2</a>.</li><li>Conçu&nbsp;<a href="https://en.wikipedia.org/wiki/HATEOAS" target="_blank" rel="noopener">pour les API hypermédia</a>, supporte également <a href="https://graphql.org/" target="_blank" rel="noopener">GraphQL</a>.</li><li>Auto-découvrable grâce au <a href="https://tools.ietf.org/html/rfc5988" target="_blank" rel="noopener">web linking</a>.</li><li>Supporte le chiffrement.</li><li>Fonctionne même avec les vieux navigateurs en utilisant un polyfill (IE7+).</li><li>Support du <a href="https://html.spec.whatwg.org/multipage/server-sent-events.html#eventsource-push" target="_blank" rel="noopener">push sans connexion</a> dans des environnements contrôlés (délégation aux protocoles spécifiques des opérateurs mobiles).&nbsp;</li></ul>



<h2>Implémentation de référence du hub</h2>



<ul><li style="text-align: justify;">Rapide, écrit en <a href="https://golang.org/" target="_blank" rel="noopener">Go</a></li><li style="text-align: justify;">Fonctionne partout : binaires statiques et images Docker disponibles</li><li style="text-align: justify;">Support automatique des protocoles HTTP/2 et HTTPS (via Let&rsquo;s Encrypt)</li><li style="text-align: justify;">Cloud Natif, suit la méthodologie <a href="https://12factor.net/" target="_blank" rel="noopener">Twelve-Factor App</a></li><li style="text-align: justify;">Open source (Affero General Public License)&nbsp;</li></ul>



<h2>Exemples</h2>



Exemple d’un client (subscriber), en JavaScript : &nbsp;





L&rsquo;URL du hub peut être découverte (optionnel) :





Pour publier une mise à jour, un serveur d&rsquo;application ou un navigateur web (publisher) a juste à envoyer une requête HTTP POST vers le hub. Voici un exemple utilisant Node.js / <a href="https://serverless.com/">Serverless</a> :





Des exemples dans d’autres langages sont disponibles dans <a href="https://github.com/dunglas/mercure/tree/master/examples" target="_blank" rel="noopener">le répertoire examples</a> du dépôt.



<h2>Cas d’usages</h2>



<h3>Disponibilité en direct</h3>



<ul><li style="text-align: justify;">Une Progressive Web App récupère l&rsquo;état de disponibilité d&rsquo;un produit à partir d&rsquo;une API REST et l&rsquo;affiche : un seul est toujours disponible.</li><li style="text-align: justify;">3 minutes plus tard, le dernier produit est acheté par un autre client.</li><li style="text-align: justify;">La PWA montre instantanément que le produit n’est plus disponible</li></ul>



<h3>Emplois asynchrones </h3>



<ul><li style="text-align: justify;">Une PWA dit au serveur de calculer un rapport. Cette tâche est coûteuse et mettra du temps à se terminer.</li><li style="text-align: justify;">Le serveur délègue le calcul du rapport à un opérateur asynchrone (à l’aide des message queues) et ferme la connexion avec la PWA.</li><li style="text-align: justify;">Le worker envoie le rapport à la PWA lorsque le rapport est calculé</li></ul>



<h3>Montage collaboratif</h3>



<ul><li style="text-align: justify;">Une webapp permet à plusieurs utilisateurs de modifier le même document simultanément.</li><li style="text-align: justify;">Les modifications apportées sont immédiatement diffusées à tous les utilisateurs connectés.&nbsp;</li></ul>



Mercure couvre tout ça !



<h2>Spécification du protocole</h2>



La spécification complète du protocole se trouve dans <a href="https://github.com/dunglas/mercure/blob/master/spec/mercure.md" target="_blank" rel="noopener">spec/mercure.md</a>. Elle est également disponible en tant <a href="https://www.ietf.org/id-info/" target="_blank" rel="noopener">qu’Internet Draft</a> et est conçue pour être publiée en tant que RFC. 



<h2>Implémentation du hub</h2>



<h3>Usage</h3>



<h3>Binaire pré-compilé </h3>



Téléchargez un binaire <a href="https://github.com/dunglas/mercure/releases" target="_blank" rel="noopener">à partir de notre page GitHub</a> exécutez ceci :



<pre class="wp-block-preformatted">JWT_KEY=myJWTKey ADDR=:3000 DEMO=1 ALLOW_ANONYMOUS=1 PUBLISH_ALLOWED_ORIGINS=http://localhost:3000 ./mercure</pre>



Le serveur&nbsp;est désormais disponible sur <a href="http://localhost:3000">http://localhost:3000</a> avec le mode démo activé. ALLOW_ANONYMOUS étant défini sur 1, les abonnés anonymes sont autorisés.&nbsp;Pour l’exécuter en mode production, et générer automatiquement un certificat Let&rsquo;s Encrypt, lancez la commande suivante en root :



<pre class="wp-block-preformatted">PUBLISHER_JWT_KEY=myPublisherKey SUBSCRIBER_JWT_KEY=mySubcriberKey ACME_HOSTS=example.com ./mercure</pre>



La valeur&nbsp;de la variable d&rsquo;environnement ACME_HOSTS doit être mise à jour pour correspondre à votre/vos nom(s) de domaine. Un certificat Let&rsquo;s Encrypt sera généré automatiquement. Si vous omettez cette variable, le serveur sera exposé sur une connexion HTTP (non sécurisée).



Lorsque le serveur est opérationnel, les endpoints suivants sont disponibles :



<ul><li style="text-align: justify;">POST https://example.com/hub: pour publier des mises à jour.</li><li>GET https://example.com/hub: pour s’abonner à des mises à jour.</li></ul>



Consultez <a href="https://github.com/dunglas/mercure/blob/master/spec/mercure.md" target="_blank" rel="noopener">le protocole</a> pour connaître tous les détails. Pour compiler la version de développement et activer la page de démonstration, consultez le fichier <a href="https://github.com/dunglas/mercure/blob/master/CONTRIBUTING.md#hub" target="_blank" rel="noopener">CONTRIBUTING.md</a>. 



<h3>Image Docker&nbsp;</h3>



Une image Docker est disponible sur le Docker Hub. La commande suivante est tout ce qu’il vous faudra pour obtenir un serveur fonctionnel, mode démo activé :





Le serveur, en mode démo, est disponible à : <a href="http://localhost:80">http://localhost</a>. Les “abonnés” anonymes sont autorisés.



En production, exécutez ceci :





Assurez-vous de mettre à jour la valeur de ACME_HOSTS pour qu’elle corresponde à votre/vos nom(s) de domaine.



<h3>Variables d&rsquo;environnement</h3>



<ul><li>ACME_CERT_DIR : le répertoire où stocker les certificats Let&rsquo;s Encrypt</li><li>ACME_HOSTS : une liste d&rsquo;hôtes séparés par des virgules pour lesquels les certificats Let&rsquo;s Encrypt doivent être générés</li><li>ADDR : l’adresse à utiliser (exemple : 127.0.0.1:3000, valeur par défaut :80&nbsp;ou&nbsp;:http ou :https en fonction de si HTTPS est activé ou non)</li><li>ALLOW_ANONYMOUS : mis à 1 pour permettre aux abonnés sans JWT de se connecter</li><li>DB_PATH&nbsp;: le chemin vers la base de données <a href="https://github.com/etcd-io/bbolt" target="_blank" rel="noopener">bbolt</a> (par défaut : updates.db, dans le répertoire courant)</li><li>CERT_FILE : un fichier de certificat (pour utiliser un certificat personnalisé)</li><li>CERT_KEY : une clé de certificat (pour utiliser un certificat personnalisé)</li><li>CORS_ALLOWED_ORIGINS : une liste d’hôtes CORS autorisés, séparés par des virgules</li><li>PUBLISH_ALLOWED_ORIGINS : une liste d’hôtes autorisés à publier des mises à jours (nécessaire uniquement en mode autorisation par cookie, afin de prévenir les attaques de type CSRF)</li><li>DEBUG : définir à 1 pour activer le mode débogage</li><li>DEMO : définir à 1 pour activer le mode démo (activé automatiquement lorsque DEBUG=1)</li><li>LOG_FORMAT : le format des logs à utiliser : JSON, FLUENTD ou TEXT (par défaut)</li><li>PUBLISHER_JWT_KEY : doit contenir la clef secrète pour valider le JWT des publishers</li><li>SUBSCRIBER_JWT_KEY : doit contenir la clef secrète pour valider le JWT des subscribers</li><li>JWT_KEY : raccourci pour régler les variables SUBSCRIBER_JWT_KEY et PUBLISHER_JWT_KEY à la même valeur</li></ul>



Si ACME_HOSTS ou CERT_FILE et CERT_KEY sont fournis, un serveur HTTPS supportant une connexion HTTP/2 sera démarrée. Si ce n’est pas le cas, un serveur HTTP sera démarré (non sécurisé).&nbsp;



<h2>FAQ</h2>



Comment utiliser Mercure avec GraphQL ?



Parce qu’ils sont conçus pour être indépendants du transport utilisé, Mercure est parfaitement adapté aux <a href="https://facebook.github.io/graphql/draft/#sec-Subscription" target="_blank" rel="noopener">abonnements GraphQL</a> (subscriptions). En réponse à la requête d&rsquo;abonnement, le serveur GraphQL peut renvoyer l’URL du sujet Mercure (topic) correspondante. Le client peut ensuite s&rsquo;abonner au flux d&rsquo;événements Mercure correspondant à cet abonnement en créant un nouveau EventSource en lui passant en paramètre une URL comme celle-ci : https://example.com/hub?topic=https://example.com/subscriptions/&lt;subscription-id&gt;



Les mises à jour relatives à cet abonnement peuvent ensuite être envoyées du serveur GraphQL aux clients, via le hub Mercure (dans la propriété data de l&rsquo;événement envoyé par le serveur).



Pour se désabonner, le client a&nbsp;juste à appeler EventSource.close()



Mercure peut être facilement intégré au framework Apollo GraphQL en créant <a href="https://github.com/apollographql/graphql-subscriptions" target="_blank" rel="noopener">un transport dédié</a>. 



Quelle est la différence entre Mercure et Websocket ? &nbsp;



<a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">Websocket</a> est un protocole de bas niveau, tandis que Mercure est un protocole de haut niveau. Mercure fournit des fonctionnalités intégrées très pratiques telles que l’autorisation, la reconnexion automatique ou la réconciliation des états, tandis qu&rsquo;avec WebSocket, vous devez les implémenter vous-même.&nbsp;Contrairement à Mercure (qui est construit sur des server-Sent Events), <a href="https://www.infoq.com/articles/websocket-and-http2-coexist" target="_blank" rel="noopener">Websocket n’est pas conçu pour tirer parti de HTTP/2</a>. 



Les connexions HTTP/2 étant multiplexées et bidirectionnelles par défaut (ce qui n&rsquo;était pas le cas de HTTP/1), lorsque vous utilisez Mercure via une connexion h2 (recommandé), votre application peut à la fois recevoir des données (via des Server-Sent Events) et envoyer des données au serveur (avec des requêtes POST) en ré-utilisant la même connexion, donc sans surcoût.



Dans la plupart des cas, Mercure peut être considéré comme solution de remplacement de WebSocket, moderne et plus simple à utiliser.



Quelle est la différence entre Mercure et WebSub ?



<a href="https://www.w3.org/TR/websub/" target="_blank" rel="noopener">WebSub</a> est un protocole serveur à serveur tandis que Mercure est un protocole qui supporte également les connexions serveur à client et client à client. Mercure a été fortement inspiré par WebSub, et nous avons tenté de le rendre aussi proche que possible de ce protocole.



Mercure utilise les server-sent-clients pour distribuer les mises à jour, tandis que WebSub utilise les requêtes POST. De plus, Mercure dispose d&rsquo;un mécanisme d&rsquo;autorisation avancé et permet de souscrire à plusieurs sujets avec une seule connexion utilisant des URL templates.



Quelle est la différence entre Mercure et Web Push ?



<a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">L&rsquo;API Push</a> est <a href="https://developers.google.com/web/fundamentals/push-notifications/">principalement conçue</a> pour envoyer des <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">notifications</a> aux appareils mobiles non connectés à l&rsquo;application. Dans la plupart des implémentations de WebPush, la taille des messages est très limitée. De plus, les messages sont envoyés via les API et les serveurs propriétaires des sociétés créant les navigateurs et les systèmes d&rsquo;exploitation mobiles.



Mercure, quant à lui, est conçu pour envoyer des mises à jour en direct aux périphériques actuellement connectés via un site web ou une app mobile. La taille des messages n’est pas limitée, et le message est directement transmis de vos serveurs vers les clients.&nbsp;En bref, utilisez l&rsquo;API Push pour envoyer des notifications aux utilisateurs hors connexion (qui seront affichées dans les centres de notification de Chrome, d’Android ou iOS) et utilisez Mercure pour recevoir des mises à jour en direct à l’application lorsque l&rsquo;utilisateur l’utilise.



Vous aimez Mercure ? Testez-le, <a href="https://github.com/dunglas/mercure/stargazers">donnez lui une étoile sur GitHub</a>, et n’hésitez pas à y contribuer ! De notre côté, nous avons proposé un&nbsp;client expérimental pour PHP <a href="https://github.com/symfony/symfony/pull/28877" target="_blank" rel="noopener">au projet Symfony</a>. Restez connectés pour en savoir plus !