Conférence Best of Web 2017

La Keynote

Thomas Guenoux (@thomasgx), co-fondateur de @commitStrip a introduit cette journée en abordant l’avenir du métier de développeur. Il note la fin du développeur full stack, avec la spécialisation des compétences dans différents domaines que sont l’IoT, l’ops, la sécurité, la blockchain, le machine learning, les bots, l’IA,… Il situe l’époque actuelle dans la quatrième révolution industrielle, celle qui amènera au développement d’une intelligence artificielle qui dépassera celle des Hommes, et qui pourrait à terme mettre fin à des métiers comme celui d’avocat ou de médecin.

On estime à 2040 la date à laquelle les machines atteindront le niveau d’intelligence des hommes. Thomas pose alors la question de la responsabilité du milieu de l’informatique et de l’éthique nécessaire pour les choix qui devront être faits. Il estime qu’une majorité des développeurs actuels se spécialiseront dans le domaine de l’intelligence artificielle dans un avenir proche et appelle à se positionner en développeur universel, un développeur qui saura penser à sa place dans le monde, à ses actions, aux valeurs qu’elles peuvent créer mais aussi aux éventuelles conséquences néfastes qui pourraient en découler.

La technique des Fab Four

Rémi Parmentier (@HTeuMeuLeu) est intégrateur HTML et CSS. Il a eu à se confronter à l’édition d’un email en Responsive Design, qui devait être rendu dans la plupart des clients mails. Sa première idée fut d’utiliser les Media queries, mais voilà ce qu’il a remarqué :

Il s’est alors demandé si l’usage de flexbox pouvait être une solution. Cependant, le rendu dans Gmail était désastreux.

C’est en remarquant la priorité de ‘min-width‘ appliquée à un même élément dans le cas suivant :

• min-width: 480px
• width: 320px
• max-width: 160px

dont la taille rendu était de 480px qu’il a créé la technique des « Fab Four« .

Cette technique s’écrit de la manière suivante :

Elle est utilisable sur la plupart des clients web.

Vous pouvez retrouver ses diapositives sur https://speakerdeck.com/hteumeuleu

SOLID principles for Front-End Developers

Grégory Ruiz (@gregoryruiz) nous parle du design orienté objet appelé SOLID. Il travaille sur un projet front-end impliquant beaucoup de monde et sur lequel certains départs ont amené à perdre la maîtrise d’une partie du code. Grégory a dû trouver des solutions pour améliorer la cohérence du code au sein de l’équipe, notamment :

• re-travailler les tests
• créer une documentation vivante
• revoir le nommage du code
• ré-organiser le code
• appliquer des designs patterns
• mettre en pratique certains principes : KISS, DRY, YAGNI,… et SOLID

Grégory nous livre son retour d’expérience de la mise en pratique de SOLID. Grâce à l’usage de Typescript, il a réussi à respecter ses principes en s’inspirant des design patterns de Java et en utilisant en particulier les interfaces et les classes abstraites. Vous pourrez trouver davantage de précision sur les principes SOLID sur cet article de blog : http://blog.engineering.publicissapient.fr/2011/07/18/les-principes-solid/.

React Storybook : Concevoir, Développer, Documenter et Débugger ses composants d’interface React

Marie-Laure Thuret (@mlthuret) nous présente un outil qui lui est devenu indispensable aujourd’hui en tant que développeuse ReactJs chez Algolia, il s’agit de React Storybook.

Cet outil :

• offre un environnement de développement des composants React totalement isolé, en hot reload
• du fait de l’isolement du composant, il favorise le développement en API-first
• permet également de tester le composant et de manipuler les props pour voir les effets sur le rendu
• peut être mis en ligne, et offrir une documentation vivante. C’est le choix qu’à fait Algolia, à titre d’exemple voici le lien vers leur storybook : https://community.algolia.com/react-instantsearch/storybook/

Marie-Laure nous a expliqué qu’une version est également en développement pour VueJs.

Service-Public.fr : Accessibilité et Agilité

Adrien Saunier (@adriensaunier) est développeur sur le projet www.service-public.fr. Ce site recense 10 millions de visiteurs par mois et plus de 178 000 pages, pour autant il a reçu le label e-accessible. Obtenir ce label, c’est respecter les directives en vigueur : internationales avec WCAG, nationales avec RGAA qui contient des tests avec plus de 130 critères. Il s’agit en particulier de permettre de naviguer en utilisant uniquement le clavier, d’avoir une différenciation claire des couleurs, de permettre un accès rapide à toutes les fonctionnalités ou bien d’être adapté à l’usage d’un outil de synthèse vocale.

