DevFest Nantes 2019 - une édition Rock'n'Roll (Première journée)

Sortez les guitares! Cette année, le DevFest s'anime autour du Rock 'n' Roll!

Le DevFest Nantes ? C'est une conférence technique destinée aux développeurs qui a lieu chaque année. Elle s’adresse aussi bien aux étudiants, aux professionnels ou tout simplement aux curieux technophiles.

Le hall d'accueil de la cité des congrès - crédits Rémy Chautard

Keynote d'ouverture

La première conférence de la journée est introduite par Moment Factory, qui est une entreprise spécialisée dans la réalisation de spectacles de divertissement multimédia pour divers clients tels que des artistes, des monuments historiques et autres évenements artistiques.

Son coeur de métier repose sur des effets de lumières, de musiques, de fumée et autres artifices. L'intervenant, directeur artistique de l'agence, a bien insisté sur la coordination qui se doit d'être parfaite entre les métiers de l'informatique et de la scénographie - en effet, pas le droit à l'erreur en plein direct!

Bien qu'intéressante, cette intervention n'a pas été jugée très pertinente par rapport au Devfest par la plupart des participants.

Vidéo de la keynote

Le web, ses frameworks et ses standards : déconstruire pour mieux (re)construire

Hubert Sablonnière - @hsablonniere

Bien introduite sous la forme de thérapie, cette conférence porte sur un retour aux sources que les devs webs devraient suivre. Il rappelle qu'aujourd'hui, les développeurs ont tendance à prioriser leur propre expérience de développeur au détriment de celle des utilisateurs.

Hubert Sablonnière souligne le fait qu'il trouve futile la guerre que se livre les devs front-end en faveur de leur framework JS favori (React, Vue et Angular principalement), et que l'on perd trop de temps et de ressources à migrer une interface d'une techno à une autre. Il critique également le trop fort couplage des différents services qui cohabitent dans nos applis web d'aujourd'hui.

C'est ainsi qu'il nous parle de Web Components en nous rappelant que le web nous propose déja des outils faciles à découpler pour construire le front d'un appli web. Visiblement c'est ce qu'il utilise dans son entreprise Clever Cloud.

Vidéo de la conférence
Slides de la conférence

Building a complex Application with Web Components and LitElement

Justin Fagnani - @justinfagnani

Justin Fagnani travaille à Google et est responsable des projets Polymer et LitElements.

A travers cette conférence très technique, il nous démontre en moins d'une heure comment construire des composants web stateful avec l'api native JS des web elements à l'aide de la libraire LitElements qui est une extension de cette dernière.

Sa présentation nous a montré que les progrès effectués sur les web components continuent mais que nous sommes encore loin d'avoir une API totalement native dans les navigateurs car il y a toujours besoin de librairies externes assez rapidement.

Vidéo de la conférence

Interactive web animation with SVG

Cassie Evans - @cassiecodes

Présentée juste après un copieux déjeuner, cette conférence avait pour objectif de nous surprendre sur la qualité des animations que de simples SVG peuvent créer.

Cassie Evans nous rappelle tout d'abord les bases: au fond, qu'est-ce qu'un SVG? Tout simplement une image représentée par un language markup (les SVG aussi ont un DOM!) et des maths, beaucoup de maths! De plus, les SVG ne possèdent pas de notion de z-index, il faut donc les faire apparaître dans un ordre précis à l'intérieur du DOM de la page si vous voulez les superposer. Faire des animations en utilisant plusieurs SVG à la fois requiert donc de la patience, car il faut aussi jouer avec des delais successifs pour leur donner un semblant de vie réaliste.

Pour animer ses SVG, elle nous montre une petite démo à travers laquelle elle utilise la propriété css transform-box. Malheuresement, cette propriété n'étant pas supporté sur certains navigateurs (coucou IE & EDGE), elle recommande d'utiliser une librairie JS telle que:

La plupart sont sous license MIT mais certaines proposent également des fonctionnalités premium payantes. De son côté, elle utilise principalement GreenSock.

