C’est vendredi 10 novembre qu’a eu lieu la quatrième édition de la journée de conférence incontournable des développeurs Bordelais, j’ai nommé BDX I/O. Dans la continuité des éditions précédentes, les chiffres sont remarquables : en 2 semaines plus de 500 inscrits pour voir, sur une sélection de 178 propositions, 66 speakers dont 11 de Zenika sur scène nous présenter 30 conférences, 24 lightning talks, 3 hands-on et 1 hackerspace dans 6 amphithéâtres de l’ENSEIRB-MATMECA.
Chiffres à part, cette journée fut un grand succès grâce aux efforts des organisateurs aux petits soins, d’un traiteur qui a réussi à régaler nos papilles et surtout des conférences qui étaient toutes de bonne qualité voire très bonnes ainsi que des animateurs des différents stands sponsors qui ont su nous occuper intelligemment entre deux conférences.
Revivons ensemble cette journée des plus enrichissantes.
 

08:42 Arrivée sur place

Arrivé à la bourre (on ne se refait pas) à l’ENSEIRB, il manquait quelques panneaux pour ceux qui venaient pour la première fois, mais les gens sur place au courant de cet événement majeur ont su me guider.
 

08:47 Déjà dans l’ambiance

J’ai récupéré mon badge et mon sac de goodies, stickers de toute sorte, hand spinner, notebook (le carnet, pas l’ordinateur portatif). Je regarde le programme, UX, Web, Big Data, IA, Craftsmanship, … Le choix va être difficile !  Heureusement les conférences sont toutes filmées et sont déjà en ligne. Je salue quelques amis et collègues et après un petit déjeuner à base de jus d’orange et de chocolatines, on se dirige tranquillement vers le grand amphithéâtre pour la keynote d’ouverture.
 

09:12 Keynote d’ouverture

Cliquez sur l’image pour visualiser la vidéo

La parole est tout d’abord donnée aux organisateurs et aux sponsors qu’on remercie du fond du cœur de nous proposer une journée de conférences de cette qualité. Petite nouveauté cette année : la conférence bingo. Des pastilles sont à coller sur une grille à la sortie de chaque présentation pour la commenter rapidement en sortant de l’amphithéâtre.
Après cette première partie, la parole est donnée à Thomas Pierrain qui nous a invité à repenser notre métier. Nous avons la chance de faire un métier où le chômage est quasi-inexistant alors amusons-nous à écrire des applications qui soient à la fois techniquement intéressantes et pertinentes pour le métier plutôt que de simples applications CRUD. Pour cela, faisons un pas vers le métier, vers les utilisateurs de nos applications pour leur écrire des programmes qui répondent à leurs besoins. Ainsi, au lieu d’écrire des lignes de code au kilomètre, privilégions des fonctionnalités qui font sens. De simple exécutant, redevenons acteur de notre métier.
 

09:57 « what I’ve learned after reading the source code of… Angular »

Cliquez sur l’image pour visualiser la vidéo

Amphi B, Emmanuel Demey le directeur technique de la branche lilloise de Zenika a fait le déplacement pour plonger avec nous dans les entrailles d’Angular.
Au cours de cette présentation technique, Emmanuel va tout d’abord nous parler d’internationalisation et de localisation, dans un premier temps : en nous présentant les API implémentées dans les navigateurs qui étaient utilisées jusqu’à la version 4 du framework de Google. Ensuite Emmanuel a codé avec nous un exemple de Pipe utilisant ces fameuses API tel qu’on pourrait les voir de façon simplifiée dans le code d’Angular.
Puis, nous avons plongé dans le Pipe Async du framework, afin de savoir comment est géré le code asynchrone au sein du framework et que fait ce pipe à la fois décrié et incompris et nous avons appris à en développer une version très simplifiée.
Pour continuer, nous avons décortiqué un des grands apports de TypeScript, le langage promu par l’équipe d’Angular, les décorateurs. Où peut-on les placer, comment les écrire selon le contexte et comment les développeurs du cœur d’Angular les utilisent au sein du framework.
Pour finir, Emmanuel nous a présenté un concept souvent inconnu ou incompris, les zones.
Cette conférence très technique attend des développeurs connaissant a minima le framework et désirant approfondir leurs connaissances de l’un des framework front les plus connus.
 

10:56 « Du DDD dans mon Legacy ! »

