VueJS - Présentation

VueJSest un framework JavaScript progressif open source utilisé pour développer des interfaces Web interactives. C'est l'un des fameux frameworks utilisés pour simplifier le développement web. VueJS se concentre sur la couche de vue. Il peut être facilement intégré dans de grands projets pour le développement frontal sans aucun problème.

L'installation de VueJS est très facile à démarrer. Tout développeur peut facilement comprendre et créer des interfaces Web interactives en un rien de temps. VueJS est créé par Evan You, un ancien employé de Google. La première version de VueJS est sortie en février 2014. Elle a récemment atteint 64 828 étoiles sur GitHub, ce qui la rend très populaire.

traits

Voici les fonctionnalités disponibles avec VueJS.

DOM virtuel

VueJS utilise le DOM virtuel, qui est également utilisé par d'autres frameworks tels que React, Ember, etc. . Chaque fois que des modifications doivent être apportées, elles sont apportées aux structures de données JavaScript et ces dernières sont comparées à la structure de données d'origine. Les modifications finales sont ensuite mises à jour dans le vrai DOM, que l'utilisateur verra changer. C'est bien en termes d'optimisation, c'est moins cher et les changements peuvent être effectués plus rapidement.

Liaison de données

La fonction de liaison de données permet de manipuler ou d'attribuer des valeurs aux attributs HTML, de modifier le style, d'attribuer des classes à l'aide de la directive de liaison appelée v-bind disponible avec VueJS.

Composants

Les composants sont l'une des fonctionnalités importantes de VueJS qui permet de créer des éléments personnalisés, qui peuvent être réutilisés en HTML.

Gestion des événements

v-on est l'attribut ajouté aux éléments DOM pour écouter les événements dans VueJS.

Animation / Transition

VueJS fournit différentes façons d'appliquer la transition aux éléments HTML lorsqu'ils sont ajoutés / mis à jour ou supprimés du DOM. VueJS a un composant de transition intégré qui doit être enveloppé autour de l'élément pour un effet de transition. Nous pouvons facilement ajouter des bibliothèques d'animation tierces et également ajouter plus d'interactivité à l'interface.

Propriétés calculées

C'est l'une des fonctionnalités importantes de VueJS. Il aide à écouter les modifications apportées aux éléments de l'interface utilisateur et effectue les calculs nécessaires. Il n'y a pas besoin de codage supplémentaire pour cela.

Modèles

VueJS fournit des modèles basés sur HTML qui lient le DOM aux données de l'instance Vue. Vue compile les modèles en fonctions de rendu DOM virtuelles. Nous pouvons utiliser le modèle des fonctions de rendu et pour ce faire, nous devons remplacer le modèle par la fonction de rendu.

Directives

VueJS a des directives intégrées telles que v-if, v-else, v-show, v-on, v-bind et v-model, qui sont utilisées pour effectuer diverses actions sur le frontend.

Observateurs

Les observateurs sont appliqués aux données qui changent. Par exemple, formez des éléments d'entrée. Ici, nous n'avons pas à ajouter d'événements supplémentaires. Watcher s'occupe de gérer toutes les modifications de données, ce qui rend le code simple et rapide.

Routage

La navigation entre les pages est effectuée à l'aide de vue-router.

Poids léger

Le script VueJS est très léger et les performances sont également très rapides.

Vue-CLI

VueJS peut être installé en ligne de commande à l'aide de l'interface de ligne de commande vue-cli. Cela permet de construire et de compiler facilement le projet en utilisant vue-cli.

Comparaison avec d'autres cadres

Comparons maintenant VueJS avec d'autres frameworks tels que React, Angular, Ember, Knockout et Polymer.

VueJS v / s React

Virtual DOM

Virtual DOM est une représentation virtuelle de l'arborescence DOM. Avec le DOM virtuel, un objet JavaScript est créé qui est le même que le vrai DOM. Chaque fois qu'une modification doit être apportée au DOM, un nouvel objet JavaScript est créé et les modifications sont apportées. Plus tard, les deux objets JavaScript sont comparés et les modifications finales sont mises à jour dans le vrai DOM.

VueJS et React utilisent tous deux le DOM virtuel, ce qui le rend plus rapide.

Template v/s JSX

VueJS utilise html, js et css séparément. Il est très facile pour un débutant de comprendre et d'adopter le style VueJS. L'approche basée sur un modèle pour VueJS est très simple.

React utilise l'approche jsx. Tout est JavaScript pour ReactJS. HTML et CSS font tous partie de JavaScript.

Installation Tools

React utilise create react app et VueJS utilise vue-cli /CDN/npm. Les deux sont très faciles à utiliser et le projet est mis en place avec toutes les exigences de base. React a besoin du webpack pour la construction, contrairement à VueJS. Nous pouvons commencer avec le codage VueJS n'importe où dans jsfiddle ou codepen en utilisant la bibliothèque cdn.

Popularity

React est plus populaire que VueJS. L'opportunité d'emploi avec React est plus que VueJS. Il y a un grand nom derrière React ie Facebook qui le rend plus populaire. Depuis, React utilise le concept de base de JavaScript, il utilise les meilleures pratiques de JavaScript. Celui qui travaille avec React sera certainement un très bon avec tous les concepts JavaScript.