Cassie Evans durant sa présentation - crédits Rémy Chautard

Cassie finit sa présentation en nous montrant une démo d'animation de SVG qui repose sur de la reconnaissance faciale: ses animations s'adaptent en fonction de l'expression du visage détecté. Cette fonctionnalité peut simplement être activée sur Chrome et vous pouvez jouer avec leur API. Plutot ludique et impressionnant! Cependant elle rappelle que ces animations sont très coûteuses en ressources client.

Vidéo de la conférence
Slides de la conférence

Success in Programming

Frederic Harper - @fharper

Cette conférence est ce que le DevFest appelle un "discovery". C'est-à-dire une présentation pas spécialement technique mais qui nous présente un autre aspect de notre métier et nous invite à réfléchir.

Avec son accent Canadien et son humour, Frederic vient nous parler pendant 50 minutes de notre personal branding. Le personal branding, c'est le fait de développer et maîtriser son image, sa carrière, ses objectifs, d'être heureux dans ce qu'on fait.

En se basant sur son expérience, il part du constat que nous avons tous une image et que les gens ont une opinion sur nous. A partir de là, c'est à nous de voir si l'on souhaite faire évoluer l'image qu'on reflète. Pour cela, il insiste sur le fait qu'avant tout, il faut faire les choses qui nous rendent heureux. Il nous parle également du fait que cette image est importante dans notre carrière et qu'on peut la maîtriser par exemple en tenant un blog, en participant (en tant que speakeur) à des conférences, etc.

Vidéo de la conférence
Slides de la conférence

Escape Game

Pendant un petit interlude de 20 minutes, un atelier nous a proposé un mini-escape game sur le thème du DevFest, à savoir le Rock'n'roll. Plutôt bien conçu, il nous a donné du fil à retordre! Nous n'avons malheuresement pas réussi à le finir à temps, bloqués par une énigme sur la musique. Il fallait trouver une combinaison de chiffres à l'aides de notes de musiques produites par un xylophone. On pensera à amener un collègue avec l'oreille musicale la prochaine fois ;)

Promouvoir son projet open-source comme une rock star !

Thomas Betous & Franck Abgrall - @tbetous & @franckabgrall

Pour ce nouveau discovery, Thomas et Franck viennent, sous le format d'une discussion assez rythmée et drôle entre eux, nous présenter comment promouvoir efficacement son projet open-source.

