L’ascension de JavaScript a été fulgurante ces dernières années. La communauté de développeurs s’agrandit à une vitesse impressionnante, créant quotidiennement de nouveaux outils et ressources pour ce langage dynamique.
Cette profusion d’options peut rapidement devenir déroutante. Choisir le bon outil, framework ou bibliothèque pour une tâche spécifique est un défi, tant les alternatives sont nombreuses. Pour les débutants, il est souvent difficile de savoir par où commencer et quelle technologie apprendre en premier.
Cet article a pour objectif de clarifier les avantages de l’utilisation de plusieurs frameworks et bibliothèques JavaScript front-end. Il vise à offrir une perspective plus claire et à simplifier le processus décisionnel lors du choix d’une solution appropriée pour vos projets.
React
React est une bibliothèque JavaScript, et non un framework, dédiée à la création d’interfaces utilisateur interactives.
Développée en open source, elle est gérée par Facebook ainsi qu’une communauté active de développeurs. Initialement conçue comme un outil interne chez Facebook par Jordan Walke, React est devenue open source en 2013, et a depuis acquis une popularité considérable.
Voici quelques-unes de ses caractéristiques clés:
- Propose des composants réactifs, modulables et réutilisables.
- Utilise un DOM virtuel pour des mises à jour efficaces.
- Offre une rapidité d’exécution impressionnante.
- Adopte une approche basée sur les composants.
- Met en œuvre une liaison de données unidirectionnelle.
- Favorise la réutilisation du code.
- Bénéficie d’un écosystème riche et dynamique.
- Facilite la gestion de l’état de l’application.
Configuration et Utilisation
React peut être intégré à un projet front-end de deux manières différentes.
Via un CDN
Le site officiel fournit des liens vers les scripts nécessaires, qui peuvent être inclus dans la balise <head> de votre fichier HTML. Choisissez les liens appropriés en fonction de votre environnement.
Pour un environnement de développement, par exemple, utilisez:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
Et, pour la production:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
Avec Node.js
En supposant que vous ayez déjà installé Node.js, l’installation de React se fait via la commande suivante:
sudo npm i -g create-react-app –save-dev
Une fois l’installation terminée, tapez la commande suivante:
create-react-app ma-premiere-application-react
Cette commande installe les bibliothèques nécessaires au bon fonctionnement de React, notamment un serveur de développement, Webpack et Babel.
Naviguez vers le dossier « ma-premiere-application-react » et exécutez:
npm start
Ceci lancera un serveur de développement sur le port 3000. En accédant à l’IP de votre serveur sur ce port, vous devriez voir une page par défaut.
La popularité de React ne cesse de croître, de nombreuses entreprises l’adoptant. Si vous souhaitez apprendre React, je vous recommande ce cours complet.
Vue.js
Vue.js est un framework JavaScript progressif pour créer des interfaces utilisateur interactives et des applications monopages. Il propose un modèle de vue avec une bibliothèque principale, se concentrant sur la couche de vue. La capacité de Vue à gérer des applications monopages en fait un outil très apprécié. Contrairement à React, Vue utilise directement le HTML et non JSX.
Vue.js est open source, créé initialement par Evan You et rendu public en février 2014. Voici quelques-unes de ses fonctionnalités :
- Fournit des composants de vue réactifs et composables.
- Utilise un DOM virtuel.
- Met l’accent sur la bibliothèque principale (gestion du routage et de l’état).
- Gère le CSS avec un système de portée sans CSS-In-Js.
- Implémente la liaison unidirectionnelle dans les composants.
- Offre la prise en charge d’addons essentiels.
- Facilite la réutilisation du code.
Configuration et Utilisation
Vue.js peut être utilisé en front-end via un CDN ou Node.js
Pour utiliser un CDN, ajoutez le script suivant dans la section <head> de votre page HTML:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Ce script est approprié pour le développement car il inclut des messages de console utiles. Pour la production, utilisez le script suivant:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Pour l’utiliser avec Node.js, installez-le avec la commande npm:
npm install vue
Je vous conseille vivement de lire la documentation officielle de Vue.js ou de suivre ce parcours.
Angular
Angular est un framework JavaScript structurel pour les pages dynamiques. Il permet d’utiliser le HTML comme langage de modèle et la syntaxe HTML pour exprimer clairement les composants d’applications. C’est un projet open-source, maintenu par Google et des contributeurs.
Installation
Assurez-vous que la dernière version de Node.js est installée. La première étape consiste à installer l’outil CLI d’Angular :
npm install -g @angular/cli
Une fois installé, créez un nouveau projet avec la commande suivante:
ng new ma-premiere-application-angular
Suivez les instructions à l’écran. Cette commande génère des fichiers et des dossiers, et utilise le module npm pour télécharger les bibliothèques tierces nécessaires au bon fonctionnement d’Angular.
Pour démarrer l’application, exécutez la commande suivante depuis le dossier de l’application:
ng serve
Ceci démarrera automatiquement le serveur sur le port 4200.
[[email protected] ma-premiere-application-angular]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
Conclusion
Le choix du framework à apprendre dépend de vos préférences personnelles, et non d’une notion de « meilleur ».
Tous les frameworks et bibliothèques mentionnés sont d’excellents outils. Voici un résumé rapide:
- Apprenez Angular si vous recherchez un framework complet sur lequel vous reposer sans devoir gérer des dépendances externes.
- Choisissez React si vous souhaitez créer rapidement une application PWA monopage et que vous êtes à l’aise avec JSX.
- React bénéficie de la communauté la plus active et offre un grand nombre d’opportunités professionnelles.
- React est relativement facile à prendre en main.
- React est hautement personnalisable et traite chaque élément de l’interface comme un composant.
- Vue offre les mêmes avantages que React, mais sans JSX.
- Le marché de l’emploi pour Vue est en croissance constante.
Voici un graphique Google Trends comparant la popularité des trois outils:
Si le développement front-end vous intéresse, vous pouvez consulter ce cours Udemy.