Philosophie et Concepts de Base
(Semaine 1 – Phase 1 : Fondamentaux)
🎯 Objectifs de la leçon
À la fin de ce cours, tu seras capable de :
- Expliquer ce qu’est Vue.js et pourquoi il est conçu comme un framework progressif.
- Comprendre les différences clés entre Vue, React et Angular.
- Identifier les cas d’usage concrets de Vue.js.
- Savoir pourquoi Vue 3 est la version à apprendre dès aujourd’hui.
1. Qu’est-ce que Vue.js ?
Prononciation : « View » (comme vue en anglais).
Définition : Vue.js est un framework JavaScript pour construire des interfaces utilisateur réactives.
Créé en 2014 par Evan You (ancien ingénieur chez Google), Vue.js a été conçu pour combiner la simplicité d’Angular (templates HTML) et la puissance de React (système de réactivité), tout en restant léger, flexible et accessible.
Contrairement aux frameworks « monolithiques », Vue est modulaire : tu n’as pas besoin de tout apprendre d’un coup. Tu commences petit, et tu montes en puissance quand tu en as besoin.
💡 Analogie : Apprendre Vue, c’est comme apprendre à nager. Tu commences dans une piscine avec des brassards (un simple script dans une page HTML), puis tu progresses vers la mer (une application complète avec routage, état global, etc.).
2. 🌱 Philosophie : Le « Framework Progressif »
Vue se décrit comme un framework évolutif ou progressif. Cela signifie qu’il peut s’adapter à tous les niveaux de complexité :
| Niveau | Usage | Outils |
|---|---|---|
| 1. Librairie légère | Ajouter de l’interactivité à une page existante | CDN (balise <script>) |
| 2. Application composants | Interface riche, logique métier structurée | Composants monofichiers (SFC), Vite |
| 3. Framework complet | SPA, gestion d’état, routage, SSR | Vue Router, Pinia, Nuxt |
✅ Avantage clé : Tu peux commencer sans outil de build, puis adopter des outils modernes (comme Vite) quand ton projet grandit.
📚 Source officielle : Introduction – Vue.js (fr.vuejs.org)
3. ⚖️ Vue vs React vs Angular – Comparaison pour débutants
| Critère | Vue.js | React | Angular |
|---|---|---|---|
| Nature | Framework progressif | Bibliothèque UI | Framework complet |
| Courbe d’apprentissage | ✅ Douce | Moyenne | 🔺 Raide |
| Syntaxe | Templates HTML familiers | JSX (JavaScript + HTML) | Templates + TypeScript strict |
| Flexibilité | Très flexible | Très flexible (mais choix d’outils à faire) | Opinionated (structure imposée) |
| Pour qui ? | Débutants, projets de toute taille | Développeurs JS expérimentés | Grandes équipes, applications d’entreprise |
✅ Pourquoi Vue pour un débutant ?
- Tu restes dans un environnement HTML/CSS/JS que tu connais déjà.
- La documentation est excellente, claire et traduite en français.
- Tu n’es pas submergé par des concepts avancés dès le départ.
4. 🏢 Cas d’utilisation concrets
Vue.js est utilisé dans des contextes très variés :
- Amélioration progressive de sites existants (ex: formulaire dynamique)
- Applications monopages (SPA) comme des outils SaaS ou des dashboards
- Interfaces d’administration (backoffices)
- Sites statiques avec VitePress ou VuePress
- Applications mobiles (via Ionic Vue ou Capacitor)
- Applications de bureau (avec Electron)
🌐 Entreprises utilisant Vue :
- GitLab (interface principale)
- Adobe, BMW, Nintendo, Laravel (framework PHP)
💡 Vue est polyvalent : il s’adapte aussi bien à un petit projet perso qu’à une application d’entreprise.
5. 🔄 Vue 3 vs Vue 2 : Que faut-il retenir ?
⚠️ Vue 2 est en fin de vie depuis le 31 décembre 2023.
✅ Tu dois apprendre Vue 3 dès maintenant.
Principales évolutions de Vue 3 :
| Fonctionnalité | Vue 2 | Vue 3 |
|---|---|---|
| API principale | Options API (data, methods, etc.) |
✅ Composition API (ref, computed, onMounted, etc.) |
| Performance | Bonne | 🔥 Meilleure (réactivité optimisée, bundle plus léger) |
| TypeScript | Support partiel | ✅ Support natif |
| Structure d’app | new Vue({}) |
createApp({}) |
| Écosystème | Vuex, Vue Router 3 | ✅ Pinia, Vue Router 4 |
💡 La Composition API permet d’organiser ton code par logique métier (ex: tout ce qui concerne l’authentification au même endroit), ce qui rend les gros composants plus maintenables.
📚 Source officielle : Migration de Vue 2 à Vue 3
📚 Ressources à consulter
- Vue.js – Le Framework (fr.vuejs.org)
- Guide d’introduction – fr.vuejs.org
- Vue 3 vs Vue 2 – fr.vuejs.org
✅ Résumé visuel (à retenir)
//Vue.js
Vue.js = Framework JavaScript progressif
= Réactif, composant-based, accessible
= Évolutif : de la balise <script> à l’application complète
= Vue 3 = moderne, rapide, avec Composition API et TypeScript
= Idéal pour les débutants grâce à sa douce courbe d’apprentissage
« Concepts fondamentaux préalables : HTTP, REST, JSON, architecture composants » ?
Prêt à passer à la suite ?
Vous avez terminé cette leçon sur Philosophie et Concepts de Base. Continuez votre apprentissage avec la prochaine leçon ou explorez d'autres formations.