La conférence Vue.js Amsterdam s'est tenue le 16 février dernier au Amsterdam Theater, un énorme amphithéâtre, avec un écran géant à 180°. Il s'agit de la plus grosse conférence dédiée à Vue, avec plus de 1000 participants. C’était l’occasion pour la communauté grandissante de se retrouver et de faire un point sur Vue et son écosystème.

Les vidéos sont progressivement mises en ligne ici.

Past, present and future of Vue.js

Evan You, créateur de Vue.js.

Ce premier talk a principalement servi d’introduction à la journée en résumant l’état de l’écosystème Vue.js.

La popularité de Vue est en forte croissance en 2017 : explosion du nombre de stars Github et du nombre d’utilisateurs hebdomadaires des devtools, etc.

La dernière version de Vue, la 2.5, comporte de nombreuses nouveautés dont principalement le support de TypeScript largement amélioré et une meilleure gestion des erreurs.

2017 a également vu l’émergence de nouveaux modules officiels, comme :

• eslint-plugin-vue, qui améliore le support des Single File Components
• vue-test-utils, équivalent de Enzyme pour React, qui facilite grandement le test de composants Vue.

La communauté et l’écosystème atteignent aujourd’hui un certain niveau de maturité, visible notamment par le passage en version 1.0 de plusieurs outils (Nuxt, Vuetify et NativeScript-vue).

Nous avons eu droit à une présentation de Vue-cli 3.0 (maintenant en beta), qui facilite grandement le développement d’applications Vue. Ce plugin est l’équivalent de create-react-app, mais améliore les possibilités de personnalisation, grâce à une API riche et au chaînage de configurations webpack.

Enfin, dans un futur proche, nous devrions profiter de l’intégration de webpack 4, Vue 2.6, une nouvelle version de Vuex (simplification de l’asynchronisme, fusion des actions et mutations) et d’une version “next”. La version “next“ abandonne le support des anciens navigateurs en gardant la même API.

Le talk était assez généraliste, mais c’est toujours intéressant de prendre du recul sur l’avancement global de la communauté.  De plus, c'est Evan You lui-même qui a présenté cette keynote, ce qui prouve la proximité entre la core team Vue et son écosystème.

Scaling Vue in an existing stack

Roman Kuba - slides

Roman Kuba est Senior Software Engineer à CodeShip, qui édite la plateforme d’intégration du même nom.

Pour CodeShip, il est important d’ajouter de nouvelles technologies au produit afin qu’il évolue sans prendre de retard. Il explique dans ce talk comment intégrer ces nouvelles technologies à un produit existant.

Le processus se résume en 5 points :

1) Réduire le scope du processus

Il est nécessaire de choisir un langage ou framework à intégrer, pas plusieurs, puis refactorer le code petit-à-petit.

2) Introduire Vue à la stack (puisqu’ils ont choisi Vue !)

Roman conseille de charger Vue depuis un CDN pour commencer, d’importer le moins possible de dépendances parallèles et de maîtriser le Lifecycle du framework

3) Améliorer le process de build à l’aide de Webpack

4) Traiter chaque page comme une SPA

5) Se préparer au scaling

Faire en sorte que le code soit réutilisable à l’aide de générateurs et de scaffolding. Utiliser des design pattern et tout tester unitairement.

Enfin, Roman conclut avec quelques chiffres.

Son équipe s’est notamment débarrassé d’une grande partie de leurs tests fonctionnels en les remplaçant par des tests unitaires, ce qui leur permet de diviser par deux leur temps de build (de 20 minutes à 10 minutes… ironique lorsqu'on parle d'une entreprise de déploiement).

Au final, c’était assez facile car Vue “is JavaScript done right”.

Le talk était intéressant, car il expliquait étape par étape une stratégie de migration de technologie front, ainsi que les erreurs à éviter au passage. Il montrait notamment qu’il était possible de faire une migration progressive vers un framework comme Vue.

Apollo, GraphQL and Vue: the ultimate stack

Guillaume Chau - slides

Présentation de la stack “ultime” pour améliorer le développement d’applications webs.

On commence avec GraphQL, un langage de requête qui change la façon d’écrire et de consommer une API, via un langage de définition de schéma côté back et un langage de requête côté front.

GraphQL permet au front de requêter précisément les ressources dont le front a besoin, sans superflu, ce qui réduit la taille des réponses, et évite de devoir faire de multiples requêtes tout en aidant à garder son API propre.

