Retour sur la conférence du LyonJS 💯

Je suis allé à la conférence du LyonJS 💯 et j’ai passé un excellent moment. Si vous ne connaissez pas le LyonJS, c’est une association qui organise des événements pour rassembler les passionné·es de JavaScript, et vous pouvez en lire plus sur leur site web officiel : https://www.lyonjs.org/

Le LyonJS est une association qui est très proche de mon cœur. C’est le premier meetup que j’ai commencé à fréquenter régulièrement, j’ai beaucoup d’actuels collègues qui y donnent des talks, et c’est le premier événement public où j’ai pu donner un talk qui était très cathartique pour moi et très niché pour toutes et tous ¹ !

Pour leur 100ᵉ événement, les membres de l’association ont organisé une journée entière de conférence ! 🎉 Sans hésiter, sans connaître le programme, j’ai pris mon billet, attendu le jour J, et j’ai pu assister à la journée !

Je vous propose de revivre cette conférence ensemble à travers de blog.

Petit déjeuner et accueil

Rendez-vous à partir de 8 h du matin à l’UGC du cinéma Part Dieu. Oui, le LyonJS 💯 a eu lieu dans une salle de cinéma ! L’accueil se faisait dans le grand espace avec la présentation des films et la vente de popcorn. Les sponsors commençaient à peine à s’installer et le petit déjeuner était déjà servi. Je n’y ai pas touché, mais il y avait du café que je me suis empressé d’engloutir.

Après avoir fait le goblin à attraper les goodies de Kolecto (un joli carnet blanc et un tote-bag assez étonnamment très pratique), et de Malt (un autre joli carnet, en matière recyclée), je suis monté dans la salle de cinéma et je me suis confortablement installé au premier rang dans les sièges de l’UGC.

À toutes celles et ceux qui veulent organiser une conférence et qui cherchent un lieu : une salle de cinéma est ✨ parfaite ✨. C’est confortable, ça sent bon, la température est idéale, il n’y a pas d’interruptions. C’est le meilleur endroit pour organiser une conférence. Je recommande énormément. Passons au programme.

La matinée

AstroJS avec Matthieu Lux

Vous connaissez Astro ? C’est un excellent framework frontend qui apporte une excellente expérience développeur. Le blog que vous lisez est totalement fait en Astro par exemple.

Matthieu nous a présenté le fonctionnement d’Astro, avec ses caractéristiques et fait un retour d’expérience sur la migration de Gatsby vers Astro chez Proton !

Je pensais bien connaître Astro mais j’ai quand même appris des choses. Laissez-moi vous résumer rapidement : Matthieu a rappelé l’historique des frameworks JS et ce qu’apporte Astro : retourner à du web simple, sans javascript, sans surprises, et en utilisant n’importe quel autre framework javascript.

Et oui ! En faisant du Astro, on peut coder en vuejs, en reactjs… Grâce à son architecture en îles, on peut utiliser un composant de n’importe quel framework javascript. Concrètement, la page d’accueil de mon blog est en astro, mais le chatbot sur cette même page est en vuejs. C’est le seul endroit qui charge du javascript, et tout le reste est du html aussi simple.

La partie migration de Gatsby à Astro était assez spécifique à Protonmail, avec des problématiques de plusieurs migrations qui ont eu lieu en même temps. L’histoire était intéressante, mais en y repensant, c’est difficile de ressortir avec des choses actionnables pour envisager une migration vers Astro.

Tester c’est tricher, avec Antoine Caron et Jules Poissonnet

Probablement mon talk préféré ex aequo de la journée : Tester c’est tricher ! Mais pourquoi ?

Dans ce talk, Jules et Antoine fracassent les idées répétées sur les stratégies de test. Tout le monde y prend pour son grade : la pyramide de test est un concept mal expliqué, toutes les stratégies de test sont critiquables, et ils proposent un système par “motivateurs” pour réussir à écrire, maintenir et organiser ses tests.

Laissez-moi vous détailler ces motivateurs. Ils consistent à considérer qu’un test a 5 raisons qui incitent une équipe à les écrire. Ils sont : documenter, stabiliser, vérifier l’intégrité, assurer la conformité, permettre la reproductibilité ².

C’est le meilleur talk que j’ai jamais vu sur une approche pragmatique des stratégies de test. Je recommande énormément, j’ai adoré, et je n’ai même pas remarqué qu’ils étaient en galère alors que leurs images ne chargeaient pas, ils avaient de la latence sur leurs diapositives et leurs notes avaient planté ! Bravo ! 👏🏼

Suite à la présentation, je pense être un good enough…

Remotion : faire un éditeur vidéo en React, par Jonny Burger

