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.
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.
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.
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 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.
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.
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 ;)
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.
Les problèmes les plus courants que l’on rencontre étant :
Chacun de ces problèmes a sa solution :
stylelint, eslint-plugin-vue-a11y, axe-core
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 :
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.
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.
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.
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 :
@vue/cli
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étergenerator.js peut également être generator/index.js si le code du plugin est un tant soit peu « complexe » et comporte plusieurs fichiersPour en savoir plus, consultez donc la doc adéquate !
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 !)
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
documentouwindow?
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.
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 !
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
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 :
Object.defineProperty ;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 !
L’équipe Synbioz.
Libres d’être ensemble.
