Retour sur Vue.js Amsterdam 2019

Frontend Developper Love et Vue.js Amsterdam sont deux conférences dédiées au développement front et plus spécialement au framework Vue.js. Elles ont eu lieu du 13 au 15 février 2019 à … Amsterdam (oui, bon, c’était pas trop difficile à deviner) dans un théâtre qui peut accueillir jusqu’à 1000 personnes, et ce fût rempli durant ces 3 jours !
Si les speakers sont internationaux, c’est aussi le cas pour les participants: 53 nationalités différentes !
Les talks de ces 3 jours furent variés, mais certaines thématiques sont apparues plus intéressantes et nous aimerions plus particulièrement insister sur ces points.

> Pour info, la liste des slides mis en ligne est disponible sur GitHub

Vue.js se porte bien, merci pour lui !

S’il n’y a pas eu de grandes annonces sur le futur de Vue.js, Evan You a indiqué quelques chiffres qui l’ont lui-même impressionné :

• ~ 3.3 millions de downloads par mois sur NPM
• ~ 461 millions de hits sur jsDelivr

Durant 2018, l’année fut portée notamment par la sortie de VuePress, Vue UI et la sortie de Vue.js 2.6. Voici quelques nouveautés concernant cette version :

• Server prefetch pour le rendu côté serveur
• Améliorations et nouvelles fonctionnalités pour les slots Vue.js
• Arguments dynamiques pour les directives
  

La version 3 de Vue.js n’a pas de date de sortie officielle. D’après Evan You : “ça sortira quand ça sortira !”. La core team Vue.js ne se fixe pas de deadline sur la date de sortie. Aucune pression et c’est très bien comme ça !
Concernant cette nouvelle version, voici un petit aperçu de ce qui devrait arriver   :

• L’intégralité du coeur de Vue.js sera réécrite avec TypeScript (ce changement n’aura aucun d’impact pour les utilisateurs, qui auront toujours la possibilité d’utiliser Vue.js avec ou sans Typescript)
• Le mécanisme de réactivité des données sera amélioré pour pallier certaines limitations de la version 2.0, par exemple la détection d’ajout/suppression de propriétés sur un objet.
• De nombreuses optimisations pour rendre Vue.js encore plus petit et plus performant.

En parallèle, Vuex devrait également arriver avec quelques nouveautés, par exemple :

• • La fusion des actions et mutations dans le cycle du store, ayant pour objectif de simplifier le pattern.
  • Une meilleure intégration de TypeScript pour Vuex. Actuellement l’implémentation de Vuex ne permet pas de profiter pleinement des avantages de Typescript

À noter qu’il existe depuis quelques mois, un projet rfcs (Request For Comments) sur Github pour permettre à chacun de participer aux discussions sur les nouvelles fonctionnalités des prochaines versions.

Nuxt.js, le framework pour des applications universelles

Nuxt.js continue sa montée en puissance: deux talks y étaient spécifiquement dédiés (et il fut aussi cité dans d’autres), une introduction à Nuxt et une présentation par le co-créateur Sébastien Chopin des nouveautés de la v2.4 et de ce qui arrivera.
Pour information, Vue.js, Nuxt a aussi un projet sur Github pour les discussions sur le futur de Nuxt.
La version 2.4 a amené bon nombre d’améliorations:

• Support de typescript
• Smart prefetching
  • code splitting pour les pages liées avec <nuxt-link>
  • application + performante
• Autocomplete dans VS Code
• Amélioration des bundles SSR
  • applications + light (réduction de la taille des gzip)
• Auto-détection des ”modern bundles”
  • permet de supprimer les polyfills pour les navigateurs les + récents
• Hot Module Replacement (HMR) pour la partie store

En bonus, la notion de commandes (encore dans l’état “expérimental”): il est possible de construire des commandes qui s’ajouteront au CLI nuxt. On pourrait ainsi imaginer la mise en place de commandes spécifiques à une entreprise qui s’intégreront dans le cycle de vie des projets.
Exemple avec la définition d’une commande “calendar” :
Génération automatique d’une aide et utilisation avec la commande “nuxt”:

Performances et optimisations avec Vue.js

Durant ces 3 jours, plusieurs conférences étaient dédiées à l’optimisation des applications Vue.js. Voici quelques règles à suivre si vous souhaitez entamer une démarche d’optimisation sur vos applications Vue.js. (La plupart de ces méthodes sont applicables à n’importe quel type d’application javascript) :
La méthode la plus simple et également la plus efficace pour gagner en performance sur une application Vue.js reste le “lazy loading” des différentes routes qui composent votre application. Cette démarche permet de diviser une application en plusieurs bundle javascript que le navigateur pourra récupérer de manière progressive lors du parcours de l’utilisateur sur l’application.
Il est également important d’utiliser une stratégie de “prefetch” pour les ressources qui seront récupérées via un lazy loading. Ainsi le navigateur pourra précharger dès que possible et de manière non prioritaire les différents bundle javascript. Heureusement, vous n’aurez pas à vous soucier de cette configuration si vous utilisez vue-cli 3, qui injecte automatiquement cette fonctionnalité lors du lazy loading.
Pour aller plus loin, il est également possible de partir du principe que tout ce qui n’est pas directement visible sur une page de votre application (une modal, une tooltip…) peut par conséquent être chargé via du lazy loading. C’est là qu’interviennent les composants asynchrones !
Il existe également de nombreux outils permettant de contrôler facilement la qualité de vos applications, en voici quelques exemples :

• L’outil coverage de chrome devtools permettant de détecter quelles parties de votre code ne sont pas exécutées (et donc potentiellement à charger de manière progressive avec du lazy loading ?) au chargement d’une page.
• Lighthouse permettant de générer un rapport sur une page web. Ce rapport comporte des notes sur différents aspects de la page : (performance, accessibilité, bonnes pratiques, référencement, progressive web app) L’outil propose également des solutions à mettre en place pour progresser sur ces différents points.
• Webpack bundle analyser pour contrôler la taille de vos différents bundle javascript.

La démarche Open Source et la rémunération

Parmi les speakers, la présence de Evan You, venu parler de son statut de mainteneur de projet open source, comment il est passé d’une position confortable de salarié chez Google à celui de développeur indépendant d’un logiciel open source que personne ne paye (la chose la plus difficile à faire comprendre à ses parents 🙂 )
Aujourd’hui, il est sponsorisé par toute personne ou société qui souhaite le soutenir via Patreon. Ce cheminement a été relaté d’un article de blog sur Patreon: https://blog.patreon.com/vue-js-creator-evan-you
Pour compléter cette démarche sur le financement, un certain nombre de speakers ont mis en avant leur compte Patreon ou OpenCollective. Une façon de faire comprendre que le développement open source a un coût et que s’il repose sur la bonne volonté de beaucoup de développeurs qui travaillent sur ces projets en plus de leur travail (merci à eux !!), il y a aussi des personnes qui ont choisi d’en faire leur quotidien en étant full-time sur leur projet et que ce serait bien de les soutenir financièrement ! Soutenons-les !