Vue.js

Vue.js

Créer des applications web dynamiques avec VueJS

VueJS a pour objectif de faciliter la création d’applications web dynamiques via la création de composants. Comme Angular et ReactJS, VueJS s’intègre parfaitement et facilement à d’autres technologies, CMS et frameworks. Par exemple, le site de LaravelLaracastsIBMCeltra utilisent VueJS pour une partie de leur site.

Pourquoi utiliser VueJS?

VueJS propose de très nombreux avantages pour les utilisateur d’où son utilisation importante aujourd’hui !

1. Légèreté et rapidité !

VueJS est le framework JS le plus léger du marché en effet, l’application Vue 2.0 complète, compilateur inclus, ne fait que 23 Ko !

Une fois installé et mis en place VueJS impressionne par sa rapidité. Pour cela, VueJS, comme React, crée son propre DOM virtuel où seront rattachés ensuite les composants. Ainsi, cela permet de manipuler le DOM très facilement et rapidement permettant d’appeler juste les données nécessaires évitant ainsi les appels réseaux et mettant à jour l’interface directement !

Avec une application “full Vue”, il est possible de mettre en place des chargements de pages “sans recharger la page” (via appel Ajax et mise en place SSR) ce qui donne une fluidité naturelle. Ainsi grâce à VueJS un véritable confort de navigation et de vitesse est proposé  puisque toutes les données s’affichent sans rafraichissement de page : tout est alors plus fluide et plus rapide !

 2. Une nouvelle façon de coder via l’utilisation de composants et templates

Comme ReactJS et Angular, VueJS utilise une approche orientée composants (.vue). Chaque composant est un bloc qui “se suffit à lui-même” disposant de son propre markup, sa propre logique voire son propre style. Cette approche permet un meilleur découpage d’une application et donc une meilleure évolutivité et maintenabilité dans le temps. Un des avantages est que les composants peuvent ensuite être réutilisés, ailleurs dans l’application ou même dans un autre projet, et dépendre d’autres composants. Par exemple, un composant permettant de rendre une liste peut utiliser un autre composant list-item pour faire le rendu d’un élément de la liste.

Les composants VueJS disposent de leur propre notation (fichier .vue) décomposées ainsi en 3 parties :

  • le markup ou template,
  • le JS,
  • le style (css).

Comme nous le voyons ci-dessus, à l’intérieur des composants, Vue.js utilise une syntaxe de templates basée sur le HTML permettant de relier le DOM rendu aux données de l’instance sous-jacente de Vue. Tous les templates de Vue.js sont du HTML valide qui peut être interprété par les navigateurs et les interpréteurs HTML conformes aux spécifications. Ainsi  Vue va compiler les templates en fonction des rendus du DOM virtuel. Combiné au système de réactivité, Vue est en mesure de déterminer intelligemment le nombre minimal de composants pour lesquels il faut refaire le rendu et d’appliquer le nombre minimal de manipulations au DOM quand l’état de l’application change, ce qui permet de gagner en fluidité et en réactivité !

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue !'
  }
})

Hello Vue !

3. La communauté

Sur VueJS on compte de nombreux contributeurs permettant d’avoir des mises à jour régulières ! De plus la communauté autour de VueJS est très active, en effet sur Github VueJS récolte pas moins de 91 000 stars. En outre des documents, conférences, livres sortent régulièrement et permettant d’augmenter la notoriété du framework. De plus VueJS est soutenu par de nombreuses entreprises comme Gitlab qui l’utilise, Alibaba, Laravel, Nintendo ou encore Expedia.

En outre le site de VueJS est extrêmement bien documenté avec de nombreux guides comportant des schémas et explications.

Si vous souhaitez en savoir plus sur Vue.js rendez-vous sur la documentation officiel https://fr.vuejs.org/.


Laurelenne Poussin

0
0

Laisser un commentaire

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