Cliquez sur l’image pour visualiser la vidéo

À peine le temps de reprendre un café et on se retrouve Amphi A pour le live coding de Thomas Pierrain que nous avions quitté lors de la keynote d’ouverture et Bruno Boucard. Lors de cette présentation, les deux intervenants se sont mis comme objectif de comprendre pourquoi leur application de gestion des réservations des sièges d’un train engendrait des coût assez élevé. Pour cela, ils sont partis de l’application legacy pour la refactoriser en utilisant les outils et bonnes pratiques du Domain Driven Design afin de mieux comprendre ce qui se passait.
Tout d’abord, les règles métiers : un train ne peut pas être rempli à plus de 70% et lors d’une réservation, tous les sièges réservés doivent être dans la même voiture. On écrit les tests qui vont bien, et on peut commencer à refactoriser. Tout d’abord supprimer les code smells, ensuite créer des objets du métier (train, réservation, tentative de réservation…) afin de séparer les différentes responsabilité au sein d’entités métiers. Enfin nous parlerons d’architecture hexagonale afin de séparer les services liés au domaine de ceux liés à l’infrastructure et aux vues.
Ce fut une belle présentation pour ceux qui veulent une initiation rapide au DDD par la pratique.
 

12:02 « Atomic Design »

Cliquez sur l’image pour visualiser la vidéo

L’heure du déjeuner approche, le traiteur fait ses derniers préparatifs le temps de suivre la première session de lightning talk. J’ai choisi celle de Nicolas Dagot sur l’atomic design.
Pendant 15 min, il nous a expliqué comment concevoir le design d’une application : plutôt que de créer un gabarit de page pour redescendre vers les composants les plus petits, faisons l’inverse ! Pensons composants atomiques que l’on va regrouper ensemble sous forme de « molécule » et in fine construire un gabarit. Cette approche a notamment l’intérêt de pouvoir facilement être extrapolé pour créer de nouvelles pages en se basant sur les composants existants.
 

12:24 « L’UX designer, ce médiateur »

Cliquez sur l’image pour visualiser la vidéo

Après un arrêt rapide sur le stand du traiteur pour se ravitailler, continuons dans l’univers de l’UI/UX avec cette présentation de Yuna Orsini et Daniela Peñaranda qui nous parleront du rôle de l’UX dans un projet.
En effet, comme elles le rappelleront, l’UX est une grande source de valeur pour une entreprise, si toutes les grandes entreprises du web y consacrent une grande partie de leur temps et de leur argent, ce n’est pas pour rien. Dans le modèle économique du web aujourd’hui, il est bien plus important de savoir fidéliser ses utilisateurs que de faire du marketing et c’est là qu’entre en jeu le rôle de l’UX designer. Ce dernier, en plus de devoir faire des interfaces qui soient à la fois agréables et intuitives, est le pont entre des utilisateurs qui veulent les outils les plus simples et des commerciaux qui veulent avoir le plus de fonctionnalités possibles.
 

12:51 Alphashifumi

Après s’être restaurés et avoir papoté avec les autres invités du salon, profitons de cet intermède pour visiter les stands. Les sponsors ont répondu présent avec des goodies de toutes sortes, des jeux et des activités ludiques pour les geeks que nous sommes. Certains avaient des concours de LEGO™, d’autres proposaient des activités en réalité augmentée ou virtuelle. Chez Zenika, nous avons travaillé sur une Intelligence Artificielle jouant au shifumi.
Un Raspberry Pi et un Arduino permettaient de démarrer une partie. Une photo de la main du joueur était prise et transmise, via un bus MQTT, soit à un réseau de neurone, soit à l’API Vision de Google. Le réseau de neurones s’appuyait sur Tensorflow pour retrouver le signe du joueur. L’API Vision de Google, quant à elle,  permettait de commenter l’image. De ces commentaires étaient déduits le symbole. Chacun des états de l’application étaient envoyés sur le bus, ce qui permettaient de tester les “modules” indépendamment. Le résultat était ensuite affiché grâce à React sur notre miroir connecté. En même temps, un module écrit en go, permettait de jouer une réplique de GLaDOS (ça rappellera des souvenirs aux joueurs de Portal ;-)) en fonction du résultat.
 

13:09 « 10 conseils pour réussir ses premiers pas en DDD »

