Avec l’essor continu des frameworks frontends JavaScript, dont le nouveau Vue.js 3, il est devenu vital de les suivre et de comprendre toutes leurs nouvelles fonctionnalités.
Dans cet article, nous allons explorer Vue.js 3 et ses nouvelles fonctionnalités. Ces derniers ajouts rendent Vue.js encore plus robuste, ce qui en fait un excellent framework à envisager pour votre prochain projet. Vous apprendrez en détail 10 choses que vous devez savoir sur Vue.js et comment il vous aidera à fournir des applications frontend évolutives et performantes.
Prêt ? C’est parti !
Qu’est-ce que Vue.js ?
Selon Evan You, le créateur de Vue.js :
« Vue.js est une solution plus flexible, moins opiniâtre. Ce n’est qu’une couche d’interface, donc vous pouvez l’utiliser comme une fonctionnalité légère dans les pages plutôt que comme un SPA complet. »
Il souhaitait créer un framework frontend aussi puissant qu’Angular, mais également plus « léger » et plus flexible, sans toutes les extensions et concepts inutiles qui accompagnent Angular.
Le résultat est Vue.js, qui est l’un des framework frontend les plus populaires utilisés aujourd’hui..
Pourquoi les développeurs utilisent Vue.js
Différentes raisons poussent un développeur à utiliser une technologie particulière. Voyons pourquoi nous pensons que vous devriez apprendre Vue.js.
Pour commencer, Vue.js est l’un des frameworks les plus simples à utiliser pour la plupart des développeurs, car il utilise JavaScript. Par conséquent, toute personne ayant des connaissances de base en JavaScript sera en mesure de développer avec Vue.js.
L’outil Vue CLI combiné à d’autres outils de développement frontend fait de la configuration de Vue.js un jeu d’enfant. Il est configuré par défaut avec certaines fonctionnalités, mais vous pouvez également créer du code avec une logique et une structure DRY (Don’t Repeat Yourself).
La réactivité est également intégrée à Vue.js. Cela signifie que la fonctionnalité en temps réel qui était populaire sur le framework Angular est un jeu d’enfant avec Vue.js. Par exemple, vous pouvez facilement appliquer une simple directive telle que v-if dans votre application Vue.js.
Ensuite, examinons les principaux avantages et inconvénients de Vue.js.
Avantages et inconvénients de Vue.js
Vue.js est le deuxième framework le plus populaire utilisé aujourd’hui. Voyons ce qui le rend populaire auprès des développeurs web et ce qui les en éloigne.
Les avantages de Vue.js
Nous allons commencer par explorer les aspects positifs de Vue.js.
Petite taille
Vue.js a une très petite taille d’environ 18 Ko, ce qui est excellent par rapport à d’autres frameworks de grande taille. Cependant, avec cette taille, Vue.js aura un impact positif sur le SEO et l’UX de votre application frontend.
Composant à fichier unique et lisibilité
Vue.js utilise une architecture basée sur les composants, séparant ainsi les gros morceaux de code en composants plus petits. En outre, dans Vue.js, tout est un composant, et chaque composant est écrit avec du HTML, du CSS et du JavaScript, ce qui favorise la lisibilité et la simplicité.
Système d’outillage solide
Vue.js prend en charge un grand nombre d’outils de développement frontend dès le départ, avec peu ou pas de configuration de votre part. Par exemple, Vue.js prend en charge des outils tels que Babel et Webpack. En outre, il fournit des tests unitaires, des bibliothèques de tests de bout en bout, des systèmes de routage flexibles et faciles à utiliser, des gestionnaires d’état, un rendu côté serveur (SSR), etc.
Facile à utiliser
Si vous avez déjà utilisé Vue.js, vous conviendrez qu’il est très facile à utiliser. Il modernise l’approche habituelle du développement web, ce qui permet à n’importe quel débutant de s’y mettre directement et de se sentir à l’aise en quelques pratiques seulement.
Les inconvénients de Vue.js
Maintenant que nous avons fait le tour des avantages, explorons les inconvénients de Vue.js.
Complexité de réactivité
La mise en œuvre de la liaison bidirectionnelle dans Vue.js est un outil pratique pour gérer les composants Vue.js. La liaison bidirectionnelle fait référence au partage de données entre une classe de composant et son modèle, elle est développée de telle sorte que si les données changent à un endroit, elles mettent automatiquement à jour les autres.
Cependant, il y a un problème concernant le fonctionnement de la réactivité. Le système de réactivité ne restitue que les morceaux de données déclenchés. Parfois, il y a des erreurs lors de la lecture des données, ce qui nécessite de les aplatir. Vous pouvez prendre connaissance de ce problème connu et de la manière dont il est résolu sur le site de Vue.js.
Barrière linguistique
Au départ, Vue.js a été adopté principalement par les Chinois, de grandes entreprises telles que Xiaomi et Alibaba ayant contribué à populariser le framework et à créer une demande sur le marché du travail. Cependant, avec l’adoption significative de nombreuses entreprises chinoises, beaucoup de forums, de canaux de discussion et autres étaient principalement en chinois, ce qui rendait l’adoption difficile pour les développeurs non natifs.
Aujourd’hui, ce n’est plus le cas, car Vue.js a évolué pour intégrer la prise en charge de nombreuses langues, mais certaines langues sont moins bien prises en charge que d’autres.
Risques de sur-flexibilité
Comme indiqué ci-dessus, Vue.js est très souple et facile à utiliser. Par conséquent, il est facile d’avoir beaucoup de code spaghetti partout, car chacun dans une équipe d’entreprise peut avoir des opinions différentes sur la façon de faire les choses.
Parmi les avantages et les inconvénients de Vue.js évoqués ci-dessus, vous avez peut-être déjà repéré des fonctionnalités que vous aimez et d’autres qui ne vous conviennent pas.
10 choses à savoir sur Vue.js
Vous trouverez ci-dessous les dix choses que vous devez savoir sur Vue.js et pourquoi il est essentiel de les connaître.
Propriétés calculées
Une propriété calculée est l’une des fonctionnalités les plus utilisées dans Vue.js. Une propriété calculée vous permet de créer des propriétés qui peuvent être modifiées, manipulées et afficher des données de manière efficace et lisible.
Elle s’avère pratique lorsque vous souhaitez répéter de nombreuses petites méthodes pour des choses comme le formatage, la modification de valeurs ou un vaste processus que vous devez déclencher dans certaines situations.
Les propriétés calculées permettent de supprimer l’excès de logique dans votre modèle. Une trop grande quantité de cette logique peut entraîner un gonflement de votre code et le rendre difficile à maintenir rapidement.
En supposant que vous souhaitiez formater une chaîne de caractères en majuscules, voici comment vous pourriez procéder :
<template>
<div>
<p> I love {{ value.toUpperCase() }} </p>
</div>
</template>
Que se passe-t-il si vous devez changer la variable de value à 50 endroits différents ? Eh bien, les propriétés calculées sont là pour vous aider :
<template>
<div>
<p> I love {{ value }} </p>
</div>
</template>
<script>
export default {
computed:{
value(){
return this.value.toUpperCase()
}
}
}
</script>Vous pouvez facilement changer toUpperCase() en toLowerCase(), et tout se reflétera à partir d’un seul point.
Traitement des événements
Vue.js simplifie la communication entre l’enfant et le parent grâce à l’utilisation de $emit et v-on. Il devient facile et direct de gérer la communication entre les hiérarchies de composants.
La fonction $emit accepte deux paramètres : une chaîne de caractères pour le nom et une valeur facultative à émettre.
v-on:event-name est utilisé par le composant enfant pour recevoir l’événement émis par son composant parent :
<template>
<section>
<button @click="onClick">Add </button>
</section>
</template>
<script>
export default {
name: "AddEvent",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>Lorsque vous déclenchez le bouton Add, la méthode onClick déclenche l’événement $emit, qui émet l’événement add vers un composant enfant à l’écoute de l’événement add.
Voyons comment écouter un événement :
<template>
<section>
<p v-show="showSaveMsg">This component is listening to the ADD event</p>
<;add-event v-on:add="onAdd"></add-event>
</section>
</template>
<script>
export default {
data(){
return {
showSaveMsg: false
}
},
components:{
AddEvent: () => import('./AddEvent')
},
methods: {
onAdd() {
this.showSaveMsg = true;
}
}
}
</script>Le code ci-dessus écoute l’événement add répond en changeant la valeur de showSaveMsg en true, ce qui affiche à nouveau le message.
Chargement différé / Composants asynchrones
Le chargement différé est l’un des meilleurs hacks de performance pour Vue.js, où les composants sont ajoutés et rendus de manière asynchrone ou à la demande, ce qui réduit considérablement la taille du fichier, le temps de réponse aux requêtes HTTP, etc.
Le chargement différé est réalisé grâce aux importations dynamiques de Webpack, qui prend également en charge le fractionnement du code.
Vue.js permet le chargement différé des composants et peut être réalisé globalement avec les scripts suivants :
import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));
Vous pouvez le réaliser localement avec un composant comme ci-dessous :
<template>
<div>
<component></component>
</div>
</template>
<script>
export default {
components: {
'Component': () => import('./Component')
}
}
</script>Composants globaux
Nous pouvons obtenir une réutilisation importante dans Vue.js avec des composants globaux, où vous enregistrez un composant une fois et l’utilisez ensuite partout dans votre instance Vue.js.
Les composants globaux sont une fonctionnalité importante qui peut vous faire gagner beaucoup de temps en enregistrant les composants individuellement à chaque fois, mais il est facile d’en abuser en enregistrant tous les composants globalement. L’enregistrement de tous les composants de manière globale peut facilement conduire à une taille de construction importante, ce qui entraîne un mauvais référencement et un ralentissement du temps de chargement des pages.
Veillez à toujours enregistrer les composants globaux qui ont de nombreux cas d’utilisation dans votre projet, comme indiqué ci-dessous :
import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));Composant de fichier unique
Les composants sont l’une des fonctions les plus puissantes de Vue.js. Ils vous permettent d’étendre les éléments HTML, CSS et JavaScript essentiels pour encapsuler du code réutilisable.
Les composants peuvent aider à décomposer les grands projets en petits éléments réutilisables que nous pouvons étendre à l’ensemble du projet, encourageant ainsi le principe DRY (Don’t Repeat Yourself) de l’ingénierie logicielle.
Il peut fournir une organisation et des encapsulations pour les grands projets, un code réutilisable, et peut être séparé en fichiers .vue.
<template>
<section>
<button @click="onClick">Add</button>
</section>
</template>
<script>
export default {
name: "CustomButtom",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>
<style scoped>
button{
/** Button Styles */
}
</style>Les scripts ci-dessus créent un composant de bouton personnalisé que nous pouvons réutiliser dans notre projet. Chaque composant possède son HTML, son CSS et son JavaScript.
Tests
Vue.js fournit l’une des bibliothèques de test les plus robustes, faisant des tests unitaires avec Jest et Mocha ou des tests de bout en bout un jeu d’enfant avec peu ou pas de configuration.
Un coup d’œil rapide sur les tests avec ces outils pourrait en valoir la peine pour vous. Nous allons donc explorer l’installation, la configuration et le test d’un projet de démonstration ci-dessous.
Si vous utilisez l’outil CLI Vue recommandé pour configurer votre projet, exécutez les commandes suivantes:
vue add unit-jest //to run unit test with jest
npm install --save-dev @vue/test-utils
Ensuite, après la configuration, incluez le code ci-dessous, qui démontre comment tester un composant simple :
// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'
// The component to test
const MessageComponent = {
template: '<p>{{ message }}</p>',
props: ['message']
}
test('displays a message', () => {
// mount() returns a wrapped Vue component we can interact with
const wrapper = mount(MessageComponent, {
propsData: {
msg: 'Welcome to our testing world'
}
})
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Welcome to our testing world')
})La bibliothèque de tests Vue propose deux excellentes options pour tester vos composants : Mount et Shallow.
Si vous voulez tester un composant avec une isolation complète, utilisez la méthode shallow. Sinon, si vous devez travailler sur un composant avec des sous-composants dont vous voulez assurer la communication, l’option mount fonctionne très bien.
Le puissant outil Vue CLI
Vue CLI est un excellent outil CLI et donne une bonne dose de pouvoir à tout développeur Vue. Avec lui, vous pouvez rapidement tester n’importe quel composant de manière isolée. Ce qui est génial avec Vue CLI, c’est que vous pouvez développer entièrement un composant de manière isolée, le tester, tout en ayant accès au rechargement à chaud lorsque vous itérez sur ce composant particulier.
Pour faire la démonstration, installons Vue CLI de manière globale :
npm install -g @vue/cliEnsuite, vous pouvez tester n’importe quel composant en exécutant la commande ci-dessous :
vue serve ./components/views/Home.vueSi vous souhaitez extraire un composant particulier pour, par exemple, le partager avec vos collègues, vous pouvez le faire en utilisant la commande ci-dessous :
vue build --target lib --name goldenRule ./components/views/HomeVue CLI est très puissant et peut vous faire gagner énormément de temps si vous maîtrisez l’art de l’utiliser. Si vous voulez en savoir plus, vous pouvez jeter un coup d’œil sur la documentation officielle.
Gestion des propriétés
La gestion des propriétés est essentielle pour le composant Vue car elles peuvent être créées de différentes manières. Vous pouvez également valider les propriétés, créer plusieurs propriétés et les modifier si nécessaire.
Pour créer une nouvelle propriété dans un composant Vue, vous pouvez le faire de plusieurs manières différentes. En supposant que vous avez votre composant, vous devez créer la propriété isAdmin.
Voyons les différentes façons de procéder :
<template>
<section>
<component v-if="isAdmin"></component>
</section>
</template>
<script>
export default {
name: 'Component',
// One
props: {
isAdmin: {
type: Boolean,
default: false,
required: true
}
},
// Two
props: ['isAdmin'],
// Three
props: {
isAdmin: Boolean
}
}
</script>La validation de votre propriété est très importante. Heureusement, c’est aussi très simple :
// ...
// One
props: {
isAdmin: {
default: false,
required: true,
validator: function(value) {
return typeof === 'boolean';
}
}
},
// ...Enfin, la modification des propriétés est aussi simple que le réalignement de leurs valeurs :
//...
methods: {
isAdmin() {
this.isAdmin = true;
}
}
//..
Pour attribuer une valeur à la propriété dans un composant parent :
<template>
<section>
<component :isAdmin="true"></component>
</section>
</template>Rendu côté serveur (SSR)
Malgré toutes les fonctionnalités et les avantages de l’utilisation de Vue.js pour créer des applications frontend, Vue.js reste une bibliothèque côté client qui ne fait que rendre et manipuler les éléments du DOM.
Le rendu côté serveur aide les frameworks côté client tels que Vue.js à mieux fonctionner. Les robots d’exploration des moteurs de recherche verront les pages de votre site web entièrement rendues lors de l’exploration.
Pour que votre site web soit indexé plus rapidement par Google et Bing, il doit avoir un score plus rapide et plus élevé de temps de mise à disposition du contenu. C’est ce que le rendu côté serveur de Vue.js vous aide à réaliser.
Le rendu côté serveur (SSR) est une technique populaire permettant de rendre une application mono-page (SPA) côté client sur le serveur, puis d’envoyer une page entièrement rendue au lecteur.
Lorsque la page est rendue du côté du serveur, celui-ci l’envoie au client en tant que réponse. Ainsi, chaque élément d’information a déjà été rendu lorsque le navigateur affiche la page du moteur de recherche.
La réalisation de SSR dans Vue.js est difficile pour les débutants. Il sera plus facile d’utiliser Nuxt.js, qui dispose d’un SSR intégré et d’une courbe d’apprentissage très faible..
Déploiement
Vue.js présente un grand nombre d’avertissements, d’erreurs et de tailles de fichiers gonflées pendant le développement, mais ces problèmes disparaissent immédiatement lorsque vous passez en production pour le déploiement. Vue.js configurera automatiquement les outils de construction Webpack, les minifications, l’extraction et la purge des CSS, la mise en cache, le suivi des erreurs d’exécution, etc.
Les clients de Kinsta peuvent envisager d’utiliser la fonction intégrée de minification du code à laquelle ils peuvent accéder directement dans le tableau de bord MyKinsta. Cela leur permet d’activer facilement la minification automatique de CSS et JavaScript d’un simple clic.
Vue.js facilite le processus de déploiement en configurant et en paramétrant automatiquement l’environnement de production sans aucune étape supplémentaire de la part du développeur.
Pour déployer votre application Vue.js, vous pouvez consulter ses guides généraux.
Résumé
Dans cet article, nous avons exploré en détail ce qu’est Vue.js, pourquoi vous devriez l’utiliser, ses avantages et ses inconvénients, et les 10 choses que vous devriez savoir à son sujet.
Nous espérons que vous avez approfondi vos connaissances de Vue.js pour créer des applications frontend évolutives et performantes.
Continuez à coder !
Si vous avez des questions ou des suggestions, nous sommes impatients de les entendre. Parlez-nous dans la section des commentaires ci-dessous !
Je suis un ingénieur logiciel et un créateur de contenu orienté vers la construction de produits performants et innovants en suivant les meilleures pratiques et les normes de l'industrie. J'aime aussi écrire à ce sujet sur Masteringbackend.com. Suivez-moi sur X, LinkedIn et About Me.
Laisser un commentaire