Vue.js

Un article de Wikipédia, l'encyclopédie libre.
(Redirigé depuis Vuejs)
Vue.js
Description de l'image Vue.js Logo 2.svg.

Informations
Créateur Evan You (尤雨溪)
Première version [1]
Dernière version 3.0.11 ()[2]Voir et modifier les données sur Wikidata
Dépôt github.com/vuejs/vue-nextVoir et modifier les données sur Wikidata
Assurance qualité Intégration continueVoir et modifier les données sur Wikidata
Écrit en TypeScript, Javascript
Environnement Cross-platform
Type Framework JavaScript
Licence Licence MITVoir et modifier les données sur Wikidata
Site web vuejs.orgVoir et modifier les données sur Wikidata

Vue.js (aussi appelé plus simplement Vue), est un framework JavaScript open-source utilisé pour construire des interfaces utilisateur et des applications web monopages. Vue a été créé par Evan You et est maintenu par lui et le reste des membres actifs de l'équipe principale travaillant sur le projet et son écosystème.

La bibliothèque est notamment utilisée par Adobe, Alibaba et GitLab[3].

Présentation[modifier | modifier le code]

Vue présente une architecture progressivement adoptable qui se concentre sur le rendu déclaratif et la composition des composants. Les fonctionnalités avancées requises pour les applications complexes telles que le routage, la gestion d'état et les outils de construction sont offertes par le biais de bibliothèques et de paquets officiellement maintenus[4], Nuxt.js étant l'une des solutions les plus populaires.

Vue permet d'étendre le HTML avec des attributs HTML appelés directives[5]. Les directives offrent des fonctionnalités aux applications HTML, et sont soit intégrées soit définies par l'utilisateur.

Historique[modifier | modifier le code]

Vue a été créée par Evan You après avoir travaillé pour Google en utilisant AngularJS dans un certain nombre de projets. Il a ensuite résumé son processus de réflexion : Je me suis dit : "Et si je pouvais juste extraire la partie que j'aime vraiment dans Angular et construire quelque chose de vraiment léger"[6]. Le premier commit de code source du projet était daté de , et Vue a été publié pour la première fois en février suivant, en 2014.

Fonctionnalités[modifier | modifier le code]

Composants[modifier | modifier le code]

Les composants Vue étendent les éléments HTML de base pour encapsuler du code réutilisable. Il s'agit donc d'éléments personnalisés auxquels le compilateur de Vue attache un comportement. Dans Vue, un composant est essentiellement une instance de Vue avec des options prédéfinies[7]. L'extrait de code ci-dessous contient un exemple de composant Vue. Le composant représente un bouton de base HTML et affiche le nombre de fois où le bouton est cliqué :

<div id="tuto">
	<button-clique v-bind:compte-initial="0"></button-clique>
</div>

<script>
Vue.component('button-clique', {
  props: [ "compteInitial" ],
  data: () => ({
    compte: 0,
  }),
  template: `<button v-on:click="auClic">Cliqué {{ compte }} fois</button>`,
  computed: {
    compteFoisDeux() {
      return this.compte * 2;
    }
  },
  watch: {
    compte(nouvelleValeur, ancienneValeur) {
      console.log(`La valeur de compte est changée de ${ancienneValeur} en ${nouvelleValeur}.`);
    }
  },
  methods: {
    auClic() {
        this.compte += 1;
    }
  },
  mounted() {
    this.compte = this.compteInitial;
  }
});

new Vue({
  el: '#tuto',
});
</script>

Templates[modifier | modifier le code]

Vue utilise une syntaxe de template basée sur HTML qui permet de lier le DOM rendu aux données de l'instance Vue sous-jacente. Tous les templates Vue sont du HTML valide qui peut être analysé par des navigateurs conformes aux spécifications et des analyseurs syntaxiques HTML. Vue compile les templates dans des fonctions de rendu de DOM virtuel. Un template d'objet de document virtuel (ou "DOM") permet à Vue de rendre les composants dans sa mémoire avant de mettre à jour le navigateur. Combiné avec le système de réactivité, Vue est capable de calculer le nombre minimal de composants pour lesquels le rendu doit être ré-effectué et ainsi d'appliquer le nombre minimal de manipulations DOM lorsque l'état de l'application change.

Les utilisateurs de Vue peuvent utiliser la syntaxe des templates ou choisir d'écrire directement des fonctions de rendu en utilisant JSX. Les fonctions de rendu permettent de construire des applications à partir de composants logiciels.

Réactivité[modifier | modifier le code]

Vue est doté d'un système de réactivité qui utilise des objets JavaScript simples et un re-rendu optimisé. Chaque composant garde une trace de ses dépendances réactives pendant son rendu, de sorte que le système sait précisément quand et sur quels composants il faut ré-effectuer le rendu[8].

Transitions[modifier | modifier le code]

