Vue.js : overview

Introduction

Vue.js est un framework Javascript open source utilisé pour développer des interfaces web interactives. Contrairement aux autres frameworks monilithiques, Vue.js est architecturé pour être adopté progressivement.

Il est aujourd’hui l’un des frameworks les plus utilisés pour simplifier le développement web. Le cœur de la librairie se concentre sur la couche visuelle d’une interface et il est très facile de l’intégrer dans un projet existant. Ainsi, il laisse la possibilité d’intégrer d’autres librairies et outils, et est parfaitement capable de construire une application de type single-page (SPA).

L’installation de Vue.js est triviale, notamment avec les commandes fournies par vue-cli. Avec une courbe d’apprentissage rapide, un développeur peut facilement appréhender et créer des interfaces Web interactives en peu de temps. Vue.js a été créé par Evan You, un ancien employé de Google. La première version de Vue.js est sortie en février 2014. Il a récemment atteint les 94.000 étoiles sur GitHub, ce qui démontre sa popularité.

Cet article se concentrera principalement sur le noyau de Vue.js. Sachez simplement que vous aurez besoin d’une bibliothèque supplémentaire si vous souhaitez construire une SPA complète (ex : routing via Vue-router, inter-component communication via Vuex …).

Fonctionnalités

Templates

Vue.js utilise une syntaxe de modèle HTML qui vous permet de lier de manière déclarative le DOM rendu aux données de l’instance Vue.js sous-jacente. Sous le capot, Vue.js compile les templates en un rendu de DOM virtuelles. Combiné avec le système de réactivité, Vue.js est capable de calculer le nombre minimal de composants à ré-afficher et d’appliquer le minimum de manipulations au DOM lorsque l’état de l’application change.

En utilisant Vue.js, vous pouvez utiliser la syntaxe du modèle HTML ou choisir d’écrire directement les fonctions de rendu en utilisant JSX.

Vue.js recommande d’utiliser des modèles pour créer votre code HTML dans la grande majorité des cas.

  • « Hello World » syntax du modèle HTML de Vue.js :

<template>
    <!-- inclure du code HTML que rend le rendu de Vue.JS-->
</template>
 
<script>
    /* Pas nécessaire pour un composant. Incluez le comportement javascript dans le composant. */
</script>
 
<style scoped>
    /* Inclure le style de composant */
</style>

Nous déclarons notre composant JavaScript en utilisant des options passées en tant qu’objet JavaScript, telles que :

{
  name: 'HelloWorld',
  data() {
    return {
      compteur: 0,
    };
  },
};

Vue.js offre plusieurs options que nous pouvons utiliser afin de transmettre du comportement à notre objet JavaScript :

  • data : Méthode qui est appelée lors de la création du composant et qui permet à Vue.js de rendre vos variables réactives. La méthode data doit renvoyer un objet contenant toutes les variables que vous voulez réactives.
  • name : Déclarez le nom du composant vue.
  • components : Déclarez chaque composant enfant utilisé par le composant.
  • props : Propriétés transmises du parent au composant enfant.
  • methods : Objet qui contient toutes les méthodes.
  • computed : Similaire aux methods, il permet d’exécuter des fonctions. Lorsqu’une méthode s’exécute entièrement à chaque fois qu’un nouveau rendu se produit, une fonction computed crée un cache du résultat précédent afin d’économiser beaucoup de temps de calcul. Voici un exemple simple d’utilisation d’une propriété computed :

À ce stade, le modèle n’est plus simple et déclaratif. Vous devez le regarder pendant une seconde avant de réaliser qu’il affiche le message à l’envers. Le problème s’aggrave lorsque vous souhaitez inclure le message inversé dans votre modèle plusieurs fois. C’est pourquoi, pour toute logique complexe, vous devriez utiliser une propriété computed.

Voici une version computed :

Pourquoi avons-nous besoin de la mise en cache ? Imaginons d’abord que nous ayons une propriété computed A coûteuse, qui nécessite de boucler un énorme tableau et de faire beaucoup de calculs. Ensuite, nous pouvons avoir d’autres propriétés computed qui dépendent à leur tour de A. Sans mise en cache, nous exécuterions le getter de A beaucoup plus de fois que nécessaire ! Dans les cas où vous ne souhaitez pas mettre en cache, utilisez une méthode à la place. Rappelez-vous que la méthode exécute toujours une fonction, tandis que computed peut utiliser son cache lorsque ses variables dépendantes n’ont pas changé.

Réactivité

