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

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

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

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

<pre>
 <code class="language-bash">
symfony composer require symfony/webpack-encore-bundle
</code>
 </pre>

J'installe ensuite les dépendances de Tailwind :

<pre>
<code class="language-bash">yarn add --dev @symfony/webpack-encore tailwindcss postcss-loader autoprefixer </code></pre>

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

<pre>
 <code class="language-css">
@tailwind base;
@tailwind components;
@tailwind utilities;
</code>
 </pre>

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

<pre>
<code class="language-javascript">
module.exports = {
 theme: {
 extend: {}
 },
 variants: {},
 plugins: [],
 prefix: '',
}
</code></pre>

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

<pre>
 <code class="language-javascript">
const tailwindcss = require('tailwindcss');

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

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

Le CSS&nbsp;:

<pre>
 <code class="language-javascript">
 .addStyleEntry('tailwind', './assets/styles/tailwind.css')
</code>
 </pre>

Suivi de l’activation de `postcss` :

<pre>
 <code class="language-javascript">
.enablePostCssLoader((options) =&gt; {
 options.config = {
 path: './postcss.config.js'
 };
 })
</code>
 </pre>

<pre>
 <code class="language-bash">
yarn encore dev
 </code>
 </pre>

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

<pre>
 <code class="language-bash">
yarn add postcss-import
yarn encore dev
</code>
 </pre>

BOOM Error, le naïf...

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

<pre>
 <code class="language-bash">
yarn remove tailwindcss postcss-import postcss-loader autoprefixer
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
yarn add postcss-loader@^3.0.0 postcss-import@^12.0</code> 
</pre>

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

<pre>
 <code class="language-bash">
yarn remove tailwindcss @tailwindcss/postcss7-compat
yarn add tailwindcss@latest postcss@latest autoprefixer@latest
</code>
 </pre>

<pre>
 <code class="language-bash">
yarn encore dev
</code>
 </pre>

Joie ! Naïf Niveau 2 !

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

<img alt="Le résultat" id="image" src="https://api.les-tilleuls.coop/upload/396" style="width: 100%; display: block; margin-left: 50%; transform: translateX(-50%);" title="Le résultat" />

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

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

Ou encore :&nbsp;

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

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

<pre>
 <code class="language-css">
.menu__link {
 @apply block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100;
}
</code>
 </pre>

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

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

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

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

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

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

Merci de m'avoir lu, et à bientôt !

Tailwind

Quand un développeur PHP teste TailwindCSS v2

Nous clôturons notre série de workshops de 2020 avec deux jours consacrés à <a href="https://vuejs.org/" target="_blank">Vue.js</a> en compagnie de <a href="https://twitter.com/marion_age" target="_blank">Marion Agé</a>, directrice technique chez Les-Tilleuls.coop. Nous vous donnons rendez-vous les 8 et 9 décembre en ligne afin de découvrir cet outil qui s'est fait une place de choix dans le monde bien peuplé des frameworks JavaScript.

<a href="https://www.eventbrite.fr/e/billets-introduction-a-vuejs-avec-marion-age-127332652391" target="_blank"><img alt="workshop vuejs" id="image" src="https://api.les-tilleuls.coop/upload/393" style="width: 100%;" title="workshop vuejs" /></a>

Grâce à son accessibilité&nbsp;et sa courbe d'apprentissage rapide, Vue.js&nbsp;permet&nbsp;l'intégration de composants dynamiques et le développement d'applications riches en fonctionnalités. Lors de&nbsp;cet atelier de 2 jours, vous&nbsp;découvrirez&nbsp;en profondeur&nbsp;l'écosystème de ce framework, des bases jusqu'à son utilisation dans un environnement avancé et optimisé. Bonus à la carte : la version 3 de Vue.js a récemment fait l'objet d'une complète réécriture et même si l'écosystème n'est pas encore complètement prêt, Marion vous proposera d'y jeter un œil, et de découvrir la migration et les nouveautés de cette version.

