fabernovel loader

Jun 25, 2018 | 11 min de lecture

Tech

Retour sur le Best of Web 2018, le rendez-vous des passionnés de technos Web

best of web 2018
best of web 2018

Alexis Otton

Lead Developer


FABERNOVEL CODE
best of web 2018

Ferdinand DOREMUS

Agile Web Developer


FABERNOVEL CODE
best of web 2018

Kenny Durand

Lead Developer


FABERNOVEL CODE
Nous étions trois de FABERNOVEL CODE à nous rendre à la Grande Crypte vendredi 8 juin pour assister à la 4ème édition du Best of Web. Retour sur les grands moments de cet événement.

Best of Web est une conférence réunissant les meilleurs talks de l’année (ainsi que des inédits) de la crème des meetups web parisiens :

Angular Paris, Angular X Paris, Paris WebComponents, D3.js Paris, Node.js Paris, CSS Paris, Meteor Paris, ReactJS Paris, Paris API, Loopback Paris, Elm Paris, Js-Start.Paris, Vuejs Paris, Paris Scala UG, Paris.js, Paris TypeScript, HumanTalks Paris, Tech Lunch, Hybride Mobile Paris, Duchess France et Paris Progressive Web Apps. Rien que ça !


Donnez de l’air aux développeurs !

Morgan Kobeissi inaugure cette journée de conférence avec une question, dans laquelle la plupart des développeurs agile se reconnaitront : Comment peut-on apprendre et s’améliorer en continu dans un contexte agile, tout en maintenant un « delivery » de qualité et pérenne, ainsi qu’une satisfaction et une productivité maximum ?

Il est vrai que cela peut être parfois compliqué de trouver le temps de refactoriser du code, corriger certains points de dette technique, améliorer les performances front & back, sans oublier un peu de veille… Bref, toutes les tâches nécessaires à la bonne santé d’une application, mais qui ne rentrent pas directement dans le cadre d’un besoin utilisateur.