C’est dans une salle plus que comble qu’a ensuite eu lieu ce lightning talk sur le Domain Driven Design. Vous pensez qu’il est impossible de résumer le DDD en 15 minutes ? Et bien Benoît Prioux a relevé le challenge et l’a accompli d’une très belle manière : il a réussi à introduire le DDD en 10 points auprès des novices et cela à travers divers conseils, astuces, retours d’expériences. Nous ressortons de la salle avec toutes les billes en main pour plonger dans le blue book d’Eric Evans et également avec l’envie d’essayer au plus vite ses méthodes. Pas de vidéo malheureusement, mais vous pouvez commencer avec le  “DDD vite fait”.
 

13:37 « Les nouveautés de React 16 – Fiber »

Cliquez sur l’image pour visualiser la vidéo

Pour finir cette session de lightning talk : rendez-vous avec Bruno Sabot qui nous a parlé de la dernière version majeure de l’une des trois plus grosses bibliothèques frontend.
C’est l’une des versions avec le plus de changement, que ce soit en temps ou en nombre de commit. Tout d’abord la fin des dépréciations : il est temps de finir vos migrations avant de migrer. Bruno nous a présenté une nouvelle gestion des erreurs des composants enfants, les nouvelles valeurs de retour des composants (en plus de des React.Component et null, on retrouve maintenant des chaînes de caractère, des nombres et des tableaux composés des types précédents). On découvre également le principe de Portal qui permet d’insérer du contenu à l’extérieur du conteneur. Finalement nous avons découvert Fiber, l’un des gros ajouts à React qui permet notamment de faire du rendu asynchrone : présentation très claire et pleine d’humour !
 

14:00 « l’ergonomie des IHM »

Cliquez sur l’image pour visualiser la vidéo

Début de l’après-midi, c’est le retour des conférences et on commence tout d’abord par la dernière conférence sur l’UI/UX de la journée avec Nathalie Cotté qui nous a fait un retour d’expérience sur le rôle de l’UX designer.
C’est sous la forme d’un conte qu’elle nous a rappelé l’importance de l’UX dans un projet et pourquoi il faut penser UX dès le début d’un projet, plutôt qu’à la fin où repenser les interfaces et fonctionnalités engendre des coûts supplémentaires. En effet, l’ergonomie n’est pas une couche de maquillage que l’on va apporter à la fin du projet, mais une composante à part entière qui doit être pensée et réfléchie avant d’entreprendre les différentes IHM. De la même façon qu’avec le DDD, où les développeurs veulent être parties prenantes du projet dès le début pour comprendre les tenants et aboutissants du projet et écrire un code adapté au domaine, l’ergonome doit également être présent dès le début du projet pour imaginer les interaction de l’utilisateur et confronter ses idées avant de les mettre en œuvre.
Nathalie nous parlera également de son intégration au sein de  l’équipe de développement. Des attentes des chefs de projet qui attendent plus une validation qu’une remise en question des IHM en place à ses collègues développeurs qui dépriorisaient ses demandes au profit des corrections de bug et des ajouts de fonctionnalité ce qui ne faisait qu’augmenter la dette ergonomique.

15:05 « Avec Redux & RxJS, Angular aussi peut être hype ! »

Cliquez sur l’image pour visualiser la vidéo

Pour cette deuxième conférence de l’après-midi, retournons du côté d’Angular avec Antoine Cellier et Thomas Betous qui nous ont présenté leur retour d’expérience pour gérer les états de leur application avec Angular.
Après nous avoir rappelé le concept d’Observable central au sein du framework de Google, les deux consultants nous ont présenté les différentes étapes par lesquelles ils sont passés. Tout d’abord, ne pas gérer d’état, le code est relativement simple à écrire, mais on se retrouve vite avec de la duplication de code et des problèmes de performance quand on veut que plusieurs requêtes puissent modifier l’état de notre composant. Une première façon de simplifier cela est d’avoir des services stateful avec un seul Observable auquel on pousse des données à chaque fois qu’il le faut, ceci simplifie l’écriture de notre component, mais avec plusieurs service chacun gérant son état, on obtient rapidement un code spaghetti. Une deuxième étape serait alors de créer un service qui contiendrait l’état de tous les services. De là, on n’a qu’un pas à faire pour arriver à redux qui remplace avantageusement ce service maison. Après nous avoir présenté redux et ngrx, la bibliothèque implémentant redux pour angular, les intervenants vont finalement nous présenter la version finale de leur application.
Cette conférence est vraiment très bien pour démystifier redux en nous présentant le cheminement de pensée qui mène à l’utilisation de redux dans une application Angular.
 