VueJS est un framework en développement. Actuellement, les opportunités d'emploi avec VueJS sont moindres par rapport à React. Selon une enquête, de nombreuses personnes s'adaptent à VueJS, ce qui peut le rendre plus populaire par rapport à React et Angular. Il existe une bonne communauté travaillant sur les différentes fonctionnalités de VueJS. Le vue-router est maintenu par cette communauté avec des mises à jour régulières.

VueJS a pris les bonnes parties d'Angular et React et a construit une puissante bibliothèque. VueJS est beaucoup plus rapide que React / Angular en raison de sa bibliothèque légère.

VueJS v / s angulaire

Similarities

VueJS présente de nombreuses similitudes avec Angular. Les directives telles que v-if, v-for sont presque similaires à ngIf, ngFor of Angular. Ils ont tous deux une interface de ligne de commande pour l'installation du projet et pour le construire. VueJS utilise Vue-cli et Angular utilise angular-cli. Les deux offrent une liaison de données bidirectionnelle, un rendu côté serveur, etc.

Complexity

Vuejs est très facile à apprendre et à utiliser. Comme indiqué précédemment, un débutant peut utiliser la bibliothèque CDN de VueJS et se lancer dans codepen et jsfiddle.

Pour Angular, nous devons passer par une série d'étapes pour l'installation et il est peu difficile pour les débutants de se familiariser avec Angular. Il utilise TypeScript pour le codage, ce qui est difficile pour les personnes issues du noyau JavaScript. Cependant, il est plus facile à apprendre pour les utilisateurs appartenant à des antécédents Java et C #.

Performance

Pour décider de la performance, c'est aux utilisateurs. La taille du fichier VueJS est beaucoup plus légère que Angular. Une comparaison des performances du cadre est fournie dans le lien suivanthttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

Popularity

À l'heure actuelle, Angular est plus populaire que VueJS. De nombreuses organisations utilisent Angular, ce qui le rend très populaire. Les opportunités d'emploi sont également plus pour les candidats expérimentés dans Angular. Cependant, VueJS prend sa place sur le marché et peut être considéré comme un bon concurrent pour Angular et React.

Dependencies

Angular fournit de nombreuses fonctionnalités intégrées. Nous devons importer les modules requis et commencer avec eux, par exemple, @ angular / animations, @ angular / form.

VueJS n'a pas toutes les fonctionnalités intégrées comme Angular et doit dépendre de bibliothèques tierces pour travailler dessus.

Flexibility

VueJS peut être facilement fusionné avec n'importe quel autre gros projet sans aucun problème. Angular ne sera pas si simple de commencer à travailler avec un autre projet existant.

Backward Compatibility

Nous avions AngularJS, Angular2 et maintenant Angular4. AngularJS et Angular2 ont une grande différence. L'application de projet développée dans AngularJS ne peut pas être convertie en Angular2 en raison des différences fondamentales.

La version récente de VueJS est 2.0 et offre une compatibilité descendante. Il fournit une bonne documentation, qui est très facile à comprendre.

Typescript

Angular utilise TypeScript pour son codage. Les utilisateurs doivent avoir une connaissance de Typescript pour démarrer avec Angular. Cependant, nous pouvons commencer avec le codage VueJS n'importe où dans jsfiddle ou codepen en utilisant la bibliothèque cdn. Nous pouvons travailler avec JavaScript standard, ce qui est très simple pour commencer.

VueJS v / s Ember

Similarities

Ember fournit un outil de ligne de commande Ember, c'est-à-dire ember-cli pour une installation et une compilation faciles pour les projets Ember.

VueJS dispose également d'un outil de ligne de commande vue-cli pour démarrer et construire des projets.

Ils ont tous deux des fonctionnalités telles que le routeur, le modèle et les composants qui les rendent très riches en tant que cadre d'interface utilisateur.

Performance

VueJS a de meilleures performances par rapport à Ember. Ember a ajouté un moteur de rendu Glimmer dans le but d'améliorer les performances de re-rendu, qui est un concept similaire à VueJS et React utilisant le DOM virtuel. Cependant, VueJS a de meilleures performances par rapport à Ember.

VueJS v / s Knockout

Knockout fournit un bon support de navigateur. Il est pris en charge sur la version inférieure de l'IE alors que VueJS n'est pas pris en charge sur IE8 et les versions antérieures. Le développement de Knockout a ralenti au fil du temps. Il n'y a pas beaucoup de popularité pour la même chose ces derniers temps.

D'un autre côté, VueJS a commencé à gagner en popularité avec l'équipe de Vue fournissant des mises à jour régulières.

Polymère VueJS v / s

La bibliothèque de polymères a été développée par Google. Il est utilisé dans de nombreux projets Google tels que Google I / O, Google Earth, Google Play Music, etc. Il offre une liaison de données et des propriétés calculées similaires à VueJS.

La définition d'élément personnalisé Polymer comprend du JavaScript / CSS brut, des propriétés d'élément, des rappels de cycle de vie et des méthodes JavaScript. En comparaison, VueJS permet d'utiliser facilement JavaScript / html et CSS.

Polymer utilise les fonctionnalités des composants Web et nécessite des polyfills pour les navigateurs, qui ne prennent pas en charge ces fonctionnalités. VueJS n'a pas de telles dépendances et fonctionne bien dans tous les navigateurs d'IE9 +.