• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • 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 continuellement des outils pour le langage au quotidien.

    Cela rend difficile le choix de l'outil / du cadre / de la bibliothèque à utiliser pour une tâche particulière, car il existe 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 cadre apprendre.

    Cet article se concentre sur la démystification de l'avantage d'utiliser plusieurs frameworks / bibliothèques frontaux JavaScript et en donne finalement une image plus claire. Il vise à faciliter le processus de décision pour en sélectionner un.

    Réagir

    Réagir n'est pas un framework mais une bibliothèque JavaScript pour créer des interfaces utilisateur.

    Il est open-source et maintenu par Facebook et une communauté de développeurs individuels. React a été initialement écrit par Jordan Walke en tant qu'outil interne à Facebook. Il a ensuite été open sources et diffusé au grand public en 2013, et a acquis une grande 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éutilisation du code
    • Il a un écosystème dynamique et prospère derrière lui
    • Gestion pratique de la gestion de l'état

    Installation / utilisation

    React peut être utilisé sur le frontend de deux manières différentes.

    • Sur CDN
    • Utilisation de Node.JS

    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 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 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>

    Utilisation de Node.JS

    Je suppose que vous avez déjà installé NodeJS. Pour installer React, tapez simplement 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 my-first-react-application

    La commande ci-dessus installera toutes les bibliothèques nécessaires pour que React s'exécute correctement, qui comprend un serveur de développement, un pack Web et babel.

    Accédez à la my-first-react-application dossier et exécutez la commande suivante

    npm start

    Ce qui précède lancera un serveur de développement sur le port 3000. Et, lorsque vous accédez à l'adresse IP de votre serveur avec le port 3000, vous devriez voir quelque chose comme ci-dessous.

    React gagne en popularité et à la demande par un certain nombre de grandes organisations. Si vous êtes intéressé par l'apprentissage, je vous recommande de prendre ceci 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 de modèle avec la bibliothèque principale, se concentrant sur la couche de vue. Vue est populaire, car il permet d'alimenter des applications d'une seule page. Contrairement à React, Vue utilise du HTML brut et non du JSX.

    Vue.js est un open-source et a été initialement créé par Evan vous et publié publiquement en février 2014. Voici quelques-unes des fonctionnalités.

    • Il fournit des composants de vue réactifs et composables.
    • Utilise un DOM virtuel
    • Reste concentré sur la bibliothèque de base (c.-à-d. Le routage et la gestion de l'état)
    • La portée en CSS est gérée sans CSS-In-Js
    •  Liaison unidirectionnelle au sein des composants.
    • Prise en charge des addons essentiels
    • Réutilisation du code

    Installation / utilisation

    Vous pouvez utiliser Vue.js sur le front-end via le CDN ou avec Node.js

    Pour utiliser la Manière CDN, vous pouvez ajouter le script suivant à votre section d'en-tête de 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 comprend un message de console important. Cependant, pour la production, vous devez utiliser celui ci-dessous.

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    Et à utiliser avec Nodejs, vous pouvez l'installer en utilisant npm commander.

    npm install vue

    Je vous conseille vivement de lire le Vue JS officiel Documentation pour en savoir plus ou envisager de prendre ceci chemin.

    Angulaire

    Angulaire est un framework JavaScript structurel pour les pages dynamiques. Il permet l'utilisation du HTML comme langage de modèle et permet l'utilisation de la syntaxe HTML pour exprimer le composant 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 les derniers Nodejs sont installés. La première chose que nous devrons installer est l'outil Angular CLI.

    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 npm module 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 apps.

    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

    Ainsi, 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 devez apprendre Angular si vous voulez un Framework sur lequel vous souhaitez vous appuyer sans avoir à gérer les dépendances externes.
    • Vous devriez apprendre React si vous voulez créer rapidement une application PWA, une page unique et que vous êtes à l'aise avec JSX.
    • React a la communauté la plus dynamique et plus de possibilités d'emploi en raison de sa grande communauté.
    • React est relativement simple à utiliser.
    • 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 de 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.