Vient ensuit Apollo, qui ajoute encore de la valeur à GraphQL en facilitant grandement le développement d’une API compatible.

Enfin Vue, et plus particulièrement vue-apollo, qui rend le développement d’une application front très accessible.

Guillaume fait ensuite une démonstration de live coding, en partant de zéro pour créer une app front en Vue (grâce au Vue-cli).

Il parvient en quelques minutes à consommer une API GraphQL existante (testable directement depuis la documentation web générée), et même à mettre en place un websocket fonctionnel en quelques lignes grâce aux composants Apollo pour Vue.

La présentation était très impressionnante, et donnait clairement envie d’approfondir sur GraphQL, même pour des néophytes sur le sujet.

Speed up your Vue.js development time with Nuxt.js

Alexandre Chopin (Nuxt co-author) - slides

Nuxt est une surcouche de Vue, qui lui ajoute des conventions et configurations, pour accélerer le développement d’applications universelles (hybride entre Server Side Rendering et Single Page Application).

Le premier lancement public s’est fait en novembre 2016 (peu après sa source d’inspiration Next.js, équivalent pour React).

Depuis janvier, la version 1.0 est sortie, et nous en sommes même maintenant à la 1.3, et le projet en est à presque 10k stars sur Github et 115k téléchargements en janvier sur npm !

L’idée derrière Nuxt est d’intégrer une stack complète (Node, Vue, Vue router, Vue meta, Vuex, Babel, Webpack) dans un framework prêt à l’emploi et rapide à prendre en main.

Pour cela, il ajoute le concept de “page” à Vue, qui n’est autre qu’un “super” composant, avec des fonctionnalités supplémentaires (asyncData, layout, middleware, head, …).

Une fois l’application développée, 3 modes de déploiement sont disponibles :

• Universal : SSR pour le premier rendu, puis navigation en SPA, nécessite de lancer le serveur node intégré
• Single Page Application : fonctionnement classique des frameworks JS, hébergement sur un CDN
• HTML static : génération de toutes les pages en HTML, pour un site statique simple

La présentation se voulait généraliste, un peu à la manière de la keynote d'Evan You, mais cette fois-ci concentrée sur Nuxt et sa communauté. Le projet semble très prometteur et gagne en traction et en maturité de mois en mois.

State animations: Getting them right

Eduardo San Martin Morote - slides

Eduardo nous explique pourquoi il est difficile de trouver le juste milieu entre une interface ultra statique et une interface bordélique à cause d’un surplus d’animations. Il propose ensuite quelques outils adaptés à Vue.js.

Une interface contenant trop d’animations aura tendance à perdre l’utilisateur. Les animations doivent donc être utilisées subtilement, lorsqu’elles ont un sens et apportent de la valeur :

• les spinners de chargement ou des choses qui sont en train de se produire
• les composants qui requièrent l’attention de l’utilisateur
• tout ce qu’on veut rendre fun !

Avec Vue.js, on dispose de plusieurs outils pour animer des composants.

Pour l’apparition, la disparition ou la réorganisation de composants ainsi que les propriétés CSS, on peut utiliser les “transition” ou “transition-group” (basées sur des conditions, des boucles et des booléens).

Viennent ensuite les animations à état (state animations). Pour passer d’un état à un autre, il existe des fonctions dites de “easing” et celles plus complexes de calculs physiques.

En pratique, il existe des bibliothèques de tweening/easing/spring déclaratives (VueTweezing, TweenJS, Motion) qui facilitent l’insertion de ce type d’animation, dont Eduardo nous fait la démonstration.

Le talk d’Eduardo (développeur de la core team Vue) était très bien ficelé, dynamique, ludique et donnait envie de s’amuser avec les animations sur Vue.

Vous pouvez d’ailleurs retrouver régulièrement ses talks dans les meetups parisiens, ou à Best of Web comme l’année dernière.

Building reusable UI components in Vue. What have we learned from building them for Kendo UI

Plamen Zdravkov (Kendo UI)

Ce talk était principalement basé sur l’expérience de Plamen chez Kendo UI, société qui développe des composants web depuis l’époque de jQuery.

Avec les frameworks modernes, le paradigme du développement web a changé : on ne pense plus en premier au DOM, mais à la  donnée. Les pages sont maintenant toutes découpées en composants réutilisables.