16:09 « 1 year after, they understood how to code ReactJS »

Cliquez sur l’image pour visualiser la vidéo

On continue avec Redux dans cette conférence de Fabien Juif et Guillaume Crespel dans laquelle les deux développeurs nous ont présenté le cheminement de pensée qui leur a fait monter leur propre stack technique.
Tout d’abord React, la célèbre bibliothèque de composant visuel qu’ils ont allégé en se refusant d’utiliser l’état interne et le cycle de vie des composants, se contentant donc de revenir aux sources de React et ne faire que des composants simples. Avantage, il est bien plus facile de tester des fonctions pures. Et tout naturellement, on va utiliser Redux. Mais contrairement à ce qui se fait souvent, plutôt que de connecter uniquement un composant parent qui transmettra aux composants enfant les données nécessaires, on va connecter à Redux, tous nos composants ce qui évite de trop lier nos composants. Problème, si on ne stocke que les données dans le store redux, chaque composant devra faire des calculs pour savoir s’il doit se mettre à jour. Pour éviter des problèmes de performance, une première solution, serait d’utiliser reselect qui fera ces calculs pour nous, mais ça ajoute une bibliothèque à apprendre donc plutôt que de stocker uniquement les données dans redux, on va également y stocker des données précalculées pour nos vues. Question : où effectuer ces calculs ? On peut tout d’abord penser à les faire dans nos reducers, mais ces derniers n’ont accès qu’à une sous-partie du store. Il faut donc faire ces calculs dans les actions redux, la bibliothèque la plus connue pour ça est redux-thunk. Maintenant que nos reducers ne font plus grand chose, on peut utiliser une bibliothèque pour les créer et c’est le rôle de k-redux-factory une bibliothèque écrite par les deux compères. Maintenant, afin d’uniformiser le format de toutes nos actions, les deux consultants ont choisi d’utiliser redux-saga à la place de redux-thunk et k-redux-saga-testing pour tester, une autre bibliothèque développée par Fabien et Guillaume.
Pour résumé, on a React qui ne fait que de la vue, des reducers simples, un store qui gère les données, la vue et la config et redux-saga qui est en charge de toute l’intelligence de l’application. Si cette stack vous intéresse, un dépôt existe pour présenter les différents projets ainsi qu’un projet exemple pour une to do list.
 

17:11 « CycleJS, les mains dans le cambouis »

Cliquez sur l’image pour visualiser la vidéo

Pour la dernière présentation, j’ai finalement choisi de rester avec Fabien et Guillaume qui ont su me tenir en haleine lors de leur précédente présentation sur leur stack React.
Au cours de cette session interactive grâce à un petit quizz propulsé par kahoot, les deux intervenants nous ont présenté la bibliothèque cycle.js qui est spécialisée dans les composants réactifs.
Après une introduction à la légende de Zelda et à la programmation fonctionnelle réactive, nous plongeons dans cycle.js pour créer étape par étape une application qui devra permettre de faire jouer les différents facette de link pour composer un morceau de musique dans notre navigateur.
Si la prise en main de la bibliothèque est assez fastidieuse au premier abord, on sent rapidement la puissance de l’outil pour des interfaces dynamiques.
 

18:18 keynote de fermeture

Cliquez sur l’image pour visualiser la vidéo

Pour conclure cette journée enrichissante pleine de rencontres, de conférences passionnantes et de chocolatines, les organisateurs ne sont pas en reste et nous proposent de finir en beauté avec Thomas Guenoux le scénariste de la fameuse bande dessinée geek commitstrip que tout le monde connaît. Thomas nous a proposé une timeline de la journée type d’un développeur le tout décrit par ses bandes dessinées. Du réveil à 07:00 qui commence par une alerte sécurité à 06:00 le lendemain où l’on retrouve celles et ceux qui n’ont pas réussi à quitter Vim, Thomas nous fera voyager et surtout beaucoup rire.
Cette présentation mettra définitivement fin à la plus célèbre des conférences bordelaises et ne nous donnera qu’une envie, revenir l’année prochaine et pourquoi pas en tant que speaker !