Devfest Nantes 2018: Retour sur la première conférence tech de la saison

Cette année, marmelab ouvre la saison des conférences tech avec un évènement auquel nous n'avons jamais participé : Devfest Nantes 2018.

Organisé par le Google Developer Group (GDG) de Nantes et sponsorisé par Palo IT, cette septième édition a rassemblé environ 1800 participants autour des technologies de Google et du thème du spatial !

Voici une séléction des conférences auxquelles j'ai pu assister parmi les 70 sessions organisées.

Une keynote rythmée et engagée

La keynote s'est ouverte au rythme de Thunderstruck, suivi d'une vidéo montrant un décompte et un décollage d'une fusée alors qu'un astronaute en combinaison est venu planter un drapeau au milieu de la scène. Passionné à la fois par l'astronomie et le heavy metal, je n'ai été que rarement aussi bien accueilli dans la région qui héberge pourtant le Hellfest !

Le tonnerre d'applaudissement a laissé place à Christian HEILMANN, Senior Program Manager à Microsoft, qui nous a fait constater l'état du web actuel : lent, lourd, et ajouté au sommet d'une dette technique qui date des années 90.

Mais il est optimiste pour l'avenir, car selon lui il existe beaucoup d'outils disponibles pour nous aider à améliorer le web. Il a d'ailleurs invité les développeurs, novices ou non, à utiliser des IDE intelligents et à intégrer à leurs process des outils automatisés comme des linter, analyseur de code, test de performance, etc.

Christian a ensuite a présenté Webhint, un outil qui permet d'améliorer la sécurité, la performance et l'accessibilité d'une application web. Webhint peut être utilisé comme un scanner (pour tester un site en production) tout comme un analyseur de code statique, à l'instar de prettier ou eslint, pour pointer en temps réel les améliorations à apporter au code.

Enfin, il a fait référence à la Neutralité du Net, qui a été attaquée aux USA. Selon lui, c'est la responsabilité des développeurs de défendre les droits sur internet.

Une session très inspirante et motivante qui a donné le ton pour la suite des deux jours.

Aider la NASA grâce à l'analyse de séries temporelles

Pierre ZEMB et Aurélien HEBERT de OVH ont organisé un codelab, workshop de deux heures ouvert à tous, promettant à tous les participants de devenir des astronomes amateurs, même quand on habite à Brest.

Les deux passionnés, membres de l'association HelloExoWorld, tirent profit de leur expérience en Time-Series Monitoring pour analyser les données publiées par la NASA et l'ESA et espérer trouver des exoplanètes.

Le principe est simple : un satelite photographie et mesure la lumière d'une étoile régulièrement, et les data scientists étudient ensuite la variation de cette lumière pour tenter de prédire la prochaine baisse d'intensité. Si cela se vérifie et sous certaines conditions, il est probable qu'un astre gravite autour de cette étoile.

Pour ce codelab, nous avons été initiés aux outils d'analyse de séries temporelles: Warp10 et OVH Metrics, avec des petits jeux de données.

Le tutoriel rédigé par l'association existe en ligne, il est disponible pour tous les astronomes amateurs : Rediscover the known universe with NASA dataset.

Les outils d'analyse de séries temporelles peuvent effrayer plus d'un, moi y compris, mais j'ai passé un très bon moment grâce à la passion des deux intervenants. Merci à eux !

Typographie & Accessibilité

Contrairement à ce que l'on peut penser, une personne sur dix en France déclare avoir un handicap moteur, un handical visuel soit un trouble dys.

Marie GUILLAUMET, consultante en accessibilité numérique, a rappelé que l'accès à l'information et l'usage du web forment un droit fondamental inscrit dans la loi. Pour l'instant, seuls les sites livrés par les instances publiques sont concernés par les obligations d'accessibilité, mais les sites privés très fréquentés ou d'utilité publique risquent d'être concernés très bientôt.

Après ce rappel, Marie a expliqué comment la police de caractères, la taille des textes, l'espacement des lettres et des paragraphes, le contraste et les couleurs peuvent rendre inconfortable voire impossible l'utilisation d'une application web pourtant banale.

La solution à tous ces problèmes: respecter les guides et reglementations relatives à l'accessibilité numérique, à savoir le Web Content Accessibility Guidelines (WCAG) et Référentiel Général d'Accessibilité pour les Administrations (RGAA).

Parmi tous les conseils qu'elle a donné, une bonne pratique s'est imposée : mettre à disposition des utilisateurs un panel d'accessibilité leur permettant de configurer le style de la page de la façon la plus confortable pour eux.

Il est trop simple d'oublier une partie de nos utilisateurs lorsque nous sommes la tête dans le guidon et cette session a été une très bonne piqûre de rappel, pleine d'empathie.

Comment perdre sa surchage featurale ?

Toute application évolue au fur et à mesure qu'on y ajoute des fonctionnalités. Avec elles, une complexité intrinsèque à la logique métier grandit. A un certain point de son cycle de vie, il devient nécessaire de maîtriser cette complexité.

Estelle LANDRY, sur la base de son expérience pour Doctissimo et aufeminin.com, nous a expliqué les Quatre pilliers de la Simplification, et des ateliers agile pour les mettre en oeuvre :

