Publié par
Il y a 1 année · 5 minutes · Front

Vue.js : Un challengeur de poids

 

vuejs-logo

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é.

 

framework-sizes

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.

 

rendering-frameworks

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.

 

logos

 

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.

Dmytro Podyachiy

Développeur full stack passionné par le monde open source, Dmytro travaille depuis plusieurs années dans l’écosystème Java sur des missions innovantes. Évangéliste du framework Angular, il l’utilise depuis presque 3 ans. Intéressé par les langages différents, il utilise notamment Scala et Javascript coté serveur.

5 thoughts on “Vue.js : Un challengeur de poids”

  1. Publié par Jocelyn LECOMTE, Il y a 1 année

    Intéressant mais la conclusion me laisse un peu perplexe.
    Du coup quelles sont les limites de vue.js par rapport à angular ?

  2. Publié par Dmytro Podyachiy, Il y a 1 année

    Bonjour Jocelyn,
    Angular est un framework complet, “tout-en-un”, avec beaucoup d’outils inclus directement dans le framework. Mais parfois (souvent) vous êtes obligé de faire des choses en “Angular way”. En revanche, Vue est très flexible et doit être considéré une bibliothèque plutôt qu’un framework. Il est beaucoup plus facile à apprendre qu’Angular. Je trouve que c’est un avantage certain.
    De l’autre côté, Angular a une communauté plus importante. Par conséquent, il est habituellement plus facile à trouver toute sorte de composants prêts à intégrer.

  3. Publié par fabi, Il y a 2 mois

    Comment vue.js pourrait etre plus rapide que vanilla.js ??? c’est le plus rapide possible normalement….j’ai raté un episode? vue.js est codé dans un autre langage que vanilla.js ?

  4. Publié par Dmytro Podyachiy, Il y a 2 mois

    Bonjour Fabi,
    Vanilla.js est en effet plus rapide que n’importe quel framework.
    Il faut lire le graphique comme suit: VanillaJS est le point de repère (1x). Le surcoût de Vue 2.0 est de 1.37x (un peu plus « lent » que sans framework du tout).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *