Abandonner React.js pour utiliser Vue.js

Hassane Moustapha
Jul 28, 2017 · 4 min read

Alors! Vous êtes développeurs React et vous avez envie d’explorer Vue.js ? Cet article est pour vous.

React et Vue se ressemblent beaucoup. Disons “café court” et “café long”. Presque tout ce que vous pouvez avec l’un est plus ou moins simple à réaliser avec l’autre et surtout avec beaucoup de similitudes. Cependant, dans cet article, je vais me concentrer sur les différences qu’il y a entre les deux.


Sont-ils si différents l’un de l’autre ?

A vrai dire, React et Vue présentent plus de similitudes que de différences.
Both are JavaScript libraries for creating UIs

  • Tous les deux sont super rapides et très légers
  • Tous les deux ont une architecture basée sur les Composants
  • Tous les deux utilisent un DOM virtuel
  • Tous les deux peuvent être mis dans un seul fichier HTML ou dans un module (dans une configuration de build plus sophistiquée)
  • Tous les deux se concentrent sur la gestion du Composant, de ses données et de son cycle de vie
  • Tous les deux ont souvent recours à des librairies externes pour la gestion de l’état de l’application (Application State) et la gestion des routes

Les principales différences entre les deux ( React et Vue ) se résument à :
- Vue utilise des templates HTML là où React utilise du JSX (Javascript)
- Vue utilise un état interne mutable alors que celui de React est immutable
- Vue se base sur les concepts de la programmation reactive pour système automatique de “re-rendering

Nous allons voir tout ça un peu plus en détails.


Les composants Vue.js

Les composants sont définis en utilisant une fonction appelée .component exposée par l’API de Vue.js. Cette fonction prend en entrée deux arguments : un identifiant, qui sera utilisé comme nom du Composant, et une définition d’objet. Exemple:

Vous remarquez des ressemblances avec la définition d’un composant React mais aussi quelques différences dont ’’template’’ et ’’computed’’.

Template

L’attribut template du composant contient une chaîne de caractères représentant le HTML qui sera utilisé pour afficher le rendu final. Et pour ce faire Vue utilise un compilateur intégré pour transformer ce template en une fonction render au moment de l’exécution du fichier js contenant le composant. Cette fonction render sera utilisée par le DOM virtuel.

Vous ne pourrez pas utiliser l’attribut template si vous décidez de définir une fonction render dans votre composant.

Le cycle de vie

Les composants Vue ont un cycle de vie très similaire à celui des composants React. Par exemple, la fonction created est appelée au moment où l’état interne du composant est prêt à être utilisé et avant que le composant ne soit monté sur le DOM.

Une différence majeure entre le cycle de vie de React et celui de Vue: l’absence d’un équivalent à la function React shouldComponentUpdate. Une telle fonction n’a pas lieu d’être dans un monde réactif.

Re-rendering

L’une des étapes de l’initialisation de Vue est la transformation des propriétés retournées par data et la création de getters et setters pour chaque attribut de ces propriétés. Ces propriétés représentent l’état interne du Composant.
Ces getters et setters sont utilisés pour facilement suivre les changements de valeur de chacun des attributs et aussi pour gérer la dépendance qu’on peut définir entre les attributs ( computed properties …).

Etat interne mutable

Pour changer l’état interne d’un composant, nul besoin d’utiliser une fonction comme setState. Vous pouvez le changer directement.

Quand un attribut ou propriété de l’état interne change, le setter défini automatiquement par Vue est appelé. Ce setter va changer la valeur de l’attribut concerné mais aussi informer Vue qu’un attribut a changé pour que toutes les parties de la page soient ré-affichées si nécessaire.

Si l’attribut changé est passé en Prop à un autre composant, Vue saura qu’il y a une dépendance et va automatiquement re-render le second composant. C’est pour cela que nous n’avons pas besoin d’une fonction shouldComponentUpdate.

Layout global

Vue.js, tout comme Angular, utilise un layout global différent de celui défini et retourné par le template ou la fonction render du Composant. Vue a besoin de se greffer à la page à un endroit donné.

A la différence de React, on peut rajouter du markup à la page.

Directives

Tout comme Angular, Vue permet d’enrichir les templates via des directives pour ajouter de la logique d’affichage. Ces directives sont des attributs HTML spéciaux préfixés de v-. Exemple: v-if pour les affichages conditionnés, v-bind pour lier un attribut HTML à un attribut du composant Vue.

Le workflow de développement

Vue n’a pas encore un outil officiel comparable à create-react-app que j’ai déjà couvert dans un article que vous trouverez plus bas.
Cependant il y a un outil proposé par la communauté: create-vue-app.

Sur le site officiel de Vue.js, il est recommandé d’utiliser vue-cli pour la génération de projets Vuejs.

> vue init un-template-donné nom-de-votre-projet

Le plus simple projet Vue.js

Evan You, le créateur de Vue, l’a décrit comme étant “un framework progressif” parce qu’il permet de facilement faire évoluer une application Vue allant d’un simple composant à une application complexe.

Pour ajouter Vue à une une page HTML simple:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

C’était assez simple jusque là …

On se retrouve dans d’autres articles pour continuer notre voyage dans le monde de Vue.js.

NB: Pour plus d’infos sur create-react-app
https://medium.com/@hkairi/apprendre-reactjs-create-react-app-70d597287943

Hassane Moustapha

Written by

Independent consultant. I love Ruby, Elixir, Haskell, Elm and …javascript

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade