Vue.js London 2018, en résumé.

Article écrit par Victor Darras

La gare de Lille est déjà pleine de voyageurs impatients quand le train à destination de Londres m’est annoncé. C’est donc avec un peu d’avance que je m’installe en espérant que Tom et Gaëtan, mes acolytes pour cette expédition, me rejoindront vite.

Cinq minutes plus tard, nous voilà installés dans de grands siège gris estampillés Eurostar, destination Vue.js London !

Le timing ayant été très serré, nous n’avons eu l’occasion d’assister ni à la première conférence, ni à la dernière, mais voici ce que nous avons retenu de cette superbe journée.

Phil Hawksworth : keynote d’ouverture

Une présentation globale de l’événement par Phil Hawksworth, qui fut notre maître de cérémonie pour l’ensemble de cette journée. Un accent anglais certain, et des blagues dans tous les sens. Voilà de quoi démarrer sur les chapeaux de roues.

Gregg Pollack : « Reactivity & Rendering Revealed »

Probablement le sujet qui nous aurait le plus appris sur les entrailles de Vue.js. Heureusement pour nous, Gregg Pollack semble être un passionné du sujet, il y a de quoi se rattraper.

Roman Kuba : « Advanced Vue Testing Strategies »

Prise en cours de route, cette présentation des tests dans le contexte de Vue.js par Roman Kuba nous a permis d’aborder bon nombre de bonnes pratiques et d’astuces pour se faciliter l’écriture de tests, notamment avec l’utilisation de Vue Test Utils et Jest.

Sara Viera : « GraphQL + Apollo + Vue = magic »

Sara Viera a su capter l’attention en décrivant avec beaucoup d’humour une stack novatrice que nous avions eu l’occasion de découvrir lors de Vue.js Amsterdam. Ce fut l’occasion de mieux présenter vue-apollo, et — pour nous — de mieux comprendre l’intérêt et la puissance de l’outil.

Sébastien Chopin : « The new Nuxt 2 »

Dans le monde des conférences, il y ceux qui mettent des GIFs sur chaque slide, ceux qui profitent des GIFs pour faire dérouler le code et ceux qui codent en live, ces derniers étant assurément les plus courageux. Mais cette conférence a été l’occasion de dépasser ces exercices et de faire une véritable release en direct. Build, npm publish puis release note Github, billet Medium et tweet, Sébastien Chopin nous a invité à suivre avec lui la diffusion de Nuxt 2.0.

Au-delà de la performance, nous avons eu droit à un tour rapide des avancées du framework que vous retrouverez sur l’article dédié de manière plus complète.

Jacob Schatz : « Vue with Vuex »

Afin de nous expliquer le fonctionnement de Vuex, Jacob a eu la brillante idée de prendre le problème à l’envers : plutôt que de nous montrer l’outil en action, il est parti d’une app Vue « vanilla » en y ajoutant au fur et à mesure des éléments de Vuex, les implémentant de façon naïve afin de nous expliquer à quelles problématiques il était confronté et comment Vuex y répondait, et ceci dans le détail.

Par exemple, si l’on a besoin de partager des données entre ses composants de manière horizontale, data et props ne suffisent plus : l’idéal est de définir un store, autrement dit un gros objet auquel tous les composants ont accès et qui permet de stocker l’état de notre application. On peut s’en sortir « à la main », mais Vuex nous offre la possibilité de composer notre store via un système de modules, ainsi qu’un moyen simple d’accéder à ces données depuis tous nos composants.

Nous avons également appris que pour rendre réactives les données qu’il contient (c’est-à-dire qu’on peut observer leur changement), Vuex, en interne, instancie… Vue lui-même ! Pour mémoire, c’est aussi ce que la documentation du framework recommande pour la mise en place d’un event bus, sorte de Vuex du pauvre pour ce qui est de la gestion des événements.

Nous vous parlerons davantage de Vuex dans un futur proche, soyez patients 😉

Chris DeMars : « I can’t see ! Low vision, a11y, and users »

