JavaScript a de plus en plus gagné en popularité au fil des ans, la communauté se développe rapidement et les développeurs développent et construisent quotidiennement des outils pour le langage.
Cela le rend écrasant lorsqu’il s’agit de décider quel outil/framework/bibliothèque utiliser pour une tâche particulière car il y a toujours plusieurs options pour littéralement tout ce que vous voulez faire en JavaScript. Au début, il est toujours difficile de décider quelle bibliothèque ou quel framework apprendre.
Cet article se concentre sur la démystification de l’avantage d’utiliser plusieurs frameworks/bibliothèques JavaScript frontaux et en donne finalement une image plus claire. Il est destiné à faciliter le processus de décision de sélection.
Table des matières
Réagir
Réagir n’est pas un framework mais une bibliothèque JavaScript pour la construction d’interfaces utilisateur.
Il est open-source et maintenu par Facebook et une communauté de développeurs individuels. React a été initialement écrit par Jordan Walk comme outil interne à Facebook. Il a ensuite été open source et rendu public en 2013, et a acquis une large gamme de popularité par la suite.
Certaines des fonctionnalités incluent les suivantes.
- Fournit des composants réactifs, personnalisables et réutilisables
- Utilise un DOM virtuel
- Extrêmement vite
- Basé sur les composants
- Liaison de données unidirectionnelle
- Réutilisabilité du code
- Il a un écosystème dynamique et prospère derrière lui
- Gestion pratique de l’état
Mise en place/Utilisation
React peut être utilisé sur le frontend de deux manières différentes.
Sur CDN
Vous pouvez vous référer à leur site officiel pour obtenir un lien de scripts, que vous pouvez inclure dans la balise d’en-tête de votre balisage HTML. Choisissez les liens en fonction de l’objectif.
Par exemple, si vous l’utilisez dans un environnement de développement, alors :
<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 fabrication
<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>
Utiliser Node.JS
Je suppose que vous avez déjà installé NodeJS. Pour installer React, tapez simplement la commande suivante.
sudo npm i -g créer-réagir-app –save-dev
Une fois l’installation terminée, tapez la commande suivante
créer-réagir-app ma-première-réaction-application
La commande ci-dessus installera toutes les bibliothèques nécessaires pour que React s’exécute correctement, ce qui inclut un serveur de développement, un webpack et babel.
Accédez au dossier my-first-react-application et exécutez la commande suivante
début npm
Ce qui précède lancera un serveur de développement sur le port 3000. Et, lorsque vous accéderez à l’IP de votre serveur avec le port 3000, vous devriez voir quelque chose comme ci-dessous.
React gagne en popularité et est à la demande d’un certain nombre de grandes organisations. Si vous êtes intéressé à apprendre, alors je vous recommande de prendre ce cours complet.
Vue.js
Vue.js est un framework JavaScript progressif pour la création d’interfaces utilisateur interactives et d’applications d’une seule page. Il s’agit d’un cadre de vue modèle avec la bibliothèque principale, se concentrant sur la couche de vue. Vue est populaire, car c’est la capacité d’alimenter des applications d’une seule page. Contrairement à React, Vue utilise du HTML brut et non du JSX.
Vue.js est une source ouverte et a été initialement créé par Evan vous et rendu public en février 2014. Voici quelques-unes des fonctionnalités.
- Il fournit des composants de vue réactifs et composables.
- Utilise un DOM virtuel
- Maintient l’accent sur la bibliothèque principale (c’est-à-dire la gestion du routage et de l’état)
- La portée dans CSS est gérée sans CSS-In-Js
- Liaison unidirectionnelle dans les composants.
- Prise en charge des addons essentiels
- Réutilisabilité du code
Mise en place/Utilisation
Vous pouvez utiliser Vue.js sur le front-end soit sur le CDN, soit avec Node.js
Pour utiliser la méthode CDN, vous pouvez ajouter le script suivant à la section d’en-tête de votre page HTML.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Le script ci-dessus convient à des fins de développement car il inclut un message de console important. Cependant, pour la production, vous devriez utiliser celui ci-dessous.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Et, pour l’utiliser avec Nodejs, vous pouvez l’installer à l’aide de la commande npm.
npm install vue
Je vous conseille fortement de lire le Vue JS officiel Documentation pour en savoir plus ou envisager de prendre ce chemin.
Angulaire
Angulaire est un framework JavaScript structurel pour les pages dynamiques. Il permet l’utilisation de HTML comme langage de modèle et permet l’utilisation de la syntaxe HTML pour exprimer les composants des applications de manière claire et concise. Il s’agit d’un projet open-source maintenu par Google et d’autres contributeurs.
Installation
Assurez-vous que la dernière version de Nodejs est installée. La première chose que nous devrons installer est l’outil CLI angulaire.
npm install -g @angular/cli
Une fois installé, nous pouvons créer un nouveau projet avec la commande suivante.
ng new my-first-angular-app
Suivez les instructions à l’écran. Cela génère certains fichiers et 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 nouvellement créée, exécutez la commande suivante à partir du dossier des applications.
ng server
Cela devrait démarrer automatiquement le serveur sur le port 4200.
[[email protected] my-first-angular-app]# 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
Donc, ce que vous choisissez d’apprendre est plus une préférence personnelle que « ce qui est mieux ».
Tous les frameworks/bibliothèques listés ci-dessus sont excellents. Voici un bref récapitulatif ;
- Vous devriez apprendre Angular si vous voulez un Framework sur lequel vous voulez vous appuyer sans avoir à gérer des dépendances externes.
- Vous devez apprendre React si vous souhaitez créer rapidement une application PWA à page unique et que vous êtes à l’aise avec JSX.
- React a la communauté la plus dynamique et plus d’opportunités d’emploi en raison de sa grande communauté.
- React est relativement facile à démarrer.
- React est hautement personnalisable et traite chaque élément de l’interface utilisateur comme un composant.
- Vue a les mêmes avantages que React mais sans JSX.
- Le marché du travail pour Vue est en constante augmentation.
Voici un graphique sur Google Trends montrant une comparaison du taux de popularité des 3 d’entre eux.
Si le développement front-end vous intéresse, vous pouvez consulter ceci Cours Udemy.