Retour sur la Best of Web 2017
Vendredi 9 juin, la Best of Web s’est installée pour la 3e année dans la Grande Crypte de la rue Boissière à Paris. Le projet : “19 meetups web parisiens se réunissent pour proposer un Best Of de leurs talks de l’année, ainsi que quelques inédits”.
Vendredi 9 juin, la Best of Web s’est installée pour la 3e année dans la Grande Crypte de la rue Boissière à Paris.
Le projet : “19 meetups web parisiens se réunissent pour proposer un Best Of de leurs talks de l’année, ainsi que quelques inédits”.
Le jeudi, était proposée une journée de formation en supplément à laquelle nous n’avons pas participé. L’ambiance est plutôt joyeuse et la bonne humeur de Cyril Balit, le présentateur/ambianceur du jour y est probablement pour quelque chose.
La journée est rythmée par des séries de 2 ou 3 talks d’une demi-heure plus ou moins techniques mais toujours pertinents dont voici un petit résumé :
9H : Thomas, fondateur de KRDS et plus “sérieusement” de CommitStrip nous emmène pour un cours accéléré sur les révolutions industrielles. La punchline du jour : “Le full-stack est mort”. Qui peut, en 2017, prétendre connaître toutes les stacks ? à part moi.
De nos jours tout devient smart, on rajoute du software partout et la tendance est vers l’IA. Thomas prédit donc que tous les métiers d’analyse (médecin, avocats) sont voués à disparaître face au big data couplé à l’lA. Les développeurs front pourraient aussi disparaître si la mouvance des assistants voix prenait le dessus sur les interfaces graphiques.
En 2040, l’intelligence artificielle générale (AGI) aura, selon certains, atteint le niveau humain. La quatrième révolution industrielle sera celle de l’intelligence artificielle, reste à savoir si celle-ci est déjà engagée !
la video du talk & support
9H30 : Adrien nous parle d’un sujet trop peu pris en compte : L’Accessibilité.
Après avoir travaillé sur le site du service public, il nous fait part de son retour d’expérience et de ses conseils pour tout développeur, et au-delà, tous les acteurs IT. Si on réduit souvent l’accessibilité aux handicaps moteurs “chaise roulante/cécité”, c’est pourtant à tous qu’elle est destinée. Le premier intérêt est de rendre accessible les interfaces à chacun, que l’on soit invalide, en état de fatigue avancée ou tout simplement impatient (ça arrive non ?). Pour cela, le plus important est sûrement d’évangéliser des notions sur l’accessibilité afin de s’assurer de la bonne compréhension par les sponsors du projet. Les équipes doivent travailler ensemble, en amont, afin de penser dès le départ à cette notion.
Les points principaux d’attention seraient :
- un HTML valide
- parcours du site sans souris (au clavier)
- respect d’une hiérarchie
- nom de pages significatifs
- pas d’informations uniquement par couleurs …
A savoir qu’il existe une norme de principes WCAG et de tests RGAA qui sont d’excellentes sources.
la video du talk & support
10H : Présentation des principes SOLID avec Gregory qui nous fait part de son REX sur une grosse migration JS réussie en partie grâce à ces notions. On retiendra d’abord les grands principes KISS et DRY, les bons nommages de variables qui peuvent déjà éviter beaucoup de problèmes mais le SOLID est ici le sujet avec 5 principes liés :
- Single responsability principle : 1 fonctionnalité et c’est tout
- Open close principle : code fermé aux modifications mais ouvert à l’extérieur par extension pour modifier le comportement
- Liskov substitute principle : ne pas changer le comportement principal ou alors il faut faire plus d’abstraction
- Interface segregation principle : découper l’interface pour ne pas surcharger inutilement
- Dependency inversion principle : utiliser l’injection de comportement par dépendance
11H00 : Marie-Laure nous présente un outil pour React sur lequel elle contribue activement : React Storybook. Ce projet est lié à React mais pourrait (en théorie) être décliné pour tout type de framework front. Il permet d’avoir une librairie visuelle des composants, de tester les actions indépendamment et de faire une documentation active.
Le principe : API First, live documentation.
la video du talk & support
11H30 : Rémi nous présente sa technique des Fab Four pour des emails responsives sans media Queries. Les services de mails en ligne posent de nombreux problèmes liés à leurs limitations des CSS.
Il est difficile de trouver une solution unique tant chaque système est indépendant, possède ses propres règles et communique très peu dessus (ou mal).
Il nous propose donc son Fab Four (et oui, comme les Beatles)
- min-width
- max-width
- width
- calc()
Pour trouver la solution “ultime”, il faut se rendre sur le blog de Rémi.
la video du talk & support
12h00 : Petit cas d’étude avec Kevin qui nous parle de la création de composants Elm, ici avec Polymer.
Elm est un langage fonctionnel qui n’a pas de valeur null, pas de boucle, pas d’état, tout est récursif. Le but étant de passer par des fonctions pour mettre à jour un état, une donnée. Redux par exemple est inspiré du mode de fonctionnement de Elm. Elm est ensuite transpilé en JS pour fonctionner dans le navigateur.
la video du talk & support
13H30 : Pour nous réveiller après un bon buffet, Alejandro nous a concocté un talk électro-rock avec sa surprenante API pizzicato.js
Basée sur les Web Audio qui sont présent sur tous les explorateurs (hormis ce bon vieu IE), cette API permet très simplement de créer et de retransmettre du son à partir de n’importe quel input et de le retravailler avec des filtres préexistant ou à créer. Facile ensuite d’appliquer n’importe quel type d’effet sur sa guitare, branchée en direct, à partir la console Chrome.
la video du talk & support
14H00 : Comment coupler React et D3 de différentes manières. Voilà ce que nous explique Christophe. Plusieurs solutions donc, avec chacunes leurs avantages et inconvénients. Par exemple le react-faux-dom, qui permet d’obtenir une structure similaire au DOM, mais qui n’admet pas les animations. Il nous présente aussi d’autres outils tel que le “framework” VanillaJS (du simple JavaScript en somme), et, plus axé graphique, la bibliothèques Recharts.
la video du talk & support
14H30 : Kevin nous livre un talk assez étonnant sur un reverse engineering d’une appli de gestion des fichiers de paie bien pourrie (si, si) ! En utilisant un reverse proxy et un décompilateur, il arrive à communiquer directement avec un service SOAP au lieu de passer par un client lourd couplé à une “vieille” version d’Internet Explorer. Pas toujours évident à suivre, mais du beau boulot !
la video du talk & support
15H30 : On n’avait encore que peu parlé de la réalité virtuelle. C’est David qui s’y colle. Ce monsieur VR chez Microsoft nous démontre avec exemple live comment créer et tester des applications de réalité virtuelle sur un explorateur. Il préconise le couple Typescript/Three.js ou Typescript/Babylon.js (par Microsoft). Pour les amateurs sans grandes ressources, on peut toujours faire des tests en simulations de Réalité virtuelle grâce notamment à Windows Mixed Reality, et ainsi choisir la position de la caméra, se déplacer etc. On reste un peu sur sa faim… cela aurait été bien plus sympa avec un casque sur la tête !
la video du talk & support
16H00 : Etat de l’art du CSS par Jonathan.
Pour le petit historique on nous rappelle qu’avant 2010 on bossait sur des fichiers CSS simples, puis en 2011 sont arrivés les préprocesseurs. Cela a révolutionné les CSS avec la possibilité d’utiliser plusieurs fichiers, des variables, des mixins en ajoutant des étapes de build.
En 2012, on a (potentiellement) changé de paradigme en portant les noms plus sur les éléments graphiques afin de rendre les CSS plus génériques et pertinents.
En 2016, c’est le Post CSS, même s’il reste des problèmes d’imprédictibilité. En effet, on ne peut être certain, sur la lecture d’un unique fichier, qu’une règle, est bien celle-ci qui est appliquée.
Trois tendances sortent du lot pour les CSS en 2017.
Le CSS-in-CSS, le plus commun, avec l’utilisation de librairies comme POST-CSS, et des outils de conventions de nommage : SMACSS, BEM, suit CSS. La stack idéale de Jonathan : Node-Sass (LibSass), SuitCSS, PostCSS, PurifyCSS.
Le CSS-in-HTML, qui est du CSS inline assez surprenant. Il permet de ne jamais écrire dans le css mais d’utiliser des classes extrêmement précises qui correspondent à une bibliothèque (i.e. Tachyon, BassCSS, Atomic).
Le CSS-in-JS, plutôt pour React, qui est en pleine croissance malgré un manque de best practices et de techno dominante. On notera Glamourous de Paypal, Styled-Components, Aphrodite css et styletron
la video du talk & support
17H00 : On arrive à une dernière série de talks et c’est Raphaël qui s’y colle avec un REX décalé sur un projet perso Raspberry Pi.
Dans un soucis de démasquer les “brigands” qui pourraient s’introduire dans son appartement, Raphaël s’est mis en tête de créer une alarme de porte avec photographie à l’appui.
On a droit à toute l’histoire du process, step by step, et c’est très divertissant :
- camera + détecteur de mouvement (via script python trouvé sur adafruit)
- envoi d’SMS (via l’API http de Free)
- upload sur google drive (via l’API en python)
- gestion du multithread
- scan bluetooth pour détecter qui est entré
- ajout de lumière (Bright Pi) sur la caméra (mais inutile)
- un peu de soudure
- création d’une boîte… en carton
2e “sprint”
- gestion de la lumière via les ampoules connectées
- création d’un détecteur d’ouverture/fermeture de porte via un Raspberry Zero
- alarme audio, via un relai électronique
- reactive programming pour améliorer le code
Cette présentation, avant tout divertissante se termine sur une belle conclusion autour des projets perso : l’idéal est de résoudre un problème utilement, il permet de faire de la veille technique. Pour cela il faut “aller en prod au plus vite” via des PTMQM “Petits trucs moches qui marchent” !
la video du talk & support
17H30 : On termine les talks avec Vincent qui explique comment tirer le meilleur parti des contributeurs.
Les maîtres mots sont de supprimer les obstacles et automatiser au maximum. Pour cela, il est important d’avoir un très bon README, et avoir un template d’Issue et des outils de playground type jsFiddle afin d’éviter d’inutiles aller/retours.
Il est aussi important de valoriser toutes les remarques même négatives, et se dire que chaque issue est avant tout un problème à résoudre. Pour toute communication, il ne faut pas faire d’hypothèse, et toujours être certain du sens des demandes.
On notera aussi l’intérêt d’avoir des precommit-hook pour le formatage de code (i.e. ESLint + Prettier) afin d’éviter tout conflit.
Raphaël préconise même de faciliter les release via npm et les conventional changelog. Maintenant, à vous de voir si vous souhaitez laisser cette possibilité aux commiteurs ! En tout cas, un bon changelog à partir des commits sera très appréciable pour tous les utilisateurs.
la video du talk & support
Voilà, une belle journée bien complète, plus portée sur les outils que la technique. Une bonne ambiance, des talks vraiment intéressants, des cadeaux sympas, un gros buffet et même des sponsors qui offrent de la bière. Bref, on recommande la Best of Web !