Ce workshop, d'une durée de 2 jours se déroule&nbsp;lieu en ligne, l'accès à la session vous sera communiqué lors de la convocation à l'événement (envoyée 48h avant le jour J). De plus, cet événement est éligible aux financement par les OPCO et FNE :&nbsp;<a href="https://masterclass.les-tilleuls.coop/contact" target="_blank">contactez-nous</a>&nbsp;si vous avez besoin d'aide dans la constitution de votre dossier, un membre de notre pôle formation vous aidera&nbsp;!

Vous souhaitez des&nbsp;informations additionnelles au sujet du programme ou vous souhaitez discuter <a href="https://masterclass.les-tilleuls.coop/" target="_blank">d'une&nbsp;formation</a> sur-mesure&nbsp;?&nbsp;<a href="https://les-tilleuls.coop/fr/contact" target="_blank">Contactez-nous</a>&nbsp;!&nbsp;

<aside>&nbsp;</aside>

workshop

JavaScript

vuejs

Dernier workshop de 2020 : introduction à Vue.js avec Marion Agé

Il&nbsp;y a quelques jours, nous participions à l’édition en ligne du Forum PHP 2020. Cette dix-neuvième édition, circonstances sanitaires obligent, était diffusée en direct depuis Livestorm, la plateforme de streaming déjà utilisée par l’AFUP lors de l’AFUP Day 2020. Durant ces deux jours axés sur PHP et son écosystème, et à la veille de la version 8 du langage, le temps était à la réflexion sur notre place en tant que développeur·se au cœur des produits que nous développons.&nbsp;

<center>
<blockquote class="twitter-tweet">
Photo de groupe en remote pour la cloture du <a href="https://twitter.com/hashtag/forumPHP?src=hash&amp;ref_src=twsrc%5Etfw">#forumPHP</a> <a href="https://twitter.com/afup?ref_src=twsrc%5Etfw">@afup</a>. Ca se bouscule! <a href="https://t.co/svQ0faqNDF">pic.twitter.com/svQ0faqNDF</a>
— Damien Seguy (@faguo) <a href="https://twitter.com/faguo/status/1319671764885131264?ref_src=twsrc%5Etfw">October 23, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>

<h3 dir="ltr">Pleins feux sur la 8ème version de PHP et bilan de ses 25 années d’existence&nbsp;&nbsp;&nbsp;</h3>

<a href="https://twitter.com/carusogabriel" target="_blank">Gabriel Caruso</a> a présenté les nouveautés de PHP 8. Parmi les plus attendues, nous retrouvons bien sûr les attributs - un équivalent aux annotations de Java, dont l’un des objectifs est de redonner aux annotations de la PhpDoc leur rôle originel : documenter le code. Autres nouveautés du langage, le support natif des types d’unions 2.0, qui permettent de définir plusieurs types à une même variable, le bloc match, une alternative plus rapide à écrire et plus stricte en termes de typage au bloc switch, ou encore la possibilité de fournir les valeurs aux arguments d’une fonction en les nommant, comme en Python. Concernant la compilation Just In Time (JIT), il ne faudra pas s’attendre à des améliorations de performances aussi importantes que pour PHP 7.0. Gabriel a pour autant rappelé que c’est dans le cadre de processus lourds que le compilateur JIT tire réellement son épingle du jeu, les cas d’usage simples comme une API profitant généralement déjà de bonnes performances.

Qui dit nouvelle version majeure, dit rupture de rétrocompatibilité. Parmi celles qui pourront vous donner des cheveux blancs, on notera :

<ul dir="ltr">
	<li role="presentation">La signature des méthodes magiques est maintenant vérifiée et une erreur surviendra si elle est incorrecte. Fini, les méthodes __toString(): bool !</li>
	<li role="presentation">L'API de réflexion largement améliorée, elle fournit maintenant plus d’informations sur les fonctions ;</li>
	<li role="presentation">La correction d’une absurdité sur l’opérateur d’égalité : désormais, 0 == ‘foo’ et 42 == ‘42foo’ ne retourneront plus true mais false.</li>
</ul>

