Présentation de Vue3.js

Comme le signale le site http://fr.vuejs.org, le framework Vue3.js respecte les standards habituels (HTML, CSS et JavaScript) comme le font les outils tels Svelte et React que nous avons étudiés dans les chapitres précédents.

Indiscutablement, les deux concurrents principaux sur ce segment des outils de développement web rapide sont React.js et Vue3.js.

Les comparer, c’est analyser deux des frameworks JavaScript front-end parmi les plus en vogue.

Toutefois, dans le secteur du développement en constante évolution, de nouvelles alternatives émergent constamment, élargissant le choix des outils.

Le choix final dépend des besoins du client et des compétences de l’équipe.

1. Points communs entre React.js et Vue3.js

Lors d’une comparaison de React.js et Vue3.js, il est crucial dans un premier temps de comprendre leurs points communs avant de se pencher sur leurs différences. D’abord, les deux sont des bibliothèques ou des « frameworks » JavaScript utilisés pour le développement front-end. Ils reposent sur le modèle du DOM virtuel, garantissant de bonnes performances pour les applications web à page unique.

React.js exploite le DOM virtuel pour créer une réplique virtuelle de l’interface utilisateur, la stockant en mémoire pour une synchronisation avec...

Applications basiques Vue3.js

Dans cette section, l’approche pédagogique consiste à développer une série de neuf applications (ou projets) présentées en ordre progressif de difficulté.

La thématique sera commune à l’ensemble de ces développements, nous utiliserons comme dans d’autres chapitres le support d’un mini-jeu de données portant sur des voitures.

1. Application « eni_vue3js_liste_voitures_01.html »

L’enjeu de cette première application est d’afficher sans effort particulier de présentation un jeu de données constitué de trois voitures (de sport) caractérisées par une propriété unique :

BMW M1
Ferrari Testarossa
Porsche 964

Pour l’ensemble de ces applications basiques, le code source sera présenté. Le code comportera des commentaires, et des explications supplémentaires « hors code » seront aussi fournies.

L’affichage de la première application dans le navigateur de votre choix (nous utiliserons personnellement Google Chrome) donne ceci :

Consultons l’intégralité du code source avant de commenter cette application plus en détail ensuite. Ce premier code sera présenté ci-après avec une numérotation des lignes facilitant le suivi des explications.

1.   <!DOCTYPE html> 
2.      
3.   <html lang="fr">   
4.      
5.       <!--   
6.           Nom du script : eni_vue3js_liste_voitures_01.html   
7.           Auteur : Christian VIGOUROUX - ENI Editions   
8.           Date de création : 21/05/2024   
9.           Date de dernière modification : 21/05/2024   
10.          Objet : Liste de voitures   
11.     -->   
12.    
13.     <!-- Entête de la page -->   
14.     <head>   
15.            
16.         <!-- Balises meta -->   
17.         <meta charset="UTF-8">   
18.         <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
19.            
20.         <!-- Titre de la page dans l'onglet -->   
21.         <title>Voitures de sport (version 01)</title>   ...

Applications Vue3.js couplées avec MySQL

Dans cette section, nous allons voir comment coupler des applications Vue3.js avec un dispositif de persistance de données. Nous utiliserons pour cela le Système de Gestion de Bases De Données (SGBD) MySQL. La version employée pour ce SGBD sera locale. Il sera très facile de modifier les applications afin qu’elles puissent utiliser une version « en ligne » de ce même SGBD MySQL en modifiant les identifiants de connexion.

Si vous souhaitez déployer sur votre configuration personnelle sous Windows les différents exemples présentés, vous pourrez installer par exemple la suite EasyPHP pour disposer d’un SGBD MySQL en version locale.

Le site de téléchargement de la suite EasyPHP est disponible à l’adresse : https://www.easyphp.org/download.php

Dans notre cas, nous nous sommes contentés d’installer la version 14.1 VC11 de cette suite EasyPHP, version ancienne mais facile à déployer.

Pour la série d’applications Vue3.js couplées avec le SGBD MySQL, l’utilisation faite du framework Vue3.js sera différente de celle vue pour les applications basiques étudiées jusqu’à présent.

Dans les applications vues précédemment dans ce chapitre, qui étaient constituées d’un seul fichier HTML incluant du code JavaScript, seul un appel à la version du framework Vue3.js disponible en ligne était réalisé, et ceci par la directive <script src="https://unpkg.com/vue"></script>.

Rappelons que le Vue3.js est un framework JavaScript qui est principalement utilisé pour la création d’applications web interactives et réactives. Il peut être utilisé de plusieurs manières différentes, en fonction des besoins de votre projet et de vos préférences de développement.

Il existe trois modes courants d’utilisation de Vue3.js :

Content Delivery Network (CDN) : utilisation une balise script directement dans une page HTML (<script src="https://unpkg.com/vue"></script>).
Node.js Package Manager (NPM) : utilisation du framework dans un projet Node.js via npm.
CLI : utilisation de la CLI (interface de ligne de commandes) Vue3.js.

Revenons en détail sur ces trois manières d’utiliser Vue3.js.

1. Content Delivery Network (CDN)

En CDN (Content Delivery Network), le framework Vue3.js est appelé via une balise <script> directement dans une page HTML. Le CDN héberge la librairie Vue3.js en ligne et celle-ci est donc simplement embarquée dans le script HTML/JavaScript de votre application. IL s’agit de la technique utilisée dans nos applications basiques de type SPA (Single Page Application). Vous trouverez ci-après un mini-exemple :

1.   <!DOCTYPE html>  
2.   <html>  
3.     <head>  
4.       <!—Inclusion du framework Vue3.js depuis le CDN -->  
5.       <script src="https://unpkg.com/vue"></script>  
6.     </head>  ...