Premièrement, ils insistent sur le faire que le README du projet est très important. Il doit contenir les informations principales sur votre projet : ce qu'il fait, comment on l'utilise (avoir une bonne documentation, quitte à ce qu'elle soit externalisée), sa licence, une démo, etc. Il doit également attirer l'oeil en jouant sur les alignements, les titres, les emojis, ... Mais il ne faut pas non plus en abuser! Le choix du nom est également très important, il ne faut pas essayer de mettre trop de buzzwords dedans.

Quand votre projet est prêt, avant de communiquer publiquement, ils nous conseillent d'en parler autour de nous afin d'avoir des premiers retours et des premières stars sur Github (cela rassurera les futurs utilisateurs). Pour la communication publique, ils conseillent de faire toute la communication le même jour avec pour but de "faire le buzz" et si possible de se retrouver dans les trendings de Github!! Pour cela, il faut multiplier les moyens de communications: réseaux sociaux (vous pouvez créer un compte Twitter pour votre projet), écrire des articles sur plusieurs sites, créer des vidéos ou encore le présenter à des conférences.

Page des trendings de github

Et enfin, la dernière étape, qui est peut-être la plus compliquée, c'est de conserver les utilisateurs. Le projet doit être mis à jour, il faut répondre aux issues github, remercier les contributeurs, inciter aux contributions (notamment en utilisant les labels github).

Vidéo de la conférence
Slides de la conférence

Le futur de la gestion des dépendances Node

Fabien Juif - @fabienjuif

Comme introduction, Fabien nous présente les 3 soucis principaux des gestionnaires de dépendances node: la résolution instable, l'espace disque utilisé et les I/O. Et comment npm (via tink npm, la v8 de npm), yarn (via sa version 2) et pnpm essaient d'y répondre.

Pour la résolution instable, cela a déjà été solutionné il y a quelques temps avec la mise en place des fichiers lock qui permettent de s'assurer que les versions utilisées par tous les membres d'un projet soient exactement les mêmes.

Pour le souci d'espace disque (et oui, tout le monde sait que le dossier node_modules est énorme...), voici les solutions proposées par les gestionnaires:

  • pnpm propose d'avoir un cache partagé. En gros, vos dépendances seront installées dans un cache et votre dossier node_modules fera des liens symboliques vers ce cache. Ainsi, des dépendances utilisées dans plusieurs projets ne seront installées qu'une fois dans ce cache partagé.
  • yarn v2 quant à lui, il propose plutôt un système de cache localisé (il est également possible d'activer le cache partagé via une option). C'est-à-dire que les dépendances sont toujours installées dans le dossier node_modules mais le but de yarn c'est qu'on puisse, à terme, avoir du "zero install". On clone le projet et on fait yarn start et c'est parti. Cette solution n'est pas magique et donc elle demandera surement de devoir pusher les dépendances dans le repository... Et donc pour éviter d'avoir à push plein de petits fichiers, pour yarn, les dépendances seront des .zip.
  • tink npm propose lui aussi le cache partagé. Cependant, tink hashera les dépendances. Le but étant que le moteur Node puisse les retrouver plus rapidement et à terme, ils souhaiteraient également que lors d'une mise à jour d'une dépendance, on ne télécharge que les "diffs" et non plus la dépendance en entier.

Fabien Juif durant sa présentation - crédits Rémy Chautard

En enfin, pour les I/O, voici les solutions proposées (l'idée étant d'éviter d'utiliser les node_modules):

  • pnpm : pas de solution
  • yarn v2 : ils souhaitent surcharger le node.resolve en utilisant le fichier .pnp.js qui indiquera à node directement où aller chercher les dépendances zippées, sans les dézipper.
  • tink souhaite remplacer node en le wrappant. Il mock le module fs. Quand on va souhaiter appeler une dépendance, il va directement indiquer à node où est la dépendance dans le cache partagé.

Les 2 projets qui proposent / proposeront des solutions à toutes ces problématiques sont donc yarn v2 et tink npm. Actuellement, le projet yarn v2 est bien avancé. Par contre, tink npm, qui est la version 8 de npm (nous sommes aujourd'hui en version 6) avance moins bien. La personne en charge du développement est partie et donc le projet a encore beaucoup de bugs qui ne sont pas résolus.

Vidéo de la conférence

Le sommeil, à la recherche du temps perdu

Benoît Giraudou - @joowgir

Coder, c'est bien. Dormir, c'est encore mieux! On oublie souvent l'importance d'avoir un bon sommeil pour être productif dans la journée. Benoît commence sa présentation en nous vulgarisant les 3 phases principales qui régissent notre sommeil:

  • Sommeil léger: une mémoire vive de la journée à décharger (hippocampe)
  • Sommeil profond: un disque dur où l'on enregistre les données (cortex)
  • Sommeil paradoxal: le moment où l'on rêve et ressasse les émotions de la journée (connexions synaptiques)

Selon lui, et les études qu'il cite, il faut entre 7 et 9 heures de sommeil et toujours dormir aux mêmes heures, même le weekend pour optimiser notre productivité.

Il finit ce quickie en nous citant quelques petites choses à éviter avant d'aller rejoindre les bras de Morphée:

  • L'alcool
  • La caféine
  • La lumière bleue

Vidéo de la conférence
Slides de la conférence


La journée se termine en beauté avec un repas et une after party organisés dans la cité des congrès. Au programme: des crèpes et du rock !

La suite de l'évènement est disponible par ici.