Dans cet article je vais vous parler de Vue.js – le framework qui gagne très vite en popularité grâce à son alliance de simplicité, portée à l’extrême, et d’une richesse digne des meilleurs frameworks modernes. Il vient challenger les deux frameworks de référence actuellement présents sur le marché : React.js et Angular 2.
Vue.js : le pitch
Vue.js a été créé en 2014 par Evan You sous licence MIT non modifiée. La version 2 est sortie il y a un peu plus d’un mois, apportant de nombreuses améliorations, notamment, l’adoption du DOM virtuel ou encore le rendering côté serveur.
Même si Vue.js est inspiré d’AngularJS, il est plutôt proche de React fonctionnellement. Tous les deux utilisent le DOM virtuel, préconisent l’adoption des composants réactifs avec un flux mono-directionnel et se focalisent sur le rendering et le data binding (en laissant le routage et la gestion de l’état aux bibliothèques externes).
Les avantages par rapport aux concurrents
Vue.js se distingue de React et des autres frameworks sur plusieurs aspects.
Léger
L’application Vue 2.0 complète, compilateur inclus, ne fait que 23 Ko, ce qui est bien plus léger que les autres frameworks du marché.
Tailles des frameworks
Nous pouvons dire que la taille des frameworks n’est pas très importante pour la plupart des applications Desktop. Celle-ci le devient pour les applications mobile qui sont servies sur des réseaux lents de type 3G.
Performant
Tous les frameworks modernes sont très rapides. Néanmoins, Vue 2 gagne sur tous les points non seulement vis à vis d’Angular 2, mais aussi de React.js, ce qui l’impose comme un des frameworks les plus rapides du marché. Les benchmarks établis en collaboration avec la communauté React, ainsi que les benchmarks externes placent Vue 2 devant ses concurrents en rapidité. En revanche, nous pouvons constater que cette différence est assez modeste.
Performance du rendering des frameworks
Simple
Vue.js excelle par sa simplicité poussée à l’extrême. Débuter avec Vue.js est très facile. Vous n’avez pas besoin de bibliothèques externes, ni de plugins, même si plusieurs d’entre eux sont disponibles. Le code source est très lisible, la documentation est le seul tutoriel dont vous aurez besoin. Le créateur du framework dit qu’une journée d’apprentissage de Vue.js est généralement suffisante pour écrire des applications non triviales.
Maturité
Features
Malgré sa simplicité, le framework est très riche. Nous trouverons, entre autre, l’utilisation de Virtual DOM (fork de snabbdom), l’approche orientée composants (qui n’est d’ailleurs pas imposée contrairement à ce que l’on trouve en React ou Angular 2), l’encapsulation de CSS et du server side-rendering. La version 2 de Vue.js supporte TypeScript. Il est même possible de surcharger la méthode de rendering et d’utiliser JSX pour construire votre vue à l’image de React.js.
Scaling up
Vue 2 offre tous les outils nécessaires pour créer de grandes applications niveau entreprise. Comme React, Vue.js offre une bibliothèque pour le routage vue-router, ainsi qu’une puissante solution de gestion d’état inspirée par Elm : Vuex. Contrairement à React, ces bibliothèques sont maintenues et supportées par la core team, ce qui leurs apporte plus de cohérence et de stabilité. Avec Vue-CLI vous pouvez bootstrapper votre application en quelques secondes en utilisant les différents systèmes de build : Webpack, Browserify ou même sans système de build.
Scaling down
Tandis que Vue.js grandit aussi bien que React (voire mieux), il scale down beaucoup mieux que ses concurrents. Si vous avez besoin de dynamiser tout simplement votre site web pour y ajouter quelques formulaires ou quelques petites fonctionnalités, vous n’aurez besoin d’inclure qu’une seule balise script :
<script src="https://unpkg.com/vue/dist/vue.js">
… et le tour est joué : vous avez désormais accès à toute la puissance de Vue 2 dans votre site web.
Tests
Tous les outils de tests qui utilisent le système de compilation basé sur modules seront compatibles avec Vue.js. La documentation du framework recommande néanmoins d’utiliser la suite classique pour les tests unitaires : Karma, Mocha, Sinon.JS et Chai. Tournez-vous vers Nightwatch.js pour les tests end-to-end.
Vue.js native
Les ingénieurs chez Alibaba, le plus grand site e-commerce en Chine, travaillent d’arrache-pied sur le projet Weex qui jusqu’à maintenant utilisait une syntaxe proche de Vue.js.
Depuis peu, les équipes d’Alibaba et de Vue.js travaillent main dans la main pour intégrer Vue.js à leur plateforme et ainsi pouvoir utiliser les composants Vue dans les applications mobiles. Cela permettra aux développeurs d’écrire ces fameuses applications universelles qui peuvent être utilisées sur le Web, iOS et Android ! Oui, comme ReactNative ou NativeScript.
Même si ce projet est encore très jeune, il avance vite et vaut le coup d’être surveillé.
Communauté
Le point faible de Vue.js aux yeux des décideurs est qu’il reste un framework d’une « seule personne ». Si derrière React.js et Angular 2 nous trouverons de grandes sociétés connues mondialement, derrière Vue.js ce n’est qu’Evan You. Certes, la communauté Vue.js grandit jour après jour, mais cet argument peine encore à convaincre les SI des grands comptes.
Cela dit, nous tous connaissons plusieurs exemples de frameworks abandonnés par les grandes sociétés sans préavis – pour n’en citer qu’une, je pense à GWT.
Conclusion
Pour conclure, Vue.js ne joue vraiment pas dans la cour d’Angular 2, mais vous n’avez pas toujours besoin d’une telle puissance. La puissance d’Angular 2 est contrebalancée par la complexité et une courbe d’apprentissage assez raide.
Vue 2 est sûrement un framework à considérer pour votre prochain projet.