Théorie - Semaine 8/9 - Introduction au cadriciel Front-end

Jusqu'a maintenant, nous avons vu comment créer des pages web statiques et interactives en utilisant HTML, CSS et JavaScript. Cependant, à mesure que nos applications web deviennent plus complexes, il devient de plus en plus difficile de gérer le code et de maintenir une structure claire. C'est là que les cadriciels front-end entrent en jeu!

Un cadriciel ou "Framework" en anglais, est une collection de bibliothèques et d'outils qui facilitent le développement d'applications web en fournissant une structure préconçue et des fonctionnalités prêtes à l'emploi. Les cadriciels front-end nous permettent de créer des applications web plus rapidement et plus efficacement en nous fournissant des composants réutilisables, un routage, et bien plus encore.

Vue.js - qu'est-ce que c'est?

Vue.js est un cadriciel front-end permettant de faciliter la création de pages web interactives et dynamiques. Il utilise les langages de bases comme le HTML, le CSS et le TypeScript.

Vue.js structure les applications web plus facilement qu'avec seulement du JavaScript.

D'autres cadriciels populaires incluent React et Angular, mais nous allons nous concentrer sur Vue.js dans ce cours.

Avantages de Vue.js

• Meilleure structure du code : Vue.js nous permet de structurer notre code de manière plus claire et organisée en utilisant des composants réutilisables.
• Axé composants : Vue.js est basé sur une architecture de composants, ce qui signifie que nous pouvons créer des éléments réutilisables et les assembler pour construire notre application.
• Facilement testable : Vue.js facilite les tests unitaires et d'intégration grâce à sa structure modulaire.
• Facilite la mise à jour du DOM : Vue.js utilise un système de rendu réactif qui met à jour automatiquement le DOM lorsque les données changent, ce qui rend le développement plus fluide et efficace.

Portée de Vue.js

Front-end

Vue.js est responsable du Front-end de l'application, c'est à dire :

• L'interface utilisateur (UI)
• La logique de présentation Il est important de comprendre qu'on ne voudra pas stocker des données du côté du client. Ça, c'est le travail du Back-end.

Back-end

Le back-end est responsable des éléments suivants :

• La logique d'affaires (peu importe l'interface
• Le stockage des données (ex.: base de données))
• La sécurité (ex.: authentification, autorisation, etc.)

Pour communiquer avec le back-end, le front-end utilise des API (Application Programming Interface) qui permettent d'échanger des données entre les deux parties de l'application. Source : API

La façon la plus courante est d'utiliser des API REST (Representational State Transfer) qui utilisent les méthodes HTTP (GET, POST, PUT, PATCH, DELETE) pour effectuer des opérations sur les données. Nous allons voir cela plus tard dans la session.

Template projet Vue

Je vous fournir un template afin que vous puissiez baser vos devoir et projet dessus. Le template contiendra une structure de base pour une application Vue.js, avec les fichiers et dossiers nécessaires pour commencer à développer votre application web. Template Vue - 2W1

Pour utiliser le template, vous devez avoir :

• Node.js (normalement installé)
• Eslint (installé au cours 7)

Assurez-vous d'extraire le contenu du fichier zip dans un dossier de travail. Ensuite, assurez-vous de faire la commande suivante (dans le dossier du projet) pour installer les dépendances du projet :

npm install

Il vous restera simplement à faire la commande suivante pour démarrer le projet :

npm run dev

À vous de jouer!

Dans le dossier de travail de votre choix, téléchargez le template et suivez les instructions pour démarrer votre projet Vue.js. N'hésitez pas à explorer les fichiers et à vous familiariser avec la structure du projet.

Vous devriez être en mesure de voir la page d'accueil de votre application Vue.js en ouvrant votre navigateur à l'adresse http://localhost:5173/ (ou une adresse similaire, cela va être écrit dans le terminal).

Extensions VS code recommandées

Si vous utilisez l'éditeur de code VS code, je vous recommande fortement d'installer l'extension suivante : Vue (Official)

Cette extension est également intéressante afin de voir les icônes sur les fichiers : Material Icon Theme