Un exemple d’implémentation d’un composant en Vue.js est présenté :

• Pour les classes CSS dynamiques, on utilise les computed properties
• Pour lancer des évènements, on utilise la fonction $emit
• Pour rendre un composant personnalisable, on peut utiliser le concept de slot

Le talk ne s’adressait malheureusement pas au bon public, puisqu’il s’agissait de comprendre comment construire un composant réutilisable lorsqu’on est habitué à d’autres technos (comme jQuery). Or la conférence était centrée sur Vue, les participants étaient sûrement pour la plupart déjà au fait des astuces présentées.

Unit testing Vue components: Why test, what to test, and how to test Vue components

Edd Yerburgh (creator of vue-test-utils) - slides

Le créateur de vue-test-utils revient sur l’intérêt de tester unitairement son front, et comment le faire.

L’explication commence avec des exemples basiques, puis de plus en plus élaborés, pour démontrer l’intérêt d’utiliser Jest + vue-test-utils (comme dans un certain article de blog OCTO).

vue-test-utils est un utilitaire équivalent à Enzyme pour React, qui permet de facilement instancier des composants Vue dans les tests unitaires, pour ensuite simuler des interactions (inputs) et tester leur comportement (outputs).

Cela permet d’éviter des tests fragiles car trop proches de l’implémentation tout en restant bien isolé à l’échelle d’un composant.

De plus, Jest apporte sa facilité de configuration, et surtout le snapshot testing, qui permet de tester tout le contenu statique du composant, en “photographiant” son état après instanciation, pour ensuite faire des tests de non régression.

Le talk était très intéressant et pédagogique, puisqu’il reprenait les fondements du test unitaire (c’est d’ailleurs amusant de noter que seulement 10% de la salle environ en faisait sur ses composants Vue), pour ensuite voir comment les appliquer concrètement et efficacement avec Jest et vue-test-utils.

How to server-render an application with Vue.js

Sebastien Chopin (Nuxt co-author) - slides

Le deuxième frère Chopin de la journée, également co-créateur de Nuxt.js vient nous expliquer comment implémenter le SSR dans une application Vue.js.

Le Server Side Rendering n’est pas une nouveauté, c’est même la façon traditionnelle de faire du web avec des langages comme PHP, Ruby ou Java.

Ce qui est nouveau, ce sont les applications universelles, qui rassemblent le meilleur des deux mondes entre SSR et SPA :

• chargement de la première rapide et complet (SSR)
• navigation fluide (SPA), car côté client (+ requêtes Ajax)
• Amélioration du SEO, et possibilité de générer dynamiquement les headers pour le partage sur les réseaux sociaux

Sébastien fait ensuite une explication pas à pas, pour rendre universelle une appli Vue existante, pour arriver à la fin à un résultat similaire à Nuxt (avec Vuex, et Hot Module Reload).

La démonstration de Sébastien Chopin était très technique, et expliquait en détail une implémentation du SSR sur Vue à l’état de l’art (ce qui aboutit à Nuxt). Ce n’était pas toujours facile de suivre chaque étape, car les explications étaient parfois très rapides pour quelqu’un qui ne s’est pas déjà confronté au problème.

Moving from Angular (v5+) to Vue

Gerard Sans

Gérard Sans nous a gratifiés d’un des talks les plus fun de la journée. C’est un développeur Google spécialisé dans le Web, publie régulièrement des articles et se définit lui-même comme un Angular Fanboy (et tout le monde se demande ce qu’il vient faire dans une conférence Vue.js).

Il a également monté la première conférence Web se passant sur un bateau de croisière, pendant une croisière aux Bahamas et appelée ng-cruise. Autant dire que le gars aime bien se marrer.

Plus sérieusement, Gerard nous explique son voyage (haha) à la découverte de Vue.js, dans l’optique d’élargir sa connaissance du Web.

Parfois, lorsqu’on s’investit tant dans un framework, on peut rater des choses super cool que font d’autres frameworks.

On rappelle que Vue est en développement depuis 2014, quand même, c’est-à-dire 2 ans avant la sortie d’Angular 2 et qu’il n’a cessé d’évoluer depuis alors qu’Angular se perd dans des versions obscures (2 -> 4 -> 5)