Une présentation sur l’accessibilité au milieu de cette conférence Vue.js fut l’occasion de laisser respirer le webdesigner que je suis. Chris DeMars sait tenir son auditoire et nous expliquera avec quelques histoires touchantes et en plusieurs grands points, pourquoi et comment le web doit être accessible à tous.

• 20% des visiteurs ont un handicap
• Il existe plusieurs catégories distinctes à prendre en compte :
  • Soucis d’audition et surdité ;
  • Vision faible ou absente ;
  • Problème cognitif de compréhension ou de mémoire ;
  • Absence ou manque de mobilité ;
  • Temporaire (main cassée, enfant dans les bras, reflet sur l’écran…).

Les problèmes les plus courants que l’on rencontre étant :

• Un contraste insuffisant ;
• Une idée seulement communiquée par une couleur ;
• La désactivation du zoom ;
• Une taille de police ou d’interlignage illisible.

Chacun de ces problèmes a sa solution :

• Des icônes et symboles, souvent plus explicites et rapides à lire ;
• Des outils de lint dédiés à l’A11y : stylelint, eslint-plugin-vue-a11y, axe-core
• Les guidelines WCAG du W3C ;
• Expliquer à vos clients que bon nombre de procès ont lieu à cause de manquement en termes d’accessibilité.

Jen Looper : « Human VS AI : build a mobile app with Vue.js, ML Kit, and NativeScript »

Nous avons eu droit à un tour assez complet de ce qu’est le machine learning : permettre à un ordinateur d’apprendre sans devoir explicitement le programmer. Pour cela il existe plusieurs solutions, qui peuvent être complémentaires :

• Supervised learning : récupérer des données, s’entraîner sur un ensemble pré-catégorisé, et le comparer à un ensemble de test ;
• Unsupervised learning : récupérer des données et ne s’entraîner que sur cet ensemble ;
• Reinforcement learning : récupérer des données et ne s’entraîner que sur cet ensemble mais récompenser la résolution d’un problème (selon les mots de Jen, c’est la solution la plus obscure dans le domaine actuellement).

Suite à cette présentation, nous avons eu le droit à une amusante démo de machine Learning sur mobile sur laquelle il nous faut trouver plus rapidement que l’IA si une image contient tel ou tel sujet (Trump ou Blanc de dinde ? Nuggets ou chiot ?), habile.

Voir les slides

Natalia Tepluhina : « Vue Vixens : Badassery in 2018 »

Ce court talk visait à présenter un programme de formation à Vue.js pour femmes (mais pas que) du nom de vuevixens. Lancé à l’international il y a maintenant plus de 6 mois, il a su s’implanter sur presque tous les continents !

Ce fut aussi l’occasion d’annoncer très brièvement la venue de NativeScript-Vue version 2.0 par son release manager.

Callum Macrae : « Data visualisation with Vue »

Auteur de Vue.js : Up and running, Callum semble apprécier la vue d’une moitié de salle levant la main quand le MC nous demande qui a acheté le bouquin. Voilà de quoi le mettre à l’aise pour une présentation autour de la data visualization. Nous avons vu comment créer un SVG au sein d’un composant Vue.js, comment lui assigner des attributs dynamiques, et comment mutualiser des composants SVG pour des visualisations plus complexes et maintenables. A priori une bibliothèque dédiée à cet usage pourrait bientôt voir le jour.

Voir les slides

Divya Sasidharan : « Custom plugins for Vue CLI 3 »

Nous vous en avions brièvement parlé à notre retour d’Amsterdam, la principale nouveauté de Vue CLI 3 était la promesse d’une plus grande modularité, grâce au système de plugins venant avantageusement remplacer celui de la version précédente, basé sur des templates.

Dans ce lightning talk efficace, Divya nous a donc montré de quoi se compose un plugin et comment en réaliser un facilement :