Pour finir, Gabriel a tenu à rassurer concernant le statut de PHP pour Windows : pour rappel, <a href="https://www.techrepublic.com/article/microsoft-to-discontinue-windows-builds-of-php-programming-language/" target="_blank">Microsoft a récemment annoncé qu'ils mettaient fin à leur support de PHP sur leur système d'exploitation</a>, ce qui n’a pas manqué d’inquiéter la communauté sur l’avenir du langage sur cette plateforme. Microsoft a en réalité décidé de ne plus compiler le binaire de PHP lui-même mais continue cependant de contribuer activement à PHP. La core team du langage a par ailleurs d'ores et déjà trouvé une solution pour continuer de distribuer PHP sur le système au menu Démarrer.

<a href="https://twitter.com/zeevs" target="_blank">Zeev Suraski</a>, contributeur à PHP depuis sa version 3, a pour sa part fait le bilan des 25 années d’existence du langage. Après des débuts très modestes et contre toute attente, le PHP s'est rapidement imposé comme le langage le plus important du Web, alimentant un pourcentage ahurissant de serveurs et certains des principaux sites Web que nous utilisons tous quotidiennement. Zeev a retracé l’historique de PHP, illustrant les volontés de ses créateurs à la fois de se démarquer et de s’inspirer d’autres langages,&nbsp; mais surtout nous retiendrons leur volonté de conserver un langage flexible, dont le typage fort doit rester une option. Il est fier de ce qui a été accompli jusqu’ici même s’il reconnaît également les faiblesses du langage comme certaines inconsistances, qu’il espère voir disparaître petit à petit. Enfin il&nbsp;nous a encouragé à participer et contribuer à notre échelle, que ce soit via les votes sur les RFC, les propositions, les corrections de bug, ou même de tester nos applications. Nous ne sommes pas tous Rogue ou JetBrain. En résumé une jolie promenade historique !

<h3 dir="ltr">L'écosystème PHP toujours bien représenté&nbsp;&nbsp;</h3>

PHP bénéficie d’un riche écosystème où bibliothèques et outils divers rayonnent. Pendant le Forum PHP, nous avons encore eu droit à des conférences variées et nous avons eu la chance d’avoir plusieurs membres de notre équipe dans le line up.