Vue a réussi à intégrer le SSR alors qu’Angular Universal se perd en développement éternel. Bref, il garde un oeil très critique sur son framework de coeur.

S’en suit une comparaison entre les deux frameworks. Gerard explique que les deux écosystèmes sont sensiblement proches (TypeScript, Apollo, support de GraphQL, Ionic, etc), ainsi que les performances. Il a d’ailleurs été étonné par la polyvalence de Vue.

La différence se fait notamment sur la taille de la communauté et c’est normal car la communauté de Vue est encore assez immature.

Il constate également que Vue est plus flexible et produit moins de code boilerplate afin de déclarer des composants.

Finalement, le choix d’un framework JS (parmi les 3 ou 4 leaders) n’est pas si important car ils se valent plus ou moins tous. Ce n’est qu’une question de contexte, et de préférence personnelle.

Vue Development in CodeSandbox

Ives van Hoorne - slides

Ives, dont le prénom se prononce Eeeeevs, mais vous pouvez l’appeler Flip, est incroyable. Il a 19 ans, n’a pas encore terminé ses études de Computer Science à l’université d’Amsterdam, mais il a déjà des années d’avance sur tout le monde.

Alors qu’il s’ennuyait lors d’un cours interminable de Java (avouons-le, on a tous subi ce cours), Ives tentait de répondre à une question épineuse : "et si j’avais mon environnement de développement disponible sur le web ?".

Il a d’abord développé un petit outil, qu’il a candidement nommé React Sandbox puisqu’il travaillait sur un projet en React. Dans cet outil, il est possible d’écrire son code sur le panel de gauche et de le voir transpilé puis affiché sur le panel de droite à l’aide de la fonction diabolique `eval()`.

React Sandbox était limité :

• Tout doit être synchrone
• Pas de parallélisation
• Modules non supportés (.Vue -> {.css, .js, .js}
• Préprocesseurs non supportés (SASS, CSS, css-modules)

Avec un camarade et ami, Ives a ensuite fait évoluer son outil et l’a renommé CodeSandbox. C’est un IDE online qui croît en popularité et qui vise à proposer le confort d’un IDE local dans le navigateur.

CodeSandbox permet de commencer à développer sans être obligé de gravir la montagne de technologies à comprendre pour un projet JavaScript. Il s’occupe de la transpiration (Babel), de l’exécution des tests (Jest), du bundling (Webpack), de l’installation de dépendances (npm), du déploiement et des commits.

Le talk se termine par une excellente démo de CodeSandbox, qui, évidemment, supporte Vue.js.

Create an Engaging Native Mobile App with Vue and NativeScript

Jen Looper - slides

NativeScript (à essayer ici) est un framework pour développer des applications mobiles natives multiplateformes (iOS et Android).

Dans son utilisation, NativeScript est très proche de JavaScript.

L’idée est donc venue d’allier la facilité de développement d’une application Vue, avec la puissance de NativeScript en créant nativescript-vue.

Ce framework rend le développement d’application mobile accessible aux développeurs Vue, et permet de mutualiser du code entre une appli web et son homologue mobile.

Pour utiliser nativescript-vue, il suffit de changer l’import de Vue dans l’application :

“ import Vue from ‘nativescript-vue’ ”, qui n’a pas besoin d’élément racine, et utilisera un markup spécifique à NativeScript dans les templates.

La présentation continue avec une application hybride d’enseignement de langue, avec une appli web côté enseignant (en Vue), et une appli mobile côté élève (en nativescript-vue).

L’application mobile a un rendu natif, et utilise le micro du téléphone pour la mesure de qualité de l’accent de l’élève.

Les deux applications comportent des pans entiers identiques, mais pour l’instant il s’agit encore de duplication.

Dans le futur, il devrait être possible de mutualiser composants web et natif dans un même fichier, avec un script commun mais des templates dédiés (<template native> et <template web>).

Le talk se termine sur l’annonce de nativescript-vue en 1.0 !

Le talk était intéressant, et la démonstration techniquement maîtrisée. La promesse entrevue lors de ce talk d’une base de code unique pour une webapp et une application mobile native semble très prometteuse.

Conclusion

La conférence était globalement intéressante, et rassemblait des speakers parmi les plus influents de la communauté. Malgré quelques talks un peu poussifs, le niveau était globalement bon, et donne un aperçu de la maturité de l’écosystème, mais également des idées de sujets à creuser par la suite.