Vue.js : le “petit nouveau”
Vue.js : le “petit nouveau”
Nous avons pendant longtemps eu droit au même match entre React et Angular. Cependant, un challenger commence à se faire connaître et il pourrait bien satisfaire notre besoin d’un framework simple et facile à maintenir.
Pour vous donner une idée, voici ce que donnent les courbes d’apprentissage des trois têtes d’affiche :
Nous allons découvrir dans cet article le “petit nouveau” : Vue.js.
Pourquoi Vue.js ?
Vue.js est la librairie frontend hype du moment, elle n’est soutenue par aucune grosse entreprise, mais développée par une petite équipe menée par un ancien employé de Google : @Evan You.
Vue.js reprend à la fois les concepts de React et de Angular. Beaucoup de développeurs s’accordent à dire qu’il reprend le meilleur des deux frameworks. Cependant, il apporte également sa part d’innovation.
Reprise de concepts de AngularJS et de React
Côté AngularJS
Vue.js reprend le pattern MVVM (Model View-Viewmodel) fortement utilisé par AngularJS, avec les directives pour manipuler le DOM et les filtres pour formater les données.
Nous avons ainsi à disposition plusieurs directives :
- rendu conditionnel : (v-if, v-show)
- boucles (v-for)
- gestion des événements (v-on)
- two way binding pour les formulaires (v-model)
- attribution dynamique d’un paramètre (v-bind)
L’écriture du code devient plus lisible et la quantité de code en Javascript est réduite.
Côté React
Vue.js reprend le concept de Virtual DOM rendu populaire par React. Le virtual DOM est une représentation allégée du DOM stockée en mémoire qui va subir les modifications lorsque le state change. Finalement, les différences entre le virtual DOM et le DOM vont être calculées sous la forme d’un patch qui sera appliqué aux parties du DOM qui doivent être modifiées.
Une librairie de gestion du state sur mesure : Vuex
La librairie de gestion du state Vuex est également plus simple que son grand frère Redux, tous les deux inspirés de Flux.
Tout d’abord, il y a une différence de paradigme dans la gestion du state entre ces deux librairies.
En effet, Redux a une approche purement fonctionnelle qui consiste à maintenir un state non mutable et de calculer le state suivant grâce aux reducers (qui sont des fonctions pures, sans effet de bord donc), à l’inverse Vuex utilise un state mutable.
C’est également cette différence qui fait de Vuex le gestionnaire d’état de Vue.js par excellence.
Pour faire simple, les instances de Vue détectent les modifications du state mutable.
Il est cependant possible d’utiliser Redux avec Vue.js grâce à des connecteurs.
Les composants mono-fichiers :
Le développement dans Vue.js se fait par composants mono-fichiers (Single File Components) qui consiste à réunir le template, le Javascript et le css dans un seul fichier avec une extension “.vue”. Ceci permet de limiter le css au composant, de débloquer la coloration syntaxique, et d’utiliser des préprocesseurs comme Babel, Pug, Stylus, Scss, Sass, etc …
Les points forts de Vue.js :
- Une des librairie les plus simples à utiliser sur le marché frontend
- Beaucoup de code boilerplate qui disparaît grâce aux concepts repris de AngularJS
- La rapidité et réactivité des composants grâce au virtual DOM
- Les fichiers “.vue” qui permettent de ranger le code par composant et non en couches (HTML/CSS/Javascript)
- Une librairie de gestion de state simplifiée : Vuex
- C’est une librairie très bien documentée et relativement simple à apprendre.
Mais si vous souhaitez gagner du temps dans votre développement frontend, cela ne suffit pas. En effet, il vous reste à gérer webpack, le routing, le server side rendering, le code splitting, …
Le framework Nuxt.js permet de résoudre la plupart de ces désagréments. C’est le sujet que nous traitons dans le prochain article sur Nuxt.js.