<ul dir="ltr">
	<li>Notre coopératrice Jade Bellereau a présenté Click ‘N’ Collect, notre solution basée sur Sylius et permettant aux&nbsp; commerçants de poursuivre une activité commerciale dans le respect des consignes sanitaires actuelles. <a href="https://twitter.com/coopTilleuls/status/1320999927112237056" target="_blank">Ses slides viennent d’être publiées</a> !&nbsp;</li>
	<li><a href="https://twitter.com/dunglas" target="_blank">Kévin Dunglas</a> nous a présenté <a href="https://github.com/dunglas/vulcain" target="_blank">Vulcain.rocks</a>, l’outil qui rend obsolète GraphQL. Cet outil permet de coupler une API REST en utilisant les capacités hypermédia de celle-ci (souvent avec une documentation OpenAPI, et avec les formats JSON-LD, JSON:API, ou HAL) afin de requêter à l’aide d’un JsonPointer (format s'apparentant à une expression régulière) fourni dans un entête HTTP. Cet outil exploite les nouvelles capacités de HTTP/2 afin d’aller chercher en amont les ressources associées réclamées par l’expression de cet en-tête. Le but final étant d’avoir les données disponibles sans avoir à effectuer la requête côté client. Cette révolution permet une plus grande souplesse tout en respectant l’architecture REST, permet d’exploiter du cache et d’accélérer jusqu’à 40x le temps de réponse. Parce que Kévin n’est jamais sans surprise, il en a profité pour nous annoncer qu’il a travaillé sur une intégration serveur avec <a href="https://twitter.com/caddyserver" target="_blank">Caddy</a> afin d‘intégrer cache et reverse proxy d’un seul tenant avec Vulcain.</li>
	<li><a href="https://twitter.com/s0yuka" target="_blank">Antoine Bluchet</a> quant à lui nous a proposé une démonstration technique avançant les dernières nouveautés et capacités de temps réel avec PHP. Il aura enflammé le chat d’applaudissements à l’aide d’un bot relié à une application PHP, distribuant de manière asynchrone grâce à <a href="https://mercure.rocks/" target="_blank">Mercure.rocks</a> et les <a href="https://developer.mozilla.org/fr/docs/Web/API/EventSource" target="_blank">EventSources</a>. Côté PHP c’est le composant HttpClient de Symfony qui s’affaire pour expédier les messages. Une belle démonstration de capacité qui s’accompagne d’un benchmark de Mercure dont vous pourrez retrouver les résultats <a href="https://miro.com/app/board/o9J_kmeHk5o=/" target="_blank">ici</a> et <a href="https://dunglas.fr/2019/10/forum-php-2019-mercure-real-time-for-php-made-easy/" target="_blank">là</a>.</li>
	<li>De son côté, <a href="https://twitter.com/anamus_" target="_blank">Antti Rössi</a> nous a proposé de pirater nous-même notre propre application afin de vérifier sa robustesse, avant que quelqu’un d’autre n’en ait l’idée. <a href="https://fr.wikipedia.org/wiki/Injection_SQL" target="_blank">Injection SQL</a>, <a href="https://www.arsouyes.org/blog/2020/14_PHP_Injection_Objet/" target="_blank">injection d’objet</a>, <a href="https://fr.wikipedia.org/wiki/%C3%89l%C3%A9vation_des_privil%C3%A8ges" target="_blank">élévation de privilège</a>… sont autant de possibilités pour un acteur malveillant de nuire à votre application, et par conséquent, à votre activité. Après une démonstration impressionnante de l’exploitation de chacune de ces failles, Antti nous a donné quelques conseils pour éviter une situation désastreuse : ne&nbsp;jamais faire confiance à l’utilisateur ; mettre à jour les logiciels exécutés en production le plus rapidement possible ; ne jamais déployer du code que l’on ne comprend pas ; suivre le <a href="https://fr.wikipedia.org/wiki/Principe_de_moindre_privil%C3%A8ge" target="_blank">principe du moindre privilège</a> : moins une application possède de privilèges et&nbsp;mieux elle se portera ; apprendre à réfléchir comme un pirate et apprendre les bases du piratage ; toujours se souvenir qu’un grand pouvoir implique de grandes responsabilités.</li>
</ul>

<h3 dir="ltr">L'impact des conférences “non techniques”</h3>

Bien que toujours liée à PHP, cette édition 2020 nous a permis de nous remettre en question sur la place de l’éthique dans l’informatique et sur les produits que nous développons, mais aussi sur la place (parfois trop faible) de la bienveillance et de la communication dans les équipes. À ce sujet, <a href="https://twitter.com/KimLaiTrinh">Kim Laï Trinh</a>, anciennement développeur à la <a href="https://laruchequiditoui.be/fr-BE" target="_blank">Ruche qui dit Oui</a>, nous a fait part de son analyse des difficultés inhérentes à la revue de code au sein d’une même équipe, rappelant que “vous n’êtes pas votre code”, allant même jusqu’à aborder des sujets délicats tels que les discriminations.

<a href="https://twitter.com/tut_tuuut" target="_blank">Agnès Haasser</a>, développeuse indépendante, nous a quant à elle incités à explorer des solutions basées sur la communication non-violente et l’empathie, dont elle a elle-même fait l’expérience positive d’abord dans son rôle de parent, puis dans son travail. Nous avons été particulièrement touchés par la sincérité de ces conférences.&nbsp;Le Forum PHP 2020 a aussi clôturé son événement avec le chercheur Gilles Dowek, qui a rappelé lors de sa conférence au sujet de la place de l’éthique dans le web, que les études d’informatique n’étaient pas genrées.

<h3>La communauté présente, même à distance</h3>

La communauté ne pouvant pas déambuler comme d’habitude à travers les stands, elle&nbsp;avait néanmoins l’opportunité de rencontrer les sponsors et participant·e·s de l’événement sur Work Adventure, une solution ludique développée par <a href="https://www.thecodingmachine.com/" target="_blank">The Coding Machine</a> qui nous a fort plu !&nbsp;

<center>
<blockquote class="twitter-tweet">
Rejoignez l'équipe des Tilleuls sur notre stand virtuel au <a href="https://twitter.com/hashtag/ForumPHP?src=hash&amp;ref_src=twsrc%5Etfw">#ForumPHP</a> de l'<a href="https://twitter.com/afup?ref_src=twsrc%5Etfw">@afup</a> ! <a href="https://t.co/UQPlJ9o1LF">pic.twitter.com/UQPlJ9o1LF</a>
— Les-Tilleuls.coop (@coopTilleuls) <a href="https://twitter.com/coopTilleuls/status/1319284616671289345?ref_src=twsrc%5Etfw">October 22, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>

Malgré le contexte sanitaire, l’AFUP a su rebondir et offrir à sa communauté deux jours de partage de connaissances. S’agissant de mon premier Forum PHP, je suis très heureux d’avoir pu partager ce moment de convivialité virtuelle avec la communauté bien réelle. Les conférences sur l’éthique et la bienveillance, encore trop rares dans les événements tech de ce type, m’ont particulièrement plu.&nbsp;Il ne reste plus qu’à croiser les doigts pour que le prochain Forum puisse avoir lieu en présentiel !

Evenement

Afup

Forum PHP

Conférences

Retour sur le Forum PHP 2020

Quand <a href="https://vercel.com/" target="_blank">Vercel</a> a annoncé sa première conférence dédiée intégralement à <a href="https://nextjs.org/" target="_blank">Next.js</a> et bien que j'aime vraiment leurs produits, j'étais légèrement perplexe sur le fait que le sujet pourrait remplir plusieurs heures. Loin de m'arrêter à mes a&nbsp;priori, je me suis précipité pour prendre mon billet gratuit. Dans les jours suivants, les annonces pleuvaient : l'ouverture d'un énorme <a href="https://discord.gg/BYgzV7" target="_blank">discord</a>, jusqu'à 4 conférences en simultané... J'ai commencé à réaliser que je m'étais trompé et qu'ils avaient prévu quelque chose de costaud.

<center>
<blockquote class="twitter-tweet">
Just got my free ticket to <a href="https://twitter.com/hashtag/nextjsconf?src=hash&amp;ref_src=twsrc%5Etfw">#nextjsconf</a>, grab yours! Let’s build a better web with <a href="https://twitter.com/hashtag/nextjs?src=hash&amp;ref_src=twsrc%5Etfw">#nextjs</a>: <a href="https://t.co/HIMEaMa9A0">https://t.co/HIMEaMa9A0</a> via <a href="https://twitter.com/vercel?ref_src=twsrc%5Etfw">@vercel</a>
— Grégory Copin #OnEstLaTech (@gregcop1) <a href="https://twitter.com/gregcop1/status/1318295897055395840?ref_src=twsrc%5Etfw">October 19, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>

Pour sa première édition, la conférence dédiée à Next.js a rassemblé jusqu'à 35 000 spectateurs simultanés et à part de miniscules bugs par endroit, difficile de dire que ça n'a pas été une immense réussite. D'un point de vue organisationnel, discord rassemblait tous les échanges autour des conférences, des sponsors, des offres d'emploi et de la communauté en général, car c'était la première "révélation". Cet espace restera ouvert et deviendra le lieu d'échange numéro 1 pour parler de Next.js. Le site, quant à lui changeait quelque peu d'apparence pour ouvrir de nouvelles rubriques dédiées à chacune des tracks, un espace réservé à la présentation de chaque partenaire et une liste d'offres d'emploi (le tout interconnecté avec Discord). Au fur et à mesure du déroulement de la keynote d'ouverture, de nouvelles rubriques apparaissaient sur le site de Next et sur leur repos pour décrire leurs nouveaux produits. Il est assez amusant de constater que dans le même mois, React est passé en version 17.0 (<a href="https://fr.reactjs.org/blog/2020/08/10/react-v17-rc.html" target="_blank">sans réel changement</a>) et que dans le même temps Vercel publiait la version 10.0 de Next avec pléthore d'annonces.

Outre un allégement substantiel du code, cette nouvelle version arrive avec son lot de surprises. Elle embarque des composants dédiés à l'<a href="https://nextjs.org/blog/next-10#built-in-image-component-and-automatic-image-optimization" target="_blank">optimisation d'image</a> et promet depuis n'importe quel format source de fournir l'image adaptée au besoin du client (taille d'écran, bande passante, ...). L'internationalisation est également un problème récurrent lorsqu'on travaille avec Next. Longtemps, nous avons pu compter sur des solutions telles que <a href="https://github.com/isaachinman/next-i18next" target="_blank">next-i18n</a>, mais l'affaire semble aujourd'hui entendue (ou la question vite répondue, c'est selon) dans la mesure où Next embarque désormais nativement des <a href="https://nextjs.org/blog/next-10#internationalized-routing" target="_blank">outils de traduction et de routing</a>. Sans doute par peur de ne pas en faire assez, une liste de solutions dédiées à l'<a href="https://nextjs.org/analytics" target="_blank">analyse continue des performances de vos sites</a> est embarquée dans la version 10. Peut-être voyez-vous des liens se tisser entre toutes ces annonces et vous avez raison, car Vercel cache encore une carte dans son jeu : <a href="https://nextjs.org/commerce" target="_blank">Next.js Commerce</a>. En se basant sur la solution d'eshop headless <a href="https://www.bigcommerce.com/" target="_blank">BigCommerce</a>, Vercel a sorti un kit de démarrage de site e-commerce clé en main, prêt pour le SEO, traduisible, thématisable, optimisé pour le mobile et avec une suite de hooks qui faciliteront la vie aux développeurs React. Cette annonce pourrait paraître trop belle pour être vraie, mais quand on connaît le soin que Vercel apporte à ses créations, on vient peut-être d'assister à la naissance d'un produit vraiment intéressant.

<img alt="null" id="image" src="https://api.les-tilleuls.coop/upload/390" style="width: 100%;" title="conf-next-decor" />

Le confinement nous offre parfois des décors de conférence assez cocasses.

&nbsp;

Dans l'ensemble et si vous aimez que la tech ne parle que de tech, vous trouverez les conférences intéressantes. À mon goût, trop de conférenciers étaient venus pour vendre leur produit (même si certains étaient intéressants : BigCommerce, <a href="https://www.storyblok.com/" target="_blank">Storyblok</a>, <a href="https://www.sanity.io/" target="_blank">Sanity</a>, ...), il manquait de sujets dédiés aux enjeux sociaux, environnementaux voire politiques, mais peut-être chercheront-ils un meilleur équilibre dans les années à venir... ou pas. Deux conférences ont particulièrement attiré mon attention, sans que le contenu ne soit révolutionnaire, elles ont su se détacher des autres. Celle de <a href="https://nextjs.org/conf/speakers/cassidoo" target="_blank">Cassidy Williams</a>, déjà parce que c'est la première fois que je vois une conférencière en pyjama licorne, mais surtout parce qu'elle a réussi à créer un lien avec un public pourtant distant au travers de ses histoires interactives, loufoques et "angoissantes". <a href="https://nextjs.org/conf/speakers/seancdavis" target="_blank">Sean C Davis</a>, quant à lui, s'est approprié le format et a su tirer partie de l'enregistrement des conférences à l'avance. Montage vidéo, storytelling, cut, il a pioché dans les codes des youtubers (de façon moins professionnelle bien sûr) pour créer ce qui pourrait bien être un nouveau genre de talk à l'avenir... En tout cas, ça m'a donné envie de pousser plus loin ce concept et de m'amuser avec le format.

C'était ma première conférence confiné et je dois dire que j'ai été enchanté. Pas besoin de faire la queue pour des petits fours tièdes, de s'entasser à l'entrée d'une salle pour finalement s'asseoir par terre ou d'être collé à d'autres développeurs dans des pièces mal aérées. Bien sûr que ça manque de ne pas voir les copains et de ne pas pouvoir échanger comme on le fait habituellement, mais l'organisation de Vercel a été telle, tout était tellement fluide et léché que je n'ai pas eu l'impression d'assister à une adaptation de format dûe aux conditions sanitaires, mais peut-être à l'émergence de ce que pourraient être les rassemblements de la tech à l'avenir.

API, web and cloud experts.

API Platform creators.
Symfony and Open Source contributors.

Our services

Expertise

Development

They trust us

Arnaud Senlis