React, Vue et Svelte : trois approches du JavaScript frontend

React est une bibliothèque qui s'exécute dans le navigateur. Vue est un framework avec un runtime. Svelte est un compilateur qui transforme les composants en code JavaScript efficace sans surcharge de runtime pendant le processus de build. Cette différence fondamentale détermine comment chaque technologie performe et comment vous travaillez avec elle.

2. Connaissez l'architecture de base de React.

React a introduit le 29 mai 2013 le Virtual DOM : une représentation en mémoire du vrai DOM. Lorsque les données de l'application changent, React calcule la différence entre la vue virtuelle précédente et la nouvelle, et met à jour uniquement les parties réellement modifiées. React se concentre exclusivement sur la couche de vue — les développeurs choisissent eux-mêmes des bibliothèques supplémentaires pour la gestion d'état et le routage.

// Composant React 18 avec hooks
   import React, { useState } from 'react';</p><p>function Counter() {
     const [count, setCount] = useState(0);
     return (
       <button onClick={() => setCount(count + 1)}>
         Cliqué : {count} fois
       </button>
     );
   }

3. Comprenez comment Vue fonctionne.

Vue a été annoncé le 3 février 2014 par Evan You, qui avait auparavant travaillé chez Google avec AngularJS. Le dépôt GitHub date du 29 juillet 2013. Vue combine un système de templates proche du HTML avec le support de JSX et le développement basé sur les composants. Il offre une adoption progressive : vous commencez avec une balise script et vous montez en échelle vers de grandes applications avec Vue Router et Pinia pour la gestion d'état.

<script setup>
   import { ref } from 'vue';
   const count = ref(0);
   </script></p><p><template>
     <button @click="count++">
       Cliqué : {{ count }} fois
     </button>
   </template>

4. Étudiez l'approche compilateur de Svelte.

Svelte est apparu le 29 novembre 2016, créé par Rich Harris, qui avait auparavant développé Ractive.js. Au lieu d'un Virtual DOM, Svelte utilise un compilateur qui transforme les composants en manipulation directe du DOM pendant le processus de build. Cela élimine la surcharge de runtime et entraîne des temps de chargement initiaux plus rapides et des bundles plus petits. Svelte 3 a introduit le 21 avril 2019 le label `$:` pour la réactivité déclarative.

<script>
     let count = 0;
     $: doubled = count * 2;
   </script></p><p><button on:click={() => count++}>
     Cliqué : {count} fois (double : {doubled})
   </button>

5. Comparez l'historique des versions.

Svelte 2 est apparu le 19 avril 2018 avec une réactivité améliorée. Svelte 3 a suivi le 21 avril 2019 avec une nouvelle syntaxe de composants et le label `$:`. En octobre 2020, Harris a annoncé SvelteKit — un framework comparable à Next.js pour React ou Nuxt.js pour Vue. SvelteKit est passé en version bêta en mars 2021 et offre le rendu côté serveur (SSR), la génération de sites statiques (SSG) et le routage côté client avec des adaptateurs pour Vercel, Netlify et les serveurs Node.js.

6. Choisissez en fonction du contexte du projet.

React a la plus grande communauté et le plus de support externe grâce à Meta. Vue offre une courbe d'apprentissage douce et beaucoup de fonctionnalités prêtes à l'emploi — il est largement utilisé en Chine et dans les entreprises de taille moyenne. Svelte attire les développeurs qui veulent moins de code boilerplate et qui considèrent la performance ou la petite taille des bundles comme critique. Le choix dépend de l'expérience de l'équipe, des exigences de performance et des modèles de conception.

7. Utilisez Vite pour la configuration du projet.

Vite prend en charge prêt à l'emploi des templates pour React, Vue et Svelte en JavaScript et TypeScript. Cela élimine la nécessité de configurer manuellement des bundlers complexes comme Webpack.

<h2>Configurer un projet React avec Vite 5</h2>
   npm create vite@latest my-react-app -- --template react</p><h2>Configurer un projet Vue</h2>
   npm create vite@latest my-vue-app -- --template vue<h2>Configurer un projet Svelte</h2>
   npm create vite@latest my-svelte-app -- --template svelte

8. Installez les dépendances et démarrez le serveur de développement.

cd my-react-app
   npm install
   npm run dev

Vérification

Vérifiez que votre projet fonctionne correctement en ouvrant le serveur de développement sur `http://localhost:5173`. Vous devriez voir la page d'accueil standard de Vite avec le logo du framework choisi. Pour une vérification fonctionnelle :

<h2>Vérifiez que le serveur tourne</h2>
curl http://localhost:5173

La sortie doit contenir du HTML avec le texte "Vite + React", "Vite + Vue" ou "Vite + Svelte", selon le template choisi.

Problèmes fréquents

1. `npm create vite@latest` donne un message d'erreur concernant la version de Node.js.

Vite 5 requiert Node.js 18 ou supérieur. Vérifiez votre version avec `node --version` et mettez à jour si nécessaire.

2. Le port 5173 est déjà utilisé.

Vite choisit automatiquement le prochain port disponible. Vous voyez la bonne adresse dans la sortie du terminal. Forcez un port spécifique avec `npm run dev -- --port 3000`.

3. Le composant Svelte affiche un avertissement concernant `on:click`.

Dans Svelte 4, `on:click` est obsolète. Utilisez `onclick` comme attribut d'événement dans Svelte 5, ou passez à la version la plus récente.

Le choix entre React, Vue et Svelte n'est pas une question de savoir quelle technologie est « meilleure » — c'est un compromis entre un écosystème mature avec une flexibilité maximale, un framework équilibré avec un seuil d'entrée bas, ou une approche basée sur un compilateur qui minimise le code d'exécution. Chaque technologie continue d'évoluer en fonction des retours des utilisateurs et de l'évolution des normes web, et l'arrivée d'outils comme Vite a considérablement abaissé le seuil d'entrée pour les trois. Le prochain grand changement dans le développement frontend ne viendra probablement pas d'un nouveau framework, mais de la manière dont les technologies existantes s'adaptent à WebAssembly, à l'informatique en périphérie et aux interfaces générées par l'IA.