WebStorm, un autre éditeur de code populaire, a un support intégré pour Vue.js, donc vous n'aurez pas besoin d'installer d'extensions supplémentaires si vous utilisez cet éditeur.

Structure d'un projet Vue.js

Sur le site Vue School, on présente comment structurer un projet Vue de grande envergure.

Je vous invite à vous y référer au besoin.

Un petit brin de déjà...Vue (js)

Le créateur de Vue, Evan You, un ancien employé de Google a décidé de faire Vue, puisqu'il y avait plusieurs choses qu'il n'aimait pas dans Angular JS (un autre framework front-end).

Vue a été créé avec l'esprit de faciliter le prototypage et la réutilisation de bout d'interface qu'on appelle composante.

Vue a atteint une bonne maturité avec la version 3 pour construire de grosses applications comme des plus petites.

À chaque version majeure, il faut mettre à jour le projet pour supporter les nouveaux standards. Donc, on ne peut pas rouler un projet Vue 2 en Vue 3 directement. Ce n'est pas le cas avec les versions mineures.

Structure d'une application Vue

Voici un exemple de structure d'application Vue avec ses composants :

Puisqu'une application Vue est divisée en plusieurs composants réutilisables, quels seraient les composants présents?

• App (composant par défaut qui contient la structure de base de l'application)
• BarreNavigation
• BarreLaterale
• ListeArticles
• Article

Truc 💡

Remarquez que le nom des composants est en PascalCase. C'est la nomenclature recommandée par Vue.

Éventuellement, dans notre application, il y aura plusieurs composants de différentes sections de notre site. On peut donc séparer l'application en modules, en thème ou en domaine.

Cela consiste à faire des dossiers pour stocker nos composants ayant la même thématique ou domaine. L'objectif est de bien séparer les concepts et de faciliter la navigation dans le projet.

• components
  • module1
    • composant1
    • composant2
  • module2
    • ...
  • ...

Par exemple, un projet de ventes en ligne pourrait avoir cette structure de composantes

• components
  • Articles
    • Article.vue
    • ListeArticles.vue
    • DetailsArticle.vue
  • Navigation
    • BarreNavigation.vue
    • BarreLaterale.vue
    • PiedPage.vue
  • Magasin.vue
  • Profile.vue

L'important est de bien nommer les composantes et de suivre la structure établie. Rien n'empêche si on a que quelques composantes de tout mettre à l'intérieur du dossier components et de modifier la structure plus tard quand l'application est mieux établie. (peu recommandé)

• components
  • Article.vue
  • ListArticle.vue
  • DetailsArticle.vue
  • BarreNavigation.vue
  • BarreLaterale.vue
  • PiedPage.vue
  • Magasin.vue
  • Profile.vue

Composants Vue

Un composant Vue est un élément réutilisable qui encapsule une partie de l'interface utilisateur et sa logique associée. Les composants sont la pierre angulaire de Vue.js, car ils permettent de construire des applications web modulaires et maintenables.

La structure d'un composant peut porter à confusion au début, car il contient trois sections distinctes :

• template
• script
• style

Cela veut dire que dans un même fichier, nous allons avoir le code HTML, JavaScript et CSS. Cependant, il est important de comprendre que ces trois sections sont bien distinctes et ont des rôles différents.

L'extension de fichier pour un composant Vue est .vue. Vite, notre outil de build se chargera de compiler ces fichiers et de les transformer en code JavaScript, HTML et CSS compréhensible par le navigateur.

Voici un exemple de composant Vue simple :

<script setup lang="ts">
import { ref } from 'vue';
let salutation = ref('Salut tout le monde!');
</script>

<template>
  <p class="salutation">{{ salutation }}</p>
</template>

<style>
.salutation {
  color: red;
  font-weight: bold;
}
</style>

Beaucoup de nouveauté! Regardons les différentes sections du composant :

• Script : C'est la section où nous allons écrire notre code JavaScript (ou TypeScript). L'utilisation de setup lang="ts" nous permettra d'utiliser TypeScript. C'est ici que nous allons définir les variables et fonctions de notre composant. Dans l'exemple, nous avons défini une variable salutation qui contient une chaîne de caractères.
• Template : C'est la section où nous allons écrire notre code HTML. C'est ici que nous allons définir la structure de notre composant. Dans l'exemple, nous avons un paragraphe qui affiche la variable salutation en utilisant la syntaxe de liaison de données de Vue (Interpolation de string).
• Style : C'est la section où nous allons écrire notre code CSS ou SCSS. La partie <style> n'est pas obligatoire et peut être omise.

Avez-vous remarqué quelque chose de spécial dans l'exemple?

Réactivité

Dans l'exemple plus haut, nous avons utilisé la fonction ref pour créer une variable réactive. Cela signifie que lorsque la valeur de salutation change, le composant se mettra à jour automatiquement pour refléter ce changement dans l'interface utilisateur.

Magique !

Mais qu'est-ce qu'il se passerait si nous avions utilisé une variable normale au lieu de ref? Par exemple :

<script setup lang="ts">
let salutation = 'Salut tout le monde!'
</script>

Solution ✅

Le composant Vue ne détecterait pas les changements de la variable salutation et ne mettrait pas à jour l'interface utilisateur en conséquence. C'est pourquoi il est important d'utiliser les fonctions de réactivité de Vue, comme ref, pour garantir que notre application reste réactive et que l'interface utilisateur se mette à jour correctement lorsque les données changent.

Truc 💡

L'utilisation de ref nous simplifie beaucoup la vie par rapport à la manipulation du dom! Au lieu de devoir sélectionner un élément du DOM et de mettre à jour son contenu manuellement, nous pouvons simplement mettre à jour la variable réactive et Vue se chargera de mettre à jour l'interface utilisateur pour nous.

Création d'un composant Vue

2 étapes simples :

• Créer un fichier avec l'extension .vue
• Ajouter le sélecteur dans une autre composante accessible (afin d'utiliser le nouveau composant)

Créer un composant Vue

Créer un fichier avec l'extension .vue dans le dossier src/components. Ici, nous allons créer le composant ListeArticles.vue.

<template>
  <h2>Articles</h2>
</template>

Attention ⚠

Garder le fichier app.vue! Nous allons l'utiliser à la prochaine étape!

Ajouter le sélecteur dans une autre composante accessible

Maintenant que nous avons créé notre composant ListeArticles.vue, nous devons l'ajouter à notre application pour pouvoir l'utiliser. Nous allons l'ajouter dans le fichier App.vue, qui est le composant racine de notre application.

<script setup lang="ts">
  import ListeArticles from './components/ListeArticles.vue';
</script>

<template>
  <h1>Gestion d'inventaire</h1>
  <ListeArticles />
</template>

Aussitôt qu'on importe un composant dans une autre composant, on peut l'utiliser en utilisant son nom de composant comme un élément HTML dans la section template. Dans cet exemple, nous avons utilisés <ListeArticles /> pour afficher le contenu de notre composant ListeArticles.vue dans notre application. (Son nom doit être en PascalCase pour être reconnu par Vue. Cela permet de faire la différence entre les éléments HTML natifs et les composants personnalisés.)

Truc 💡

C'est le nom qu'on donne dans le import qui est important :

import ListeArticles from './components/ListeArticles.vue'

Dans ce cas, on peut utiliser <ListeArticles/>, si on avait plutôt mis cela comme import :

import listeA from "./components/ListeArticles.vue";

Alors, nous aurions dû mettre <ListeA/>.

On peut aussi enregistrer des composantes de façon globales, mais c'est recommandé de ne pas le faire, sauf dans des cas très particuliers.

Information ❗

Tout ce qui est enregistré globalement impacte la performance du chargement initial de l'application.

Fonctionnalité de Vue.js

Interpolation de String

L'interpolation de string est une fonctionnalité de Vue.js qui nous permet d'afficher des données dynamiques dans notre interface utilisateur. Nous pouvons utiliser la syntaxe des doubles {} pour afficher la valeur d'une variable ou le résultat d'une expression JavaScript dans notre template.

Voici un exemple d'interpolation de string dans Vue.js :

<template>
  <h2>{{ "Allo" + " toi!" }}</h2>
</template>

On peut aussi utiliser des variables pour l'interpolation de string. Par exemple :

<script setup lang="ts">
import { ref } from 'vue';
let nom = ref('Jean');
</script>

<template>
  <p>Bonjour, {{ nom }}!</p>
</template>

Rappel : ref est une fonction de Vue.js qui nous permet de créer des variables réactives. Lorsque la valeur de nom change, le composant se mettra à jour automatiquement pour refléter ce changement dans l'interface utilisateur.

On peut aussi afficher le résultat d'une méthode du script :

<script setup lang="ts">
import { ref } from 'vue';
let nom = ref('Jean');
function saluer() {
  return `Bonjour, ${nom.value}!`
}
</script>

<template>
  <p>{{ saluer() }}</p>
</template>

Directives

Les directives sont des attributs spéciaux que nous pouvons ajouter à nos éléments HTML pour leur donner des comportements spécifiques et rendre dynamique notre interface utilisateur.

Les directives de Vue.js commencent par v- et sont suivies du nom de la directive. Par exemple, v-for sera la première directive que nous allons voir, elle nous permet de faire du rendu de liste en itérant sur un tableau de données.

Par exemple, pour répéter plusieurs détails dans le composant ListeArticles.vue, nous pouvons faire ceci :

<script setup lang="ts">
  import { ref } from 'vue';

  const titre = ref('Mes articles');

  const articles = ['Bâton de baseball', 'Gant de hockey', 'Médaille du tournoi de mini-putt'];
</script>

<template>
  <h2>{{ titre }}</h2>
  <ul>
    <li v-for="article in articles">
      {{ article }}
    </li>
  </ul>
</template>

Ici, l'utilisation de la directive v-for nous permet de créer une liste d'éléments <li> pour chaque article du tableau articles.

Information ❗

À noter que la répétition se passe sur l'élément ainsi que tout ce qui est à l'intérieur de l'élément <li></li>. C'est la raison pourquoi le v-for n'était pas sur le <ul>. Car on veut un seul <ul>.

Erreur lors de l'utilisation de v-for?

Vous avez sûrement une erreur qui mentionne d'ajouter v-bind:key sur le <li>. Nous allons voir à quoi ça sert plus tard. Pour l'instant, vous pouvez ajouter l'attribut :key="article" pour corriger l'erreur.

Services

Pour aller chercher les données sur un serveur, on doit créer un service. On ne doit pas mettre le code permettant de récupérer des données dans une composante. Les components sert à afficher des données à utilisateur seulement.

L'utilisation de service de séparer la logique de récupération de données de la logique d'affichage.

Truc 💡

Vous allez devoir vous créer un dossier dans src pour stocker vos services. Appelez-le services. C'est une convention très répandue dans l'industrie.

Création de notre premier service

À partir de l'exemple de composant ListeArticles.vue, nous allons créer un service pour aller chercher les détails de l'article. Appeler le service articles.ts et le mettre dans le dossier services.

articles.ts

export default class ArticlesService {
    obtenirArticles(): string[] {
        return ['Bâton de baseball', 'Gant de hockey', 'Médaille du tournoi de mini-putt'];
    }
}

Information ❗

Nous verrons plus tard comment récupérer les données depuis un serveur. Pour l'instant, nous allons seulement séparer notre code.

Nous devons maintenant utiliser notre service dans notre composant ListeArticles.vue.

<script setup lang="ts">
  import { ref } from 'vue';
  import ArticlesService from '@/services/articles';

  const titre = ref('Mes articles');

  const service = new ArticlesService();
  const articles = service.obtenirArticles();
</script>

<template>
  <h2>{{ titre }}</h2>
  <ul>
    <li
        v-for="article in articles"
        :key="article"
    >
      {{ article }}
    </li>
  </ul>
</template>

Résultat