• Un plugin est un package ajoutant des fonctionnalités à @vue/cli
• Il se compose d’un fichier index.js, qui sera exécuté par vue-cli-service, et d’un fichier generator.js, qui contient le code permettant d’ajouter fichiers et dossiers au projet installant le plugin (fichier de configuration d’un outil tiers, par exemple)
• generator.js doit exposer une fonction prenant en paramètre un objet api fourni par Vue CLI ; cette fonction a pour rôle de le surcharger ou de le compléter
• generator.js peut également être generator/index.js si le code du plugin est un tant soit peu « complexe » et comporte plusieurs fichiers

Pour en savoir plus, consultez donc la doc adéquate !

Jason Yu : « What’s new in VuePress »

Ne connaissant pas encore VuePress, ce fut une totale découverte plutôt que des nouveautés pour moi. VuePress est donc un générateur de site statique, basé sur Markdown, à la manière d’un Jekyll ou Hugo mais avec l’environnement (confortable s’il en est) de Vue. Encore une présentation rapide, mais pendant laquelle Jason a eu le temps de nous faire un live coding efficace (un Hello World en réalité, mais il n’avait que 5 minutes !)

Damian Dulisz : « Adapting Vue internals for event handling »

Partant d’un constat simple,

Vue.js gère très bien l’écoute d’événements sur un élément de DOM, comment avoir le même usage sur document ou window ?

Damian nous a expliqué — étape par étape — comment il est arrivé à créer vue-global-events pour lui permettre de lier les événements globaux à un composant dédié. Il exploite donc la propriété this.$listeners contenant l’ensemble des event d’un composant, pour les attacher au document au mounted et les détruire au beforeDestroy. Simple et efficace.

Ives Van Hoorne : « CodeSandbox.io : new feature announcements »

CodeSandbox était jusqu’à aujourd’hui une sorte de Codepen dédié à React, puis Vue.js. Ives nous explique qu’il devient maintenant un véritable IDE en ligne, avec gestion de versioning (Git), file system et console de debug. La plus grosse annonce de cette présentation fut probablement le support de Nuxt, avec son server-side rendering et les machines virtuelles que ça implique. Assez impressionnant !

Guillaume Chau : « Looking at the UI for Vue CLI 3 »

Après une courte revue des possibilités de Vue CLI 3 par rapport à son prédécesseur (configuration dynamique après la génération initiale grâce aux plugins entre autres), Guillaume nous a fait faire un tour dans l’interface de vue ui. Cette interface web épurée et efficace permet d’accéder à l’ensemble des options du CLI et peut elle aussi être agrémentée de plugins pour faire du monitoring par exemple. Voir les slides

Evan You (créateur de Vue.js) : « Keynote : the future of Vue.js »

Point d’orgue de cette conférence, nous avons eu l’occasion de voir le créateur de Vue.js en visioconférence. Il a pris le temps de nous (re)donner les lignes directrices de la core team de Vue :

a progressive, performant and UX-focused framework that helps more developers enjoy web/UI development

Dans la foulée nous avons aussi vu les différentes évolutions du framework qui s’inscrivent clairement dans une volonté de le faire perdurer dans un monde (JavaScript) changeant rapidement :

• Plus rapide d’environ 100% grâce à une réécriture complète du virtual DOM, une meilleure gestion des temps de compilation et l’utilisation des proxies ES6 en lieu et place d’Object.defineProperty ;
• Plus léger de moitié, notamment grâce à un système de bundle dynamique (tree shaking) qui ne charge que les features nécessaires et qui permet d’ajouter facilement des fonctionnalités au framework sans alourdir les applications qui l’utilisent ;
• Plus maintenable grâce à une refonte de l’architecture globale ;
• Une réelle volonté d’adopter les nouvelles fonctionnalités du langage et des plateformes ;
• Quelques améliorations non détaillées sur l’usage de Vue.js hors du Web.

Conclusion

Une journée bien remplie, pleine de têtes bien faites et de belles rencontres, des confs un peu plus techniques que lors de notre dernière visite à Amsterdam, voilà de quoi résumer notre voyage à Vue.js London 2018. Et merci encore à Synbioz de nous permettre ces petits apartés à l’étranger pour affiner toujours plus nos compétences !