Best of Web 2017 — Compte Rendu
Ce compte rendu a tout d’abord été publié en interne et nous avons décidé de le partager plus largement. Nous espérons que ce dernier vous inspirera en cette rentrée de Septembre et vous permettra de faire évoluer votre stack front end.
Comme chaque année depuis maintenant 3 ans avait lieu la conférence Best of Web, à laquelle j’ai pu assister grâce à MeilleursAgents.
Cette conférence regroupe lors d’une journée les meilleurs talks de l’année des différents meetups parisiens. Talks principalement axés sur le développement front end ainsi que l’impact de l’évolution technologique sur nos métiers comme cela fut le cas lors de la keynote d’introduction réalisée par Thomas Guenoux, fondateur de CommitStrip.
Keynote — Le développeur full stack existe-t-il ?
par Thomas Guenoux
Keynote ayant pour thème principal la révolution industrielle et l’impact que celle-ci a eu sur l’évolution du monde ainsi que du travail.
On distingue ainsi quatre générations qui ont toutes été propulsées par une technologie en particulier:
- 1ere révolution industrielle: la machine à vapeur
- 2nd révolution industrielle: l’électricité
- 3e révolution industrielle: l’informatique
- 4e révolution industrielle: l’intelligence artificielle
Via l’avènement d’Internet et de l’informatique, cette troisième révolution industrielle a entrainé un libéralisme débridé qui a certes augmenté les écarts sociaux entre les populations les plus riches et celles les plus pauvres mais a néanmoins permis et permettra à une grande partie de la population de sortir de la pauvreté comme le démontre l’article suivant: Connecting everyone to internet ‘would add $6.7tn to global economy’
Le contexte économique et technologique actuel est incroyablement varié et dynamique, un contexte auquel le développeur participe désormais de façon importante et c’est lui qui peut être amené à faire la différence au 21e siècle.
En effet, le hosting et le hardware devenant une commodité, la barrière d’entrée au sein du monde entrepreneurial n’a jamais été aussi faible et le développeur doit également penser de façon entrepreneurial s’il souhaite faire la différence et développer des projets qui changeront le monde ou tout du moins une partie de la société.
De plus, les personnes ayant des connaissances en développement informatique auront un avantage certains. Cependant, le développeur full stack est de nos jours devenu un mythe tant il y a de connaissances à intégrer pour développer un projet de A à Z.
Dans une certaine mesure, on peut considérer que le développeur est un prolétaire moderne du 21e siècle qui aura un impact important sur l’évolution industrielle actuelle ainsi que les nombreux métiers qu’il changera via le développement de l’IA.
Afin de mieux comprendre ce concept, vous pouvez lire ce bel article de WIRED: The Next Big Blue-Collar Job Is Coding
Le premier métier qu’il changera pourrait d’ailleurs bien être le sien puisqu’avec l’avènement de Siri ainsi qu’Amazon Alexa récemment, nous remarquons une disparition de l’interface au profit de la voix, ce qui implique que les développeurs front end devront réinventer une partie de leur métier.
En ce qui concerne l’IA, des questions d’éthiques sont également d’actualité comme c’est par exemple le cas pour les voitures autonomes.
Lors d’un accident inévitable, est-il préférable de sacrifier les passagers ou les piétons ?
Le MIT a d’ailleurs mené une étude à travers un test machiavélique que vous pouvez faire à l’adresse suivante: Moral Machine
Comme l’illustre très bien Tim Urban sur son blog Wait but Why, l’IA devrait nous dépasser assez vite, puisqu’on estime que l’IA atteindra l’intelligence humaine d’ici 2040, soit d’ici 23 ans.
The Artificial Intelligence Revolution: Part 1 — Wait But Why
Cette évolution technologique n’ira peut être pas aussi vite mais rappelez vous qu’il y a 200 ans, nos ancêtres pratiquaient l’agriculture manuelle alors qu’elle est désormais majoritairement automatisée.
Slides: http://bestofweb.paris/talks/quel-developpeur-full-stack-pour-2020.pdf
Service-Public.fr : Accessibilité et Agilité
par Adrien Saunier
Le site service-public.fr, c’est 10 millions de visiteurs uniques par mois et plus de 178 000 pages, l’accessibilité est donc un enjeu important.
Après avoir mis en place de nombreux process, le site a obtenu le label E-Accessible au niveau 5. Afin d’obtenir ce dernier, ils ont du respecter différentes normes techniques au niveau national, le RGAA, ainsi que le WCAG au niveau international.
Ces normes comprennent de nombreuses règles, environ 130 pour le RGAA afin par exemple de permettre à l’utilisateur de naviguer en utilisant uniquement le clavier, avoir une différenciation claire des couleurs, permettre un accès rapide à toutes les fonctionnalités ou bien encore être adapté à l’usage d’un outil de synthèse vocale.
Afin de connaitre les règles à implémenter en priorité, l’équipe a tout d’abord réalisé différents personas représentant leurs utilisateurs pour mieux comprendre à quel type d’utilisateur allait bénéficier l’accessibilité mais également pour impliquer toute l’équipe prenant part au projet, tel que les PO, l’UX ainsi que les développeurs, puisque comme le rappel Adrien, la mise en place de l’accessibilité est un process long qui peut être vécu comme une douleur et il est donc indispensable d’impliquer et de sensibiliser les personnes prenant par au projet.
Il nous rappelle également qu’il est possible dès le départ d’un projet de penser à l’accessibilité et de faire évoluer la méthodologie d’implémentation au cours du projet.
Pour permettre une bonne implémentation de l’accessibilité, voici quelques recommandations à suivre:
- syntaxe HTML valide
- utilisation du site au clavier
- hiérarchisation des titres
- 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
Cette présentation fut parfaite pour commencer la journée puisqu’elle était davantage axée sur la gestion d’un tel projet que sur la mise en place vraiment technique de l’accessibilité.
SOLID principles for Front-End Developers
par Grégory Ruiz
Grégory a ensuite enchainé sur une présentation assez technique afin de nous rappeller les principes du développement orienté objet SOLID, appliqué à TypeScript, à travers la présentation d’un side project qu’il a réalisé.
SOLID signifie:
Single responsibility principle
Open-closed principle
Liskov substitution
Interface segregation principle
Dependency inversion principle
Afin d’améliorer la compréhension du code par l’équipe ainsi que sa robustesse, il nous donne quelques bonnes pratiques:
- retravailler 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
Vous pouvez retrouver le projet présenté à l’adresse suivante: https://github.com/gregoryruiz/nso
Ce fut une présentation très intéressante malgré son côté assez technique et la difficulté à lire le code présenté à l’écran. Un fond noir accompagné d’un texte assez foncé ne font pas forcément bon ménage…
Slides: https://docs.google.com/presentation/d/1NIkqWJUmye0wT5L8tuR2pxQ73dZ_nXnX3WwXtvyIkMs/edit#slide=id.p
React Storybook : Concevoir, Développer, Documenter et Débugger ses composants d’interface React
par Marie-Laure Thuret
Marie-Laure, développeuse chez Algolia, nous explique comment ils utilisent React Storybook afin d’alimenter leur documentation pour leurs composants React.
React Storybook permet de penser API first et de présenter les différents états d’un composant au sein d’un environnement de développement isolé et en hot reload. La documentation est donc vivante et elle permet d’illustrer différents cas d’utilisations en manipulant les props des composants tout en les testant.
Le Storybook d’Algolia est disponible à l’adresse suivante: https://community.algolia.com/react-instantsearch/storybook/
React Storybook est un projet Open Source, il est donc possible d’écrire des addons afin d’enrichir l’outil en fonction des besoins.
Marie-Laure a par exemple écrit un addon permettant de rédiger des tests afin de tester les composants directement au sein de React Storybook.
Vous pouvez retrouver cet addon ici: https://github.com/mthuret/storybook-addon-specifications
Ce type de documentation permet donc de débugger les composants mais également de s’y référer dès qu’on souhaite les faire évoluer.
Cette présentation fut très instructive et complète quant aux possibilités offertes par React Storybook et nous allons réaliser un POC (Proof Of Concept) chez MeilleursAgents afin d’implémenter une documentation vivante pour nos composants React.
La technique des Fab Four
par Rémi Parmentier
Rémi nous a présenté une de ses techniques afin d’intégrer des emails responsive à travers tous les clients possibles.
Il a écrit un article Medium sur le sujet qui a beaucoup attiré l’attention et c’est celui-ci qui a servi de support à sa présentation: https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848
Comme il l’a expliqué lui même, cette technique s’avère très complète mais également assez complexe à implémenter. Il reconnait lui même que celle-ci est devenu un peu obsolète par la suite puisque Gmail supporte désormais les media queries.
Ce talk fut très intéressant, en particulier la présentation de sa démarche, ce n’est cependant pas une méthode que j’utiliserais de part sa complexité.
Pour des emails simples, l’utilisation de media queries devrait suffire à supporter les principaux clients mails, dans le cas d’emails plus complexes, des frameworks tels que MJML facilitent grandement l’implémentation du responsive.
Slides: https://speakerdeck.com/hteumeuleu/la-technique-des-fab-four
Elm + Web Components = ❤
par Kévin Lebrun
Kévin, tech-lead chez Meetic, nous a présenté un de ses projets réalisé avec le langage Elm et Polymer: https://github.com/kevinlebrun/elm-polymer
Selon lui, les avantages du langage Elm sont les suivants:
- s’intègre très bien avec des projets web JS en se compilant en JavaScript
- il n’y pas d’exception en runtime et Elm détecte les inférences de type
- les performances sont très bonnes
- les changements de versions de modules sont détectés afin d’éviter les surprises de patch
- plus qu’un langage, c’est une architecture de développement
Pour moi qui ne connaissait pas ELM, ce fut une bonne introduction qui m’a donné envie d’en apprendre un peu plus sur le langage.
Faire du bruit avec Pizzicato.JS
par Alejandro Mantecon Guillen
Alejandro a mis le feu à Best of Web lors de sa présentation de l’API Web Audio et de sa librairie Pizzicato permettant de mieux interagir avec cette dernière.
Il nous a fait une démo en live avec sa guitare électrique reliée directement à son ordinateur afin d’appliquer des effets tout en jouant par dessus une track.
Ce fut une bonne introduction à la Web Audio API et ses différentes limitations, je pense donc qu’il est intéressant d’utiliser une librairie comme Pizzicato afin notamment de ne pas réinventer la roue et d’implémenter plus rapidement les solutions offertes par cette API.
Faire cohabiter React et D3.js
par Christophe Rosset
Christophe a abordé les différentes manières permettant de créer des graphs via l’utilisation de D3.js et React
Ses différentes expérimentations sont disponibles à l’adresse suivante: https://github.com/topheman/d3-react-experiments
Après avoir effectué ces différents tests, il en a déduit qu’il était plus simple et performant d’utiliser des librairies comme Victory ou Recharts qui ont très bien implémentées les principes abordés lors de son talk.
Malgré ces librairies très bien réalisées, je pense qu’il est intéressant d’apprendre les concepts de base de D3.js avant d’utiliser ces dernières afin de comprendre comment sont générés les graphes. Victory a l’air d’être une librairie très complète et je pense l’utiliser lorsque j’aurai besoin d’implémenter des graphs.
Slides: https://topheman.github.io/talks/best-of-web-2017/#/
Reverse engineering d’une API SOAP chiffrée
par Kévin Raynel
Talk très intéressant de Kévin qui nous a expliqué comment il s’est retrouvé à faire du reverse engineering afin de ne pas avoir à utiliser l’application lui permettant de consulter ses fiches de paie puisque celle-ci ne fonctionnait que sous une vieille version d’IE.
Il a pour cela utilisé Charles et effectué une attaque de type man in the middle afin d’outrepasser l’encodage RSA entre le client et serveur en utilisant les clés d’authentification qu’il a pu retrouver au sein de l’app en décompilant le code .NET avec Reflector.
Ce qui lui a permis d’utiliser l’API et donc de récupérer ses fiches de paie sans avoir à lancer une machine virtuelle avec une ancienne version d’IE.
Créer une expérience WebVR sur toutes les plateformes
par David Rousset
David, développeur évangéliste Microsoft nous a présenté son framework Babylon.js développé en collaboration avec David Catuhe.
Il s’agit d’un framework permettant de réaliser des scènes 3D via l’utilisation de WebGL et Javascript, ce qui permet entre autre de créer des expériences VR pour le web.
Voici quelques exemples d’expériences VR réalisées avec Babylon.js:
http://david.blob.core.windows.net/babylonjs/SponzaVR/index.html
http://www.makemarshome.com/recruitment/assessments/rover?vr
Et pour plus d’informations sur WEB VR, rendez-vous ici: https://webvr.info
Présentation qui malgré le sponsoring à outrance de Microsoft fut très intéressante et m’auras permis de découvrir les possibilités offertes par la VR sur le web.
Tour d’horizon des 3 grandes méthodologies CSS
par Jonathan Verrecchia
Jonathan s’est penché sur les différentes méthodes d’implémentation du CSS afin de résoudre le principal problème de ce dernier qui est son imprédictibilité.
En effet, comme il le fait remarquer, il est très difficile de connaitre la modification apportée par une classe rien qu’en la lisant et quand bien même nous recherchons cette classe au sein du code CSS, nous ne sommes pas à l’abri de la trouver à différents endroits et celle-ci peut très bien être écrasée par un ciblage plus précis.
Pour y remédier, Jonathan nous propose 3 grandes méthodologies:
- une méthodologie de nommage, tel que BEM, SUIT CSS ou encore SMACSS afin d’éviter au maximum le problème lié au ciblage
- CSS in HTML où une classe représente une règle en CSS.
Par exemple, <div class=’fl-r bgc-red m-b-20'> représente un élément en float right, background red, et margin-bottom à 20px. Le HTML est donc alourdit mais on évite au moins d’écraser les classes via l’utilisation d’un sélecteur plus fort. Des frameworks comme Tachyons, Basscss, et Atomic CSS appliquent cette méthodologie. - CSS in JS, apparu récemment avec notamment React, permet d’isoler le style par composants via l’utilisation de librairies comme Glamourous ou encore Styled-Components qui à l’aide de Webpack vont permettre de créer un style lié au composant
Son talk étant très bien documenté et illustré, il me semble être une bonne base à laquelle se référer lorsqu’on hésite entre ces différentes méthodologies lors du lancement d’un projet.
Vous pouvez retrouver les slides de ce talk à l’adresse suivante: https://docs.google.com/presentation/d/1FbOh7Yv5F7LTov-ptRGbcA3wOZqNykUdZXT3vqok9yk/edit#slide=id.g13631ed28b_0_242
Il a également créé un tutoriel permettant d’appréhender pas à pas la nouvelle stack front moderne: GitHub — verekia/js-stack-from-scratch: 🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
Construction d’une “Raspberry Pi home alarm” en moins de 3h
par Raphaël Dubigny
Raphaël nous a expliqué pourquoi et comment il a réalisé son propre système d’alarme grâce à un Raspberry Pi et quelques heures de travail.
Pour lui, les systèmes d’alarmes s’avèrent cher et peu modulables sans qu’on ne sache réellement s’ils respectent notre vie privée.
Son but était donc de réaliser un système d’alarme pour moins de 250 euros, permettant de prendre une photo dès l’intrusion d’un cambrioleur et également de lui envoyer un SMS dès lors que son appartement serait cambriolé.
Pour cela, il a utilisé un Raspberry Pi équipé d’un détecteur de mouvement et d’une caméra infrarouge. Afin d’envoyer les SMS, il a utilisé Twillio ainsi que son forfait Free qui bénéficie d’une API HTTP.
Il a beaucoup appris en réalisant ce système puisqu’il a par exemple du mettre en place un multithread afin d’uploader les photos prises sur Google Drive et il a également découvert le reactive programming.
Il a aussi mis en place une détection via bluetooth afin de bloquer l’envoi de photos lorsqu’il rentre chez lui.
Il souhaite maintenant faire évoluer son alarme en ajoutant un système de dissuasion sonore à l’aide d’une sirène ainsi qu’en se connectant à une ampoule Philips HUE afin d’éclairer l’entrée lors d’une intrusion.
Son projet est disponible en Open Source à l’adresse suivante: GitHub — rdubigny/home-alarm: Home Alarm for Raspberry Pi 2 B
Slides: https://docs.google.com/presentation/d/18zIorX9w1p3RCLCGvQue5aQIiPcNORaKaz5cihosQfE/edit#slide=id.p
Comment tirer le maximum de vos contributeurs
par Vincent Voyer
Vincent, développeur chez Algolia, a clôturé cette troisième édition de Best of Web en nous rappelant les éléments essentiels au bon fonctionnement d’un projet Open Source sur Github.
Afin de simplifier la tâche des contributeurs au maximum, il est utile de suivre les recommandations suivantes:
- rédiger un très bon readme afin d’introduire le projet et expliquer comment contribuer est un bon point départ
- donner des guidelines pour les issues via l’utilisation d’un template d’issues
- répondre de façon courtoise en expliquant correctement afin de ne pas décourager les contributeurs
- le projet doit être simple d’accès et lançable en une seule commande afin que le contributeur puisse rapidement commencer à hacker et prototyper
- tester les ajouts via de l’outillage moderne (Jest, Travis, …)
- linting et formatage via Eslint et Prettier et utilisation de pre commit hook
- documenter via JS Doc et Metalsmith
- Pull Request et tests via Travis et Netlify
- pour la release, une commande interactive unique pour la publication
- distribution du code via NPM, JS Deliver
Ces quelques règles peuvent paraitre anodines et certaines relèvent du bon sens mais Vincent ayant beaucoup de projets Open Source à son actif, elles me semblent être un bon point de départ lorsqu’on souhaite inviter des personnes à collaborer sur un projet.
Slides: https://docs.google.com/presentation/d/1PpEt4w52T12TV0DPlgW2u7WRECjYFiVPeossxjRAXbg/edit