Vue offre diverses façons d'appliquer les effets de transition lorsque des éléments sont insérés, mis à jour ou retirés du DOM. Cela inclut des outils pour :

  • Appliquer automatiquement des classes pour les transitions et les animations CSS
  • Intégrer des bibliothèques d'animation CSS tierces, telles que Animate.css
  • Utiliser JavaScript pour manipuler directement le DOM pendant les hooks de transition
  • Intégrer des bibliothèques d'animation JavaScript tierces, telles que Velocity.js

C'est ce qui se produit lorsqu'un élément enveloppé dans un composant de transition est inséré ou retiré :

  • Vue renifle automatiquement si l'élément cible a des transitions CSS ou des animations appliquées. Si c'est le cas, des classes de transition CSS seront ajoutées/supprimées à des moments appropriés.
  • Si le composant de transition a fourni des hooks JavaScript, ces hooks seront appelés à des moments appropriés.
  • Si aucune transition/animation CSS n'est détectée et si aucun hook JavaScript n'est fourni, les opérations de DOM pour l'insertion et/ou la suppression seront exécutées immédiatement sur l'image suivante.

Routage[modifier | modifier le code]

Vue fournit une interface permettant de modifier ce qui est affiché sur la page en fonction du chemin d'accès de l'URL actuelle, quelle que soit la manière dont elle a été modifiée (par un lien envoyé par courrier électronique, un rafraîchissement ou des liens dans la page). De plus, l'utilisation d'un routeur frontal permet de faire une transition intentionnelle du chemin du navigateur lorsque certains événements du navigateur (c'est-à-dire les clics) se produisent sur des boutons ou des liens. Vue lui-même n'est pas livré avec un routage haché côté frontal. Mais la bibliothèque open source "vue-router" fournit une API pour mettre à jour l'URL de l'application, prend en charge le bouton retour (historique de navigation) du navigateur, ainsi que les réinitialisations de mots de passe ou les liens de vérification de courrier électronique avec des paramètres d'URL d'authentification. Cette bibliothèque prend en charge le mappage de routes imbriquées vers des composants imbriqués et offre un contrôle fin des transitions. Avec Vue, les développeurs composent déjà des applications avec de petits blocs de construction qui construisent des composants plus importants. Avec Vue-router ajouté au mélange, les composants doivent simplement être mappés aux routes auxquelles ils appartiennent, et les routes parentes/racines doivent indiquer où les enfants doivent être rendus.

<div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const Utilisateur = {
  template: '<div>Utilisateur {{ $route.params.id }}</div>'
}

const routeur = new VueRouter({
  routes: [
    { path: '/utilisateur/:id', component: Utilisateur }
  ]
})
...
</script>

Le code ci-dessus :

  1. Définit un une route frontale à l'adresse suivante : websitename.com/utilisateur/<id>.
  2. Ce qui rendra dans le composant Utilisateur défini dans (const User…)
  3. Permet au composant Utilisateur de passer l'identifiant particulier de l'utilisateur qui a été tapé dans l'URL en utilisant la clé params de l'objet $route : $route.params.id.
  4. Ce template (variant selon les paramètres passés au routeur) sera rendu dans <router-view></router-view> à l'intérieur de l'élément div#app du DOM.
  5. Le HTML finalement généré pour quelqu'un qui tape : websitename.com/utilisateur/1 sera :
<div id="app">
  <div>
    <div>Utilisateur 1</div>
  </div>
</div>

Écosystème[modifier | modifier le code]

La bibliothèque de base est fournie avec des outils et des bibliothèques développés par l'équipe et les contributeurs.

Outils officiels[modifier | modifier le code]

  • Outils de développement - Extensions navigateur pour Firefox et Chrome pour déboguer des applications Vue
  • VueCLI - Outil en ligne de commande standard pour démarrer rapidement un projet Vue
  • Vue Loader - un loader webpack permettant l'écriture de composants Vue au format de composants monofichiers[9]

Bibliothèques officielles[modifier | modifier le code]

  • Vue Router - Le router officiel pour Vue
  • Vuex - Un outil de gestion d'état centralisé, inspiré de l'architecture de développement Flux
  • Vue Server Renderer - Système de rendu côté serveur pour Vue

Voir aussi[modifier | modifier le code]

Notes et références[modifier | modifier le code]

  1. « First Week of Launching Vue.js », sur Evan You
  2. « Release v3.0.11 »
  3. « 13 Top Companies That Have Trusted Vue.js – Examples of Applications »
  4. (en-GB) « Evan is creating Vue.js », sur Patreon (consulté le 2 avril 2020)
  5. « Introduction — Vue.js », sur vuejs.org (consulté le 2 avril 2020)
  6. « Between the Wires interview with Evan You. | Between the Wires », sur web.archive.org, (consulté le 3 avril 2020)
  7. « Composants — Vue.js », sur fr.vuejs.org (consulté le 2 avril 2020)
  8. « Réactivité en détail — Vue.js », sur fr.vuejs.org (consulté le 2 avril 2020)
  9. (en) « Composants monofichiers — Vue.js », sur fr.vuejs.org (consulté le 2 avril 2020)

Liens externes[modifier | modifier le code]