L’une des caractéristiques les plus distinctives de Vue.js est le système de réactivité discret. Les modèles sont simplement des objets JavaScript. Lorsque vous les modifiez, la vue est mise à jour. Vue.js rend la gestion d’état très simple et intuitive. Il fournit un ré-rendu optimisé sans que vous ayez à faire quoi que ce soit. Chaque composant conserve une trace de ses dépendances réactives lors de son rendu, de sorte que le système sache exactement quand effectuer un nouveau rendu et les composants à restituer.

DOM Virtuel

Vue.js utilise le DOM virtuel, qui est également utilisé par d’autres frameworks tels que React.js, Ember.js, etc. Les modifications ne sont pas apportées au DOM, mais à une réplique du DOM créée sous la forme de structures de données JavaScript. Chaque fois que des modifications doivent être apportées, elles sont apportées aux structures de données JavaScript et cette dernière est comparée à la structure de données d’origine. Les modifications finales sont ensuite mises à jour vers le DOM réel, que l’utilisateur verra changer. C’est excellent en termes d’optimisation et les changements peuvent être faits à un rythme plus rapide.

Data Binding

La fonction de data binding aide à manipuler ou affecter des valeurs aux attributs HTML, changer le style, assigner des classes à l’aide de la directive de liaison appelée v-bind (ou « : » tel que: class = «  ») disponible avec Vue.js.

Vue-CLI

Vue.js peut être installé par ligne de commande à l’aide des commandes fournies par vue-cli. Il aide à construire et à compiler facilement un projet. Il comprend tout ce dont vous avez besoin pour développer une application Vue.js: hot-reload, webpack, vue-loader et vue, profil dev, prod …

Projet Vue.js – Initialisation

npm install -g @vue/clivue
init webpack my-project
cd my-project
npm install npm run dev

Ressources

Rapide comparaison avec Angular

Comme l’image n’est pas vraiment révélatrice, Vue.js est beaucoup plus simple à appréhender qu’Angular et beaucoup moins verbeux. En réalité, Angular a besoin de plus de lignes que celles sur l’image mais cela donne une idée de comparaison syntaxique.

Étiquettes:

2 commentaires sur “Vue.js : overview”

  1. Bonjour Saidi, merci pour votre retour.

    Aujourd’hui on peut noter plusieurs points où Angular et Vue s’opposent :

    – D’abord, lorsqu’Angular demande essentiellement l’utilisation de TypeScript ( sa documentation entière est écrite en TypeScript par exemple ) Vue laisse le choix au développeur d’utiliser du Javascript ou bien du TypeScript. ( à noter que l’on peut utiliser Angular sans Typescript mais celà relève du challenge ).
    – Ensuite une fois un projet Vue compilé (Vue 2, Vuex, Vue Router) est deux fois moins lourd qu’Angular compilé ( ~30ko zgippé pour Vue, ~65ko zgippé pour Angular). La raison est que Vue est évolutif et n’embarque que ce dont une application Vue a besoin pour fonctionner. Ainsi, Vue « core » n’embarque pas de gestion du routing ou de librairie http par exemple et laisse le choix au développeur de n’embarquer que ce dont il a besoin.
    – Là où Vue diffère grandement d’Angular ( au même titre que React d’ailleurs ) c’est la liberté qu’il offre en terme d’architecture d’application. Alors que Vue s’adopte de façon incrémentale, Angular impose sa vision du design d’application de manière générale.
    – Non des moindres, Vue a une courbe d’apprentissage moins raide qu’Angular. La complexité d’Angular est due au fait que son design est conçu d’abord pour répondre à de grandes applications rendant ainsi le framework plus difficile à utiliser pour des développeurs moins expérimentés.

    Concernant le routing avec Vue, il existe plusieurs librairies qui le propose cependant la librairie officielle de la Core Team Vue est Vue Router.
    Créer une SPA avec Vue + Vue Router est très rapide. Lorsque vous développez des composants Vue pour votre application, Vue Router va simplement appliquer des routes à des composants à l’aide d’un simple objet JSON passé à l’instance Vue de votre application.
    On retrouve dans Vue Router tout le nécessaire du routing : mode historique/hash, paramètres optionnels, déclencheur pré/post rendu, route imbriqué, transfert de propriétés …

  2. Très bon article , bien structuré bien fait. Votre comparaisons avec Angular exprime quelques similarités, mais qu’est ce qui est différent par rapport Angular ? Comment se fait le routage avec VueJS par exemple ?

Laisser un commentaire

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