En résumé, l’idée derrière ce talk était de définir un temps de relâchement, prévoir un peu de marge dans le temps de production afin d’absorber les (éventuels) aléas de la vie d’un projet (qui arriveront, quoi qu’il arrive ! #tmtc).

Dans la vie de tous les jours, cette pratique est courante et n’étonne personne. C’est le cas par exemple, les ponts routiers :

expansion-joint-bridge

Ils sont équipés de joints de dilatation permettant à la structure de se dilater en fonction de la température, des effets du traffic, ou de légers mouvements terrestres.  Le mécanisme mis en place ici permet de ne pas mettre en péril l’utilisation du pont dans le cas où une chose de ce type arriverait.

Chez FABERNOVEL CODE, ce genre de conférence nous encourage à poursuivre la mise en place de ces principes, inspirés de The Clean Coder (que nous recommandons vivement). Notre pratique du kaizen repose sur un point hebdomadaire auquel participe l’ensemble de l’équipe de développement. On y discute de la santé technique du projet : identification de dette technique, mises à jour nécessaires, refactorisation nécessaire, partage des indicateurs de performances techniques, etc. A chaque sprint, nous dédions du temps aux tâches de ce backlog technique.

Après plusieurs mois de mise en place, c’est une totale réussite : nos équipes et clients adhèrent complètement au principe et sont sensibles et responsables de la qualité, le tout pour un investissement minime.

Maîtriser votre Service Worker pour optimiser votre Progressive Web App

Dans ce talk, Maxim Salnikov nous a présenté ses diverses astuces pour construire des Progressive Web Apps robustes et éviter les écueils classiques dans la conception de ces apps.

Parmi ceux-ci, un des premiers points clés était de bien prendre en compte les fonctionnalités fournies ou non par les navigateurs, étant donné que le support des PWA d’un navigateur à l’autre est très variable.

Ensuite, Maxim nous a donné quelques techniques pour mieux maîtriser les performances et le cache d’une PWA, en particulier en enregistrant le Service Worker le plus tard possible dans l’application, afin de ne pas ralentir le reste de l’application. Pour le cache, étant donné que le volume de stockage est très différent selon le navigateur, l’utilisation de la fonction estimate est primordiale pour s’assurer d’avoir l’espace pour stocker les données récupérées par le Worker.

Enfin, parmi les conseils marquants, le fait d’améliorer le mode d’installation de la PWA sur le smartphone de l’utilisateur s’est avéré intéressant. Maxim Salnikov nous a conseillé de masquer le prompt automatique que le navigateur propose pour mettre en place la PWA, et de créer un bouton d’installation stylisé sur le site pour déclencher cette installation.

Comment améliorer l’UX sur mobile ?

real life ux

mobile-first-responsive-design

Au delà de ça, quelques autres principes à retenir de cette conférence  :

  • Ne pas hésiter à découper un parcours en étapes afin d’avoir peu d’informations essentielles à l’écran à la fois (arrêtons le stéréotype peu d’étape = UX réussi), rendre l’écran compréhensible aux utilisateurs en moins de 3 secondes
  • Limiter les champs de textes libres, et préférer l’utilisation de toggle, de sliders ou toute autre façon permettant la saisie de données sans utiliser le clavier
  • Laisser le bouton d’action principal toujours visible à l’écran

NuxtJS

Avec la multiplication des frameworks javascript front utilisant le Virtual DOM, la question du rendu côté serveur devient de plus en plus pertinente pour la SEO, mais également pour la performance. Sébastien Chopin nous a parlé via ce talk de la librairie dont il est co-auteur : NuxtJS, qui s’impose comme LA solution de server-side rendering pour VueJs. On y apprend notamment que Nuxt vient se poser comme une surcouche à Vue.js, sans en complexifier le fonctionnement, au contraire, le message passé par le co-auteur est le suivant :
Il faut pouvoir vous concentrer sur la rédaction du code Vue.js sans se prendre la tête avec la configuration [server-side].

Les systèmes de recommandation

Via ce talk, Mathilde Lemée nous a partagé son expérience de data scientist, en charge de la conception d’algorithme de recommandation. Plus précisément, elle a expliqué comment avec comme seul outil ElasticSearch et comme seule philosophie l’amélioration continue, elle parvient à implémenter des algorithmes qui deviennent de plus en plus précis et élaborés avec le temps.

Tout d’abord, Mathilde a exposé la distinction entre item-based filtering, qui utilise les ratings ou la sélection de panier des utilisateurs pour recommander aux autres des produits, et le content-based filtering, qui, quant à lui, fait entrer en jeu toutes les caractéristiques d’un produit et les compare à celles d’un utilisateur pour pouvoir trouver le produit idéal pour l’utilisateur. Les cas dont a parlé Mathilde dans la suite de son talk traitent essentiellement de content-based filtering.

Ensuite, nous avons pu faire le tour des nombreuses optimisations qu’ont offert ElasticSearch pour lui permettre de résoudre ses problématiques d’indexation. Besoin de valoriser certains termes par rapport à d’autres ? Utilisons les boosts pour pondérer le score. Besoin de faire de l’analyse sémantique de commentaires utilisateurs pour renforcer l’algorithme ? Le stemming et la définition de synonymes dans le dictionnaire ElasticSearch répondent au besoin. Nécessité de ne pas faire ressortir un produit qui compte beaucoup de fois les termes recherchés plutôt qu’un autre ? Le constant score d’ElasticSearch fait des miracles à ce sujet. Bien d’autres fonctionnalités ont été détaillées pour atteindre un algorithme de recommandation robuste.

La présentation était ponctuée de quelques conseils supplémentaires, sur la manière de construire une banque de données pertinente et consistante, et la façon de coupler ces données à des champs de recherche ou des filtres pour passer de la donnée à l’analyse sémantique. Un retour d’expérience riche !


Faisons de la magie grâce à Houdini CSS

Jean-François Garreau a présenté les spécifications Houdini CSS qui seront implémentées par tous les navigateurs. Force est de constater la pénibilité des différentes implémentations des nouvelles fonctionnalités CSS au sein des navigateurs, le principe d’Houdini est d’exposer tout un tas d’API au développeur afin de pouvoir intervenir à toutes les étapes de rendu du navigateur : Parsing, DOM/CSSOM, Render Tree, Layout, Paint, Composite.

Un futur très agréable a priori donc, mais encore un peu de patience avant que tout ceci soit “prod ready”, so wait and see…

Réalité virtuelle avec VueJS et A-Frame

Via ce talk, Victor Viale a fait une démonstration de TweetScape, un de ses projets étudiants tout simplement bluffant, qui consiste en une application de réalité virtuelle permettant de visualiser des tweets en 3D. Rien d’épatant en apparence, mais le plus impressionnant est le fait que l’application soit réalisée uniquement avec des technos Web : VueJS, qui sert ici de socle applicatif pour gérer le routing et le state, et A-Frame, un framework basé sur Three.js, soutenu par Mozilla, pour faire de la 3D et de la VR dans un navigateur.

Le gros point fort de cette approche est qu’elle permet en théorie d’exploiter en plus de tout cela toute l’API HTML5. Cela ouvre d’énormes possibilités pour l’univers du jeu vidéo, qui pourrait voir la naissance de jeux très élaborés sur navigateur desktop et mobile, qui n’auraient potentiellement rien à envier à leurs concurrents chaudement installés sur les devices : support du fullscreen, de la VR, des gamepads, utilisation du gyroscope, etc.

Néanmoins, Victor a tempéré lui-même cette vision : en expliquant d’une part que ces API ne sont pas encore standardisées, d’autre part qu’elles changent beaucoup d’un navigateur à l’autre, et encore que les outils de réalité virtuelle eux-mêmes ont encore tout à prouver… Mais les gamers qui sommeillent au fond de nous se ravissent de TweetScape et de ce qui se dessine derrière !

De développeur web à artiste du cerveau

Un peu de fibre artistique dans ce monde de technique ! L’histoire de ce talk commence au moment où David Nowinsky a reçu en cadeau un casque Muse, dont le but était de lire les ondes cérébrales lors d’une séance de méditation pour améliorer la qualité de celle-ci. Il nous a ensuite expliqué la manière dont il a fait du reverse-engineering sur le casque, exploité les données que celui-ci mettait à disposition, et créé une petite interface graphique affichant les données en temps réel.

Puis, en utilisant ces données via des librairies open-source variées, David est parvenu à isoler les différentes fréquences des ondes cérébrales via des transformées de Fourier, et à représenter ces ratios de fréquence sur des graphes dans une page Web. Puis, en couplant cela avec des théories scientifiques sur l’étude du cerveau, David a identifié des bandes de fréquence définissant les états mentaux : calme, en réflexion, etc.

C’est ici que l’univers artistique intervient : David a pris le parti de faire créer une fresque graphique colorée et dynamique, qui évolue en temps réel selon le niveau de concentration et d’attention du sujet qui porte le casque. Le projet est accessible ici.

Globalement, c’était assez impressionnant de voir comment avec un objet connecté très simple et une série de librairies, il est possible de récupérer, décomposer, et représenter artistiquement un état du corps humain : la puissance de l’open-source est sans limites !

Mutation testing, enfin une bonne mesure de la qualité des tests ?

Grâce à un talk très accessible, Loïc Knuchel nous a présenté les tests de mutation, qui ont pour but de renforcer la qualité des tests automatisés déjà présents sur un projet.

La problématique de cette suite de tests est simple : comment peut-on être sûr que la suite de tests unitaires déjà implémentées sur le projet sont pertinentes, et couvrent bien l’intégralité des cas d’utilisation ? En effet, le code coverage est un indicateur intéressant mais qui peut être trompeur : le code qui s’exécute lors d’un test unitaire n’est pas obligatoirement signifiant.

Les tests de mutation ont justement pour but d’adresser ce problème en injectant des changements néfastes dans le code source (des “mutants”) et de vérifier si les tests unitaires fonctionnent toujours ou pas. Si le “mutant” survit à la suite de tests unitaires, c’est que les tests ne sont pas assez exhaustifs et qu’il faut les compléter ! Ce “mutant” peut être la suppression d’une fonction dans le code, un changement de condition ou une assignation de variable qui change.

Loïc nous a fait une petite démonstration de la puissance d’un framework de tests de mutation pour détecter tous les cas non considérés, et adapter cette suite de tests. Le gros défaut de ces tests sont leur temps d’exécution : très longs, il est préférable de les placer sur du code critique, et de ne les exécuter que sur le code concerné par les tests. Il est en revanche possible d’exécuter “un build” de tests de mutation quotidien, pour obtenir le taux de couverture réel et réagir sur le projet en conséquence.

Transformez votre animal en Tamagotchi !

Michel Parreno nous a présenté dans son talk un side project destiné à… son lapin ! A partir d’un Raspberry Pi et de quelques équipements, il a joint l’utile à l’agréable, et développé un projet qui associe technologie et amour des animaux.

Le résultat final est plutôt sympa avec un distributeur de croquettes connecté, une caméra (dotée d’une lumière automatique pour la nuit), filmant son animal fétiche dans sa cage afin de pouvoir l’observer à tous moments, le tout accessible et piloté via une application personnalisée pour mobile, développée en React Native.

L’UI dans les assistants vocaux ?

Pour conclure sur ce salon, nous avons participé à un talk de Dustin Coates au sujet de la conception d’une application vocale. Sans entrer dans le coeur du développement, Dustin a partagé ses convictions et son expertise sur l’UX des assistants vocaux.

alexa-voice-ui

Tout d’abord, un assistant vocal ne répond pas à tous les use cases ! Il existe plusieurs types d’assistants : voice-only (interagissant uniquement par la voix), voice-first (initiés par la voix, mais la navigation profonde se fait via un autre moyen) et voice-added (la voix complète une application existante). Chaque type répond à une palette d’usages bien précis, et il convient de s’interroger sur la nature de ce que l’on cherche à créer pour choisir la meilleure solution technique.

En outre, définir un parcours de discussion naturel et facile à suivre pour l’utilisateur est primordial. Pour cela, Dustin préconise de favoriser les questions fermées en Oui/Non, très explicites sur leur fonction. Demander confirmation à l’utilisateur de son intention est généralement une très bonne pratique pour guider précisément celui-ci dans l’expérience. En termes de réponse à l’utilisateur, Dustin fait prévaloir les 4 maximes de Grice, qui sont des éléments fondamentaux de la théorie sociologique de la coopération participative : l’application doit répondre adéquatement en quantité (uniquement ce qui est demandé par l’utilisateur, pas d’information inutile), en qualité (ne donner que des informations sûres et vraies, ne proposer à l’utilisateur que des options possibles), en relation (réponse pertinente en fonction du contexte), et en manière (la réponse doit être limpide et naturelle). Selon lui, il est éventuellement possible de déduire des précédentes conversations des informations contextuelles (localisation, identité, etc.) pour donner une meilleure expérience.

Enfin, la notion du niveau de feedback donné à l’utilisateur a été mise en lumière ; Dustin détaille plusieurs niveaux de feedback : feedback explicite (“Compris, j’ai bien annulé l’alarme de 15h”), feedback implicite (“L’alarme a été annulée”), feedback ouvert (“OK, c’est annulé”) ou même l’absence de feedback. Ce niveau doit être sélectionné précisément pour rendre l’expérience naturelle.

Félicitations à toute l’équipe Best Of Web pour cet événement (encore une fois) réussi. Merci, et à l’année prochaine !

applaud

Ces sujets vous intéressent ?

Discutons-en
logo business unit

FABERNOVEL CODE

Nous réalisons des plateformes Internet en un temps record, en mêlant talents et méthodologies agiles.

à lire