Adrien a expliqué comment le projet s’est adapté pour permettre la mise en place des contraintes induites par une bonne accessibilité et pour évoluer en les conservant. Il s’agit principalement d’impliquer tout le monde : PO, UX, développeurs, testeurs pour que chacun se sente concerné et surtout pour anticiper les implications des contraintes à respecter et éviter les bugs qui sont sources de douleur. Des experts sur le sujet sont également intervenus, et ont intégré l’équipe.

Adrien a présenté quelques points qu’il est bon de suivre :

• une syntaxe HTML valide
• l’utilisation du site au clavier
• la hiérarchie des titres
• avoir des noms de pages signifiants
• ne pas avoir une information portée uniquement par les couleurs
• avoir des images avec une alternative textuelle qui les décrivent
• permettre de zoomer, dé-zoomer sans perte d’information

Elm + Web Components = <3

Kévin Lebrun (https://github.com/kevinlebrun), tech-lead chez Meetic, s’est intéressé à Elm. Ce langage vise à faciliter le développement fonctionnel dans le Web, avec pour avantages :

• intégration avec des projets web JS : se compile vers javascript
• pas d’exception en runtime : lors de la compilation, il détecte les inférences de type
• de très bonnes performances :
  
• détecte les changements de version des modules utilisés pour éviter les « surprises » de patch
• plus qu’un langage, il définit une architecture de développement

Kévin nous a montré le développement d’un petit compteur ainsi que les interactions Elm, Polymer, et Vue.js.

Faire du bruit avec Pizzicato.JS

Impressionnante présentation d’Alejandro Mantecon Guillen (@alemangui), il a joué de la guitare pour montrer les capacités de sa bibliothèque Pizzicato.JS. En utilisant l’API de Web Audio disponible sur les navigateurs, la bibliothèque :

• permet de récupérer des sons (via un fichier, le micro ou l’entrée audio)
• de transformer le son à la manière d’une pédale d’effets
• de jouer plusieurs pistes en parallèle !

Un bon moyen de s’amuser, aussi bien en musique qu’en informatique, d’autant plus que l’usage est facile et le rendu de qualité.

Faire cohabiter React et d3.js

Christophe Rosset (@topheman) nous a présenté comment combiner l’usage de d3.js, qui permet de générer des graphes de données dynamiques et de React. Les approches des deux bibliothèques sont très différentes car d3 récupère les données fournies en entrée et crée des mutations sur le DOM alors que React ne manipule jamais directement le DOM. On trouve donc deux approches pour le rendering :

• qu’il soit fait par d3 en l’adaptant pour qu’il n’interfère pas avec le React lifecyle
• qu’il soit fait par React en re-implémentant le travail fait par d3 sur le DOM (en wrappant svg dans jsx)

Vous pouvez trouver toutes les expérimentations de Christophe sur son repo Github : https://github.com/topheman/d3-react-experiments.

Reverse engineering d’une API SOAP chiffrée

Kévin Raynel (@kraynl) a été confronté à un logiciel de système de paie bien peu pratique, fonctionnant uniquement sous Windows et en a eu assez de passer par une machine virtuelle pour récupérer ses bulletins.

C’est en sniffant les requêtes du logiciel vers l’API qu’il a remarqué qu’elles étaient en HTTP, avec un système d’authentification custom. Alors, il s’est dit qu’il allait pouvoir faire de la ‘rétro-ingénierie’ pour essayer d’utiliser l’API sans passer par le logiciel. Son talk nous explique comment, en sniffant les requêtes avec Charles, en jouant le rôle du « man in the middle » pour outrepasser l’encodage RSA et en décompilant le code .Net avec reflector, il a pu récupérer ses bulletins de paie en un clic !

Créer une expérience WebVR sur toutes les plateformes

David Rousset (@davrous) développeur et évangéliste Microsoft dans la réalité virtuelle, nous présente le framework dont il est le co-auteur avec David Catuhe (@deltakosh) : babylon.js. Ce framework est un moteur 3D basé sur WebGL et Javascript et fournit une API qui permet de créer des objects, des scènes et d’interagir avec l’environnement virtuel. Le point fort de l’usage de cet outil pour créer des environnements virtuels est qu’il se déploie en ligne. Il est donc disponible sur toutes les plateformes et permet de toucher une base d’utilisateur très vaste.

La bibliothèque met également à disposition un outil pratique pour s’amuser avec les exemples de babylon, il s’agit d’un IDE dans le navigateur qui permet d’afficher le rendu 3D : https://www.babylonjs-playground.com/.

Vous trouverez sur le site www.babylonjs.com plein d’exemples et de documentation sur l’usage du framework.

Tour d’horizon des 3 grandes méthodologies CSS

Jonathan Verrecchia (@verekia) nous présente les trois grandes méthodes actuelles pour développer son style en CSS :

1. CSS en CSS
   Le plus simplement du monde, utiliser CSS pour faire du CSS, mais pas sans les outils actuels, David nous donne quelques conseils :
   • pré-processeur : SaSS, qui est le plus répandu, pour faciliter l’écriture, utiliser des variables,…
   • conventions de nommage : BEM, SUITCSS ou bien SMACSS
   • post-precesseur : PostCSS, qui permet de rajouter des plugins, vous pouvez les trouver sur ce site : http://postcss.parts/
   • « nettoyeur » : purifyCSS, qui récupère uniquement le contenu CSS qui est utilisé dans l’application en analysant le code
2. CSS en HTML
   Le CSS est écrit en inline, mais avec des classes utilitaires et des variables. On trouve trois principales bibliothèques : Tachyon, Basscss et Atomic CSS (la plus répandue).
   Il s’agit d’associer une classe à un élément pour un règle (de type margin-left par exemple). Les avantages sont le poids du CSS qui est constant et le développement rapide.
   Voici un exemple Atomic, représentant un div de type inline-box, de largeur 33%, padding de 20px et ayant une background-color valant #0280ae.5 : 

   [xml]<div class="IbBox W(1/3) P(20px) Bgc(#0280ae.5)"/>[/xml]

3. CSS en JS
   Ce sont des feuilles de style que l’on peut importer dans des composants, tout comme le javascript. On trouve plusieurs outils, notamment Webpack qui permet de résoudre les imports CSS avec css-loader ou styletron. Pour React, on trouve également d’autres outils comme styled-components ou glamorous.

En résumé, Jonathan donne ces conseils pour le choix de la méthode :

• si l’on ne développe pas en javascript : CSS in CSS
• pour un projet rapide : CSS in HTML
• pour la majorité des cas : CSS in JS

Construction d’une « Raspberry Pi home alarm » en moins de 3h

Raphaël Dubigny (@rdubigny) vivait dans un appartement dont la capacité de la porte d’entrée à empêcher l’intrusion laissait à désirer. En rassemblant chez lui ce qui pouvait lui servir, il a trouvé un Raspberry Pi, une caméra infrarouge, et quelques câbles. Il nous explique dans ce talk comment il a mis en place une alarme connectée dans son appartement.

Au-delà de son projet, qui lui a permis tout de même de mettre en place un détecteur de mouvements sur la porte, de prendre des photos du suspect, de stocker ces photos sur GDrive, d’activer une alarme, Raphaël nous montre l’intérêt qu’il a trouvé à développer un projet personnel. Non seulement il en retire de la fierté, mais aussi tout ce qu’il a appris comme le python, la programmation réactive ou bien encore la soudure. Pour motiver son public a faire la même démarche que lui, il explique dans un de ses derniers slides comment se lancer dans un projet personnel :

• arrêter avec les excuses du type : « j’ai pas le temps »,…
• résoudre des problèmes utiles
• itérer sur des « Petits Trucs Moches Qui Marchent » (PTMQM)
• aller en production au plus vite (1h)

D’ailleurs, en y regardant de plus près, on peut également penser à ces principes pour ses projets professionnels.

Comment tirer le maximum de vos contributeurs

Vincent Voyer (@vvoyer), d’Algolia, nous explique comment il attire des contributeurs sur ses projets, aussi bien privés que publics et comment il met au maximum leurs compétences à profit. Il explique notamment la méthode mis en place chez Algolia lorsqu’un utilisateur crée une « issue ». Une série de questions lui ai posée dans le template de l’issue, afin de préciser au maximum le problème :

• Do you want to request a feature or report a bug?
• Bug: What is the current behavior?
• Bug: What is the expected behavior?
• Bug: What browsers are impacted? Which versions?
• Feature: What is your use case for such a feature?
• Feature: What is your proposed API entry? The new option to add? What is the behavior?
• What is the version you are using? Always use the latest one before opening a bug issue.

D’autre part, il précise de garder en tête les principes suivants lors des réponses aux contributeurs :

• l’utilisateur contribue : apprécier sa bonne volonté
• si l’utilisateur est mécontent, éviter à tout prix la confrontation
• ne pas faire d’hypothèse ou de supposition a priori sur l’utilisateur ou bien le bug ou la feature
• essayer d’être le plus clair possible, car la communication écrite est complexe
• supposer a priori qu’une issue est un problème à résoudre

Appliquer ces principes permet une forte implication des contributeurs et un gain d’efficacité.

Conclusion

Best Of Web nous a offert une édition riche tant en qualité des talks qu’en variété des sujets. Une bonne année pour une conférence qui a su trouver sa place dans les rendez-vous annuels des technologies du Web à Paris.