Devfest Nantes 2022
Le ton était donné pour cette 10ème édition du Devfest Nantes, avec son accroche et son incroyable affiche, comme toutes les précédentes !
L’extraordinaire monde du Devfest, voyage au centre du code.
Comme l’année dernière, je n’ai pas laissé passer l’occasion d’être présent a cette édition. Il a fallu un peu de chance et de persistance pour pouvoir réserver des billets, tant ils se sont vendus en quelques minutes seulement cette année…
J’étais cette fois-ci accompagné de Johan, également développeur frontend chez OpenClassrooms.
Une nouveauté cette année, qui m’a marqué car cela doit pas être simple a mettre en place : chaque conférence était sous-titré en temps réel pour les malentendant·e·s. Soit par des écrans annexes sur les coté, soit sur l’écran principal. Une très belle initiative !
Keynote introduction
Par Tommi Antero
Si vous ne connaissez pas Tommi Antero (comme moi avant de voir son intervention :p) vous pouvez allez voir sa surprenante chaine youtube Device Orchestra. Sa passion est de faire jouer de la musique a des objets du quotidien qui ne sont pas vraiment fait pour… Brosse a dent électrique, rasoir, terminal de paiement par CB… Tout y passe !
Il nous a expliqué comment il a mis en place un workflow qui lui permet d’écrire la musique dans un vrai logiciel de musique, qui sera ensuite transformé en code exécuté sur un arduino, mais avec aussi un “émulateur” au milieu, qui lui permet de tout régler sans devoir brancher tout le hardware :)
Kanye West, Maths and Signals ! How to clone Shazam
par Moustapha Agack
J’étais a la fois intrigué et un peu effrayé de ne pas pouvoir suivre la conférence, pensant qu’on y parlerai beaucoup maths, algorithmie étant donné que ce n’est pas mon fort…
Ce n’est pas non plus le fort de Moustapha, et il a démystifié un peu tout ça dés le départ. Évidemment, Shazam est très très performant et possède des algo très pointus, mais il prouve dans cette conférence que le principe de base est au final assez simple.
Il nous a montré comment son code node js fonctionne, et comment en utilisant la transformation de Fourrier (dont il a utilisé une implémentation déjà toute faite) il réduit une chanson en une “simple” empreinte (une suite de chiffres) qu‘il stock ensuite une base de donnée. Ensuite a l’écoute d’un titre, en calculant son empreinte, il est capable de le rechercher dans sa base.
Il s’est même payé le luxe de faire une démo en live !
Comment j’ai largué Apollo Server pour GraphQL Yoga
Par Nicolas Lepage
Nicolas nous a présenté son parcours pour migrer d’Appolo Server vers Yoga, avec la promesse d’avoir quelque chose de beaucoup plus souple et extensible qu’Appolo.
L’avantage de Yoga, c’est l’utilisation de GraphQL Envelop, qui est un système de plugins, agnostique du server utilisé. De base Yoga peut donc a la fois se servir de plein de plugins existant, et permet aussi donc de rajouter les siens.
DALL-E V2 — un robot et un peintre font de la génération d’image par IA
Par Olivier Mertens
Les images rendues par une intelligence artificielle me fascinent, c’était donc l’occasion d’en savoir un peu plus.
Nicolas a présenté l’outil, puis a montré quelques exemples. Il a construit avec l’assistance quelques images, en nous demandant des thèmes.
J’aurais aimé qu’il aille un peu plus loin, notamment sur la dimension légale d’un tel outil. Chaque image générée étant forcément le fruit d’un mélange entre plusieurs autres images, qui elles, ont été dessinées, peintes, photographiées par un Humain, qui sont les vrais créateur·trice·s des images générés par Dall-e ?
Documentons l’accessibilité en phase de design
Par Stéphanie Walter
Une conférence hyper intéressante, pour démontrer une fois de plus que l’accessibilité, ce n’est pas une vague surcouche qu’on rajoute a la fin. C’est quelque chose qui doit être profondément ancrée dans la conception du produit, et cela le plus tôt possible.
Stéphanie nous a montré comment elle documente ses fichiers Figma, pour ses développeurs et développeuses, afin de spécifier le plus de choses possibles. Elle documente au niveau composant, et également au niveau de la page.
Chaque interaction est précisément décrite, parfois le balisage HTML est indiqué etc. Évidemment, elle ne fait pas ça toute seule, l’équipe de développement y contribuent également, pour ce qui est plus technique.
Elle a fait un blog post de cette présentation, plein de super astuces, à bookmarker !
The PWA Cheat Sheet for 2023
par Maximiliano Firtman
Une conférence très technique, dont l’auteur est une référence en ce qui concerne les Progressive Web Apps.
Maximiliano a d’abord fait le tour des API qui sont déjà disponibles. Il a ensuite enchainé sur celles qui allaient arriver en 2023.
Énormément d’informations (peut être trop !), qui confirment que les PWA sont une alternative très viable aujourd’hui aux applications natives.
Vous trouverez son diaporama ici.
Le côté obscur du Shadow DOM
par Adrien Bordone
Shadow DOM est une technologie qui est particulièrement intéressante, car elle fait la promesse de pouvoir construire de nouveau élément HTML et les rendre utilisables de la même façon que les éléments natifs (select, input etc.)
Malheureusement, Adrien a semble-t-il rencontré plusieurs petits bugs, et il nous explique pourquoi, et comment les contourner.
La plupart de ces bugs viennent de l’isolation supposée de votre code css avec le reste de la page, qui est une aide (le css de la page ne peut pas interférer avec celui de votre composant), mais parfois aussi un obstacle (pas accès aux polices chargée sur la page principale, par exemple)
Motional Intelligence: How Animation Brings Product to Life
Par Cyril Mottier
Je suis personnellement assez réticent concernant les animations sur un site web. Pour les rendre performante, accessible, c’est parfois énormément de complications pour peu de gain, voir même un agacement de l’utilisateur·rice.
Cyril nous a montré plusieurs exemples, je pense tous issus d’applications natives mobile ou tablette, où les contraintes ne sont pas non plus exactement les mêmes. Cyril explique d’ailleurs que l’animation dans les interfaces utilisateurs date du premier iphone, et notamment son “slide to unlock” qui avait une animation subtile pour faire comprendre qu’il fallait faire glisser le bouton vers la droite. Alors ok, c’est joli, mais la flèche plus le texte, a mon sens, ça suffit…
Le premier exemple était un bouton animé, certes très joli, dont l’animation était quand même un peu “too much”, et qui ne pourrait convenir qu’a un bouton très spécifique d’une app, pas tous les boutons, sous peine de voir l’utilisateur·rice s’énerver devant ce bouton gesticulant :)
Le dernier exemple m’a, en revanche, très convaincu, concernant une application de vente de skateboard, qui permet de customiser sa planche, ses roues, ses décorations etc. avec un superbe rendu 3D temps réel.
Améliorer l’expérience utilisateur de nos formulaires web
Par Geoffrey Crofte
Geoffrey a fait le tour de ce qu’il faut faire et ne pas faire sur une formulaire. Spoiler alert : c’est très loin d’être trivial pour faire les choses correctement…
Il est aussi sorti de la simple problématique ux/ui/code. Un formulaire mal conçu peut engendrer des appels sur votre support client. Un nouveau formulaire, de nouvelles données récoltées impliquent également potentiellement un traitement derrière, êtes vous équipé pour vraiment traiter cet afflux de donnée?
Au final, beaucoup beaucoup d’information très intéressantes, que vous pourrez retrouver dans le PDF de sa présentation.
Build your 8-bit computer from scratch
Par Olivier Huber
Sans doute qu’Olivier est un des conférenciers les plus passionnés que j’ai jamais vu :) Il a fait montre d’un enthousiasme incroyable concernant son projet : construire un ordinateur 8bit en partant de zéro.
Et comme Olivier est aussi fou que passionné, il prend très au sérieux une citation de Richard Feynman :
Ce que je ne peux pas créer, je ne le comprends pas
Donc s’il a besoin d’un composant électronique, il va d’abord le “construire” lui même a base de breadboard et de cablage plus ou moins simple, afin de comprendre. Il nous a montré que c’est vrai pour une “simple” porte logique OU, mais aussi… pour un processeur 8bits.
Dans une présentation allant a 2000 a l’heures, il nous a montré comment il construit un ordinateur capable d’additionner (mais au final, aussi de soustraire, diviser, multiplier) 2 nombres.
Au final il construit de la RAM, une unité d’addition, de quoi exécuter de l’assembleur basique etc., sous nos yeux… en partant de rien du tout, le titre de la conférence n’étant absolument pas galvaudée :)
Designers x Developers : Ça match 💙 ou ça match 🥊 ?
Par Sabrina Vigil et Simon Leclercq
Sabrina et Simon ont constaté qu’ils avaient eu des expériences un peu catastrophiques avec leurs équipes de développement. Ils ont donc posé la question autours d’eux, avec un formulaire dédié pour leurs ami·e·s designer·euse·s : “pour vous, quelle est la pire expérience vécu avec un·e dév ?”… Ca peut paraitre un peu rude, mais ils ont fait pareil avec les développeur·euses, “quelle est votre pire expérience avec un·e designer·euse ?”.
De toutes ces réponses, ils en ont tiré quelques fou rires, mais aussi des règles et procédures, afin de fluidifier la communication entre ces deux métiers.
ù le résultat ne plait a personne…Une des idées qui m’a le plus plus (et ceux qui travaillent avec moi savent pourquoi…) c’est que la bienveillance ce n’est pas de la complaisance. Se dire que la proposition de l’autre n’est pas de qualité, mais être “bienveillant” pour ne pas le froisser, c’est assez terrible. On ne tire personne vers le haut, et c’est considérer que l’autre n’est pas capable de mieux… L’idée c’est de communiquer la dessus, pour que tout le monde apprenne, et qu’au final, le travail en équipe tire le produit par le haut.
Une autre idée intéressante proposée : travail a 2, dev et designers, pour que chaque métier voit le quotidien de l’autre.
Pour résumer un peu leur conférence :
Communication
- Respect de l’expertise de l’autre
- Bienveillance ET exigence
- Curiosité saine
Outils
- Prototype
- Design system
- Documentation
- Recherches
Organisation
- designers -> on s’implique !
- développeurs -> on s’implique !
Ils avaient présenté cette même conférence au Devfest Lilles si vous voulez y jeter un œil en attendant que la version de Nantes soit publiée !
Devenir streamer sérieux !? T’es sérieux ?
par Olivier Perez
Olivier a fait l’expérience de streamer du code, pour voir. Il nous a donné quelques clés pour “réussir” dans ce milieu, sans pour autant être un pro sur League Of legends ou Fornite :)
Au final, ça a fonctionné pour lui, avec de la rigueur, des projets un peu fun, il a réussi a avoir une petite communauté autours de lui.
D’un point de vu “éducation”, notre cœur de métier chez OpenClassrooms, il y a forcement des choses a faire autours du streaming, c’est un super moyen de montrer quelqu’un qui développe, certes, mais aussi qui montre ces trucs et astuces, mais aussi ces faiblesses (oui je vais encore voir la doc de Flex en css, et c’est pas grave).
Le tour du monde du Cosplay en 20 minutes
Par Pierre Tibulle
Ok, le Cosplay… quel rapport avec le développement, vous me direz ?
Alors quasiment aucun, mais il y a un twist, vous verrez :)
Pour être honnête, dans cette salle, a cette heure, il devait y avoir une conférence sur l’ux writting, c’était ce que j’avais prévu de voir, mais elle a été annulée :)
Pierre nous a montré comment était fabriqué son costume de Phileas Fogg, héro du Tour du monde en 80 jours de Jules Vernes (le thème du devfest de cette année :p) Mais on parle de la version dessin animé, paru dans les année 80
Pierre nous a aussi dit que faire quelque chose de très manuelle comme ça, c’est parfait pour contrebalancer ce qu’il fait au jour le jour : du dev. Utiliser un peu plus ses mains que son cerveau pour cette activité, c’est très bénéfique pour son équilibre personnel, et c’est donc bon pour son métier de dev (et hop, on voit le rapport maintenant 😉)
Qwik, rapidement
par Benjamin Legrand
Benjamin nous a présenté rapidement Qwik, le nouveau framework JavaScript du créateur d’Angular.
Le framework promet une vitesse d’exécution impressionnante, notamment car il mise tout sur… du HTML. Tout est fait pour d’abord générer du HTML, et utiliser du javaScript qu’en dernier recours.
Le principe n’est pas nouveau, mais difficile de dire si Qwik est une technologie qu’on utilisera demain. De l’aveu même de Benjamin, c’est encore un petit peu frais pour s’appuyer dessus pour une application en production dès maintenant.
Keynote de fin
J’avais été impressionné par la keynote de fin l’année dernière. Et bien cette année, encore plus !
Il s’agissait d’une sorte de pièce de théâtre, mi écrite, mi improvisée, dans laquelle un développeur qui assiste au devfest se retrouve projeté des siècles en arrière (mais avec son PC portable) et rencontre une inventrice qui a des problèmes avec sa montgolfière.
Il va tenter de l’aider, mais avec sa technologie à lui, parfois en s’aidant de choses qu’il a apprises pendant le Devfest, faisant d’innombrables références a toutes les conférences des 2 jours.
Ces références plus le clash inévitable de technologies très différentes étaient a mourir de rire !
Conclusion
Encore une très belle édition cette année ! Merci a OpenClassrooms de nous avoir accordé ces 2 jours et financé les billets, à Johan et moi !
Les présentations étaient une nouvelle fois très diversifiées, et dans leur contenu et dans leurs conférencièr·e·s, ce qui est important a noter.
Cette inclusivité était encore plus poussée cette année, avec les retranscriptions texte en temps réel, bravo pour l’organisation !
Comme toujours, l’ambiance, les décorations, le thème très présent sont tout a fait remarquables, et donne à cet évènement un cachet particulier que j’apprécie particulièrement.
Vous trouverez toutes les photos officielles de l’évènement ici.
Vous trouverez aussi la totalité des conférences sur youtube.