1. Partir d'une feuille blanche et redéfinir les caractéristiques du projet, ses valeurs et les besoins utilisateurs.

   • Cover Story: Aide à imaginer ce qu'on pensera du projet quand il aura réussi
   • Fiche Persona applicatif: Définir une fiche du projet avec ses caractéristiques

2. Reprendre les fonctionnalités qui font toujours du sens et ignorer les autres.

   • Tri de carte: Catégoriser les fonctionnalités actuelles
   • Dot voting: Pour les prioriser

3. Avoir le soutien d'un expert et faire appel à un UX Designer.

   • Rencontrer les utilisateurs
   • Six chapeaux de Bono: transformer des idées en solutions planifiées

4. Eviter de toute surcharge future

   • Mettre en place des indicateurs adaptés (Hotjar, Inspectlet)
   • Systématiser la simplicité et réitérer

Une conférence très applaudie, qui vulgarise le Design Thinking et l'adapte aux projets existants.

L'énergie et l'humour d'Estelle ont propulsé cette session dans le top 10 de cette année.

Un joli template ne rendra pas votre produit utilisable

Stéphanie WALTER nous a raconté l'histoire d'un projet qui a échoué à cause d'un choix qui est encore trop souvent fait : impliquer les designers en fin de vie du projet après avoir choisi et utilisé un framework d'UI (tel que Bootstrap), pour tenter d'économiser du temps et livrer plus tôt.

Elle ne conçoit pas son travail de designer ainsi, et nous a prouvé que le travail d'un UX/UI designer engendre bien moins de coûts lorsqu'il est pris en compte dès le début de projet plutôt qu'en aval, évitant de devoir gérer une dette d'interface d'un produit.

Selon elle, idéalement le design d'une interface devrait se dérouler dans cet ordre :

• Faire de la recherche utilisateur et glaner son besoin réel
• Constuire un plan et définir le parcours utilisateur
• Dessiner les maquettes, les prototypes et les composants (le framework UI peut être choisi à cette étape)
• Décorer l'interface et enfin l'intégrer

Stéphanie ne nous aura pas laissé sans nous avoir martelé, à raison, que le design n'est pas un art et que l'expérience utilisateur est un domaine pluridisciplinaire et la responsabilité de toute l'équipe.

Une session drôle et pleine d'anecdotes croustillantes sur les déboires des designers !

Vanilla JS 2018

Matthieu LUX a partagé un défi qu'il s'est lancé: créer une version du jeu 2048 en JavaScript et sans aucune librairie. Pour corser le tout, il a décidé d'utiliser un maximum des fonctionnalités qu'offre le web moderne: ES Modules, Web Component, Web Worker, HTTP2 avec push, un state management inspiré de flux, un virtual DOM, etc.

Il nous a donc expliqué de A à Z comment il a procédé, en commençant par un constat: ES2018 tourne parfaitement sur les navigateurs récents, adieu Babel donc.

Aussi, en combinant le balises <script type="module" /> et HTTP2, qui permet d'envoyer plusieurs fichiers au navigateur sans fermer la connexion TCP/IP, Webpack a perdu sa place dans son projet.

Il nous a ensuite expliqué comment fonctionnent les Web Components et pourquoi ils sont seulement supportés par Google pour le moment, avant de les utiliser pour afficher la grille de jeu, saupoudré de CSS Grid.

Le fonctionnement de Redux peut être répliqué en 10 lignes seulement, il a donc integré un state manager avec un reducer contenant les règles du jeu dans un Web Worker avec une facilité déconcertante.

S'est alors posé un problème, comment rafraîchir la grille après un changement d'état du jeu sans avoir à réécrire tout le DOM à chaque fois ? En React et en VueJS, c'est le travaille du Virtual DOM. Qu'à cela ne tienne, il a récupéré une version de 150 lignes d'un tutoriel existant pour l'intégrer à son application

Avec l'aide des API natives, des dernières fonctionnalités de ES2018 et des récentes mises à jours des navigateurs, il a fasciné son auditoire en montrant le pouvoir du JavaScript moderne. Le code de son projet est disponible sur GitHub: Swiip/vanilla-modern-js.

Selon moi, la meilleure conférence de ces deux jours, le travail de Matthieu est impressionant.

Conclusion

Toutes les sessions de ces deux jours ne pouvaient pas apparaître dans cet article. Avec quatre tracks en parallèle, j'en ai malheureusement manqué un bon nombre, sur des sujets comme la sécurité et le DevOps notamment.

Enfin, je n'ai pas été à beaucoup de conférences qui concernaient Android, Kotlin ou Google Cloud tout simplement parce que nous n'utilisons pas ces technologies chez marmelab.

Devfest Nantes est idéal pour découvrir les outils mis à disposition par Google ou s'initier aux pratiques actuelles du web. Ici, les sujets techniques ne sont pas poussés, mais beaucoup de sujets de fond sont abordés.

Une grosse conférence française avec des sujets variés et une bonne ambiance ! Toutes les conférences seront bientôt disponibles en vidéo sur la playlist YouTube: Devfest Nantes 2018.