Ah Remotion, j’en ai entendu parler partout : plusieurs de mes collègues ont travaillé sur un site de génération de vidéos courtes ³ se basant sur Remotion.

Jonny Burger en est le développeur principal, et il nous a présenté en 30 minutes comment recoder un éditeur vidéo comme Davinci Resolve, Adobe Premiere Pro, Final Cut… Il nous raconte certains des challenges qu’il a rencontrés pour des features auxquelles nous sommes habitués (rendering, sélection d’items) et comment il a trouvé des solutions en react.

Le talk permet de voir plusieurs choses : l’ordre d’affichage de composants sur du html, la gestion de la propagation d’événements sur un clic, comment mettre de l’IA dans son talk.

Ce talk m’a très fortement inspiré pour reprendre un projet qui m’inspire depuis longtemps sur les logiciels de MAO… Peut-être basé sur Remotion… 🫣

Petite info impressionnante : pour rentrer chez lui, Jonny est reparti à vélo depuis Lyon jusqu’à la Suisse… Quelle motivation… C’est une personne très motivée, très enthousiaste et drôle…

L’heure du repas

Le repas était délicieux. Il y avait beaucoup de nourriture végane disponible et tout était très bon. Merci Maison Margotin pour ce pareil repas…

La couleur avec Julien Sulpis

Le talk post repas du midi est un moment particulier : la digestion s’enclenche, le corps n’est plus présent et le cerveau non plus. Pas de problème pour Julien qui nous présente ce qu’est la couleur, comment on la représente, et pourquoi c’est important ! Bravo à mon autre talk préféré ex æquo.

Julien est un ami à moi qui ne cesse de m’étonne par la quantité de choses qu’il sait, et ce talk sur la couleur est une preuve da la richesse des sujets qu’il arrive à maitriser.

Pour les plus pressé·es, son talk est déjà en ligne ⁴ !

Julien présente d’une façon très scientifique les problématiques suivantes : pourquoi certaines ont l’air plus lumineuses que d’autres ? Peut-on créer une formule pour respecter les contrastes ? Dans une approche qui allie biologie, physique, mathématiques, 3D et couleurs, Julien nous explique tout et franchement je me suis senti bien plus intelligent en sortant qu’en entrant !

Le crafts dans le CSS, avec Manon Carbonnel

Manon Carbonnel est une personne que je suis sur les réseaux depuis 4 ans. Nous étions dans la même entreprise, mais pas la même ville, et je crois me souvenir qu’elle partageait à propos de bonnes pratiques et de CSS depuis un moment déjà.

Son talk présentait, en trois modes d’intervention, comment améliorer la qualité de code html / css pour réussir à faire du code réparable, maintenable et beau.

Elle nous a partagé plusieurs techniques pour améliorer l’accessibilité de ses pages, comment améliorer la lisibilité de son code, et pour être franc j’ai été captivé par son enthousiasme à parler de css.

Le moment choquant pour moi, c’était qu’elle a réussi à m’expliquer le système de priorités d’applications de style, et je me rends compte que je n’ai jamais cherché à creuser plus cette partie qui pourtant est bien !importante !!! Ce sont les nombres un peu étranges que vous pouvez voir dans votre éditeur de code quand vous survolez une classe.

Je n’ai pas encore tout assimilé, et je n’ai pas la même expérience que Manon. Je n’ai jamais été un pompier d’intégration CSS, et j’ai principalement travaillé sur des applications avec de bons design systems bien conçus dont ma seule valeur ajoutée en tant que frontend c’est mettre les bons espacements et les bonnes typographiques. Mais elle me donne des billes pour remettre en question mes approches html css, et surtout elle me confirme des années de test un peu faites dans le noir.

C’était un très bon talk en tout cas qui me motive à faire du style sans Tailwind ! Et Manon avait presque littéralement des étoiles dans les yeux en parlant de CSS et je me suis senti transporté par cet enthousiasme.

Deno, un autre runtime javascript

Nous, les développeurs Javascript, avons un petit défaut : nous aimons réinventer la roue. Nous avons réinventé les serveurs avec node, nous avons réinventé le web avec les single page app, nous avons réinventé le CSS avec tailwindcss, et maintenant nous réinventons node avec Deno.

Jérémie Patonnier nous présente avec un très remarquable enthousiasme comment Deno, qui est la même chose que node, mérite notre attention.

C’est un peu difficile pour moi de suivre des talks très techniques. Par là je veux dire, le talk était uniquement à propos de Deno, ses fonctionnalités, la façon de travailler avec. Je suis un plus grand fan présentation incluant enjeux politiques, questions territoriales, souverainté du numérique, avec beaucoup de transversalité… Bref, je me suis cru au MIXIT ⁵ ^^.

Malgré cette difficulté, j’avoue qu’il m’a donné envie d’essayer, et de toute façon, je n’ai pas le choix : ce blog est hébergé sur des edge function de Netlify qui utilisent Deno. J’utilise déjà Deno dans ma vie quotidienne et pourtant je n’y comprends rien…

Apparemment, le fait de ne plus avoir besoin d’un fichier pour déclarer la liste des dépendances est un game changer. Je vais me forcer… À l’origine, c’est ce qui me rebutait le plus avec Deno : où vont les dépendances ? Je vous invite à regarder la documentation ⁶ pour comprendre où elles peuvent être déclarées.

Last but not least : Julien Huang qui nous parle de composants serveurs Nuxt

Pour clôturer la journée de talks, nous avons eu droit à une présentation d’un des membres de la core team de Nuxt : Julien Huang

La présentation montrait très techniquement comment fonctionnaient les serveurs composants de Nuxt, avec un objectif de ne pas critiquer l’approche de Nextjs. Félicitations Julien tu y es arrivé !

Comme je l’ai écrit juste avant, cela a été un peu difficile pour moi de suivre la présentation, car elle était très technique et spécifique, et pourtant pas mal de mes applications personnelles sont codées en Nuxt mais je n’ai pas encore eu besoin de cette fonctionnalité. Je vais m’essayer à la présentation.

L’idée des serveurs components, c’est prendre un composant Vuejs ou Reactjs, et se dire : le serveur va construire le composant l’entier, effectuer des appels dans le backend, créer une page HTML entière, et l’envoyer ensuite au navigateur. Cette approche permet de se passer totalement d’un serveur supplémentaire.

Je me demande toujours si les serveurs functions et les serveurs components ne sont pas trop complexes. Je trouve que ces approches créent une forte adhérence au framework dans la communication entre le frontend et le backend.

Cela s’inscrit dans technique d’architecture du web que je nommerais bien conception intrinsèque. Les composants sont de plus en plus indépendants, contiennent de plus en plus leurs fonctionnalités, et il n’y a plus besoin de créer de très grands systèmes très couplés. Ils sont intrinsèquement fonctionnels, et idéalement indépendants.

Le risque, c’est que de très fortes logiques business peuvent se retrouver implémentées dans les composants de votre framework préféré, et je ne suis pas convaincu que cette approche soit pérenne sur la durée.

À voir ce que Nuxt propose pour éviter ces problématiques, mais sur le coup, et pour donner une opinion impopulaire, je pense que l’approche MVVM incite plus à écrire des gros spaghettis de code très intriqués avec les 3/4 de l’application.

J’ai pu échanger dans la partie suivante avec Julien pour parler plus généralement de Nuxt, et j’ai appris beaucoup de choses. Par exemple, ils ne sont que 3 pour trier tous les tickets de bugs créés sur GitHub ! J’ai aussi pu raconter avec fierté que j’ai déjà une fois fait une contribution pour Nuxt ⁷.

J’étais vraiment content de pouvoir parler de Nuxt, et même si mon cœur converge plutôt vers Astro, j’aime énormément ce que Nuxt apporte en ce moment, et j’ai hâte de pouvoir trouver des usages pour tout ce que j’ai appris.

Il y a aussi beaucoup de choses développées dont on ne parle pas assez : Nuxt Content, Nuxt UI, les devtools vuejs (mais pas que), toutes ces choses qui ne servent pas que pour faire du VueJS ou au contraire qui dépassent ce qu’on attendrait d’un framework.

L’apéro et conclusion

Pfiou ! C’était dense ! Quoi de mieux que d’étancher sa soif de connaissance autour d’un verre de Perrier ?

Peut-être c’est mon côté très social, et j’en parlais déjà dans un précédent article de blog ⁸, mais j’adore discuter, faire des rencontres, échanger.

J’ai eu la joie de discuter au cours de la journée avec les speakers, avec d’autres développeurs·euses, des moins développeurs·euses, au sein de la communauté lyonnaise. C’était très sympathique. J’ai passé un excellent moment de partage, discuté avec mes anciens collègues, avec des gens que je ne connaissais pas du tout. Ce serait avec plaisir de garder contact avec vous toutes et tous…

Le LyonJs 💯, pour une première conférence, c’était un 💯 (sans) faute… La salle était très confortable, le repas était parfait, le timing était très bon, le prix dérisoire (seulement 40 € la journée !!), les sujets étaient variés et les discussions étaient top.

Bravo pour l’organisation. J’ai adoré, et à quand la deuxième édition du LyonJS 💯 ???