Par rapport au nombre de développeurs JavaScript, il semble y avoir plus de frameworks, de bibliothèques et d'outils JavaScript. En mai 2017, une recherche rapide sur GitHub montre qu'il existe plus de 1,1 million de projets JavaScript. npmjs.org propose 500 000 packages disponibles et près de 10 milliards de téléchargements par mois.

Cet article abordera les frameworks, bibliothèques et outils JavaScript côté client les plus populaires ainsi que les différences fondamentales entre eux. Peut-être que cet article ne peut pas vous dire lequel est le meilleur, mais celui qui convient le mieux à votre projet est le meilleur.

Bibliothèque de classes

Une bibliothèque de classes est une collection organisée de fonctions. Les bibliothèques de classes typiques incluent le traitement de chaînes, les dates, les éléments HTML DOM, les événements, les cookies, les animations, les requêtes réseau et d'autres fonctions. Vous pouvez implémenter vous-même une fonction pour choisir si la fonction doit renvoyer une valeur lorsqu'elle est appelée.

Les bibliothèques de classes fournissent généralement une méthode d'abstraction de haut niveau qui peut aider à mettre en œuvre en douceur les détails du projet. Par exemple, Ajax s'appuie généralement sur l'API XMLHttpRequest, qui ne nécessite que quelques lignes de code pour implémenter la fonction, mais il existe des différences subtiles entre les navigateurs. La bibliothèque de classes fournit des fonctions ajax() plus simples afin que les développeurs puissent se concentrer sur la logique métier de niveau supérieur.

La bibliothèque de classes peut réduire le temps de développement de 20 % et les développeurs n'ont pas à se soucier des détails d'implémentation.

Mais il y a aussi des inconvénients :

• Les erreurs dans la bibliothèque de classes sont difficiles à localiser et à corriger

• L'équipe de développement ne peut pas garantir la publication rapide des correctifs

• Le correctif peut modifier l'API, ce qui entraînera la modification d'une grande quantité de code

• Si vous rencontrez des problèmes pendant le processus d'apprentissage ou souhaitez obtenir des ressources d'apprentissage, bienvenue pour rejoindre le groupe d'apprentissage et d'échange
  343599877, apprenons ensemble le front-end !

Framework

Un frame est le squelette d'une application. Cela nécessite de concevoir un logiciel d’une manière spécifique et d’implémenter sa propre logique sur certains nœuds. Les frameworks fournissent généralement des fonctions telles que les événements, le stockage et la liaison de données.

Les frameworks offrent généralement un niveau d'abstraction plus élevé que les bibliothèques de classes, permettant de créer rapidement les premiers 80 % d'un projet.

Inconvénients des frameworks :

• Si votre candidature dépasse le périmètre du framework, les 20% restants peuvent être difficiles

• Les mises à jour du framework sont difficiles

• Le code et les concepts du framework de base sont rarement mis à jour

Outils

Les outils aideront les efforts de développement, mais ne fait pas partie du projet. Les outils incluent des systèmes de construction, des compilateurs, des transpilateurs, des séparateurs de code, des compresseurs d'images, des mécanismes de déploiement, etc.

Les outils facilitent le processus de développement. Par exemple, de nombreux codeurs préfèrent Sass au CSS car il offre la séparation du code, l'imbrication, les variables de temps de rendu, les boucles et les fonctions. Les navigateurs ne comprennent pas la syntaxe Sass/SCSS, le code doit donc être compilé en CSS à l'aide des outils appropriés avant le test et le déploiement.

La différence entre les bibliothèques, les frameworks et les outils

La différence entre les bibliothèques, les frameworks et les outils est très faible. Un framework peut inclure une bibliothèque de classes, et la bibliothèque de classes peut implémenter des méthodes similaires au framework. Tout outil du projet est essentiel. Il n’est donc pas nécessaire de faire une distinction claire entre les bibliothèques, les frameworks et les outils.

Frameworks et bibliothèques JavaScript

Voici les classements par ordre de popularité :

jQuery

Avec la sortie de WordPress, ASP.NET et de quelques autres frameworks, jQuery reste la bibliothèque JavaScript la plus couramment utilisée. Il a révolutionné le développement côté client en introduisant des sélecteurs CSS dans la récupération et le chaînage des nœuds DOM pour appliquer des gestionnaires d'événements, des animations et des appels Ajax.

jQuery a gagné en popularité ces dernières années et reste un bon choix pour les projets qui nécessitent une petite quantité de fonctionnalités JavaScript.

Avantages :

• Petite échelle de distribution

• Courbe d'apprentissage lente, aide en ligne riche

• Syntaxe concise

• Facile à développer

Inconvénients :

• Ajout d'une surcharge de vitesse à l'API native

• La compatibilité du navigateur est mauvaise, mais a été améliorée

• Utilisation plate

• Certaines industries s'opposent à l'utilisation de

Lodash et Underscore

Lodash et Underscore sont abordés ensemble dans cette section. Ils fournissent des centaines d'utilitaires JavaScript fonctionnels pour compléter les méthodes natives de chaînes, de nombres, de tableaux et d'autres méthodes d'objets primitifs. Bien qu'il existe un certain chevauchement entre les deux bibliothèques, il est peu probable que les deux soient utilisées dans le même projet.

Bien que le taux d'utilisation de ces deux bibliothèques de classes soit très faible côté client, ces deux bibliothèques de classes peuvent être utilisées dans les applications Node.js côté serveur.

Avantages :

• Petit et simple

• Bonne documentation facile à apprendre

• Compatible avec la plupart des bibliothèques et frameworks

• N'étend pas les objets intégrés

• Peut être utilisé sur le client ou serveur Inconvénients de l'utilisation de

 :

• Certaines méthodes ne sont disponibles que dans ES2015 et les versions supérieures de JavaScript.

AngularJS 1.x

Angular est la première de la liste des classes de framework (ou framework d'application MVC) individuel. La version angulaire la plus populaire est actuellement la 1.x, qui étend le HTML avec une liaison de données bidirectionnelle tout en découplant les opérations DOM et la logique de l'application.

Bien que la version 2 (maintenant la version 4 !) soit sortie, Angular 1.x est toujours en développement.

Avantages :

• Framework populaire utilisé par certaines grandes entreprises

• pour développer le Web moderne applications La solution du programme

• fait partie de la pile standard MEAN (MongoDB, Express.JS, AngularJS, NodeJS) et de nombreux articles et tutoriels sont disponibles

Inconvénients :

• Courbe d'apprentissage abrupte

• Grande base de code

• Impossible de passer à Angular 2.x

Angular 2.x (maintenant Angular 4.x)

Angular 2.0 est sorti en septembre 2016. Il s'agit d'une réécriture complète qui introduit un modèle modulaire basé sur des composants créé à l'aide de TypeScript. Angular 4.0 est sorti en mars 2017.

Angular 2.x est complètement différent de la v1 et n'est pas compatible avec les autres versions - peut-être que Google devrait donner un nom différent au projet !

Avantages :

• La solution pour développer des applications Web modernes

• est la pile MEAN standard Pour les développeurs familiers avec les langages typés statiquement tels que C# et Java, TypeScript offre plusieurs avantages.

• Inconvénients :

Courbe d'apprentissage abrupte

• Bibliothèque de codes volumineux

• Ne peut pas être mis à niveau depuis Angular 1.x

• Angular 2.x est plus difficile à comprendre que 1.x

• Si vous rencontrez des problèmes pendant le processus d'apprentissage ou si vous souhaitez obtenir des ressources d'apprentissage, vous êtes invités à rejoindre le groupe d'échange d'apprentissage
343599877, apprenons ensemble le front-end !

• 
  
  React

React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur, et elle était également la plus populaire l'année dernière Bibliothèque de classe. Il se concentre sur la partie "View" du développement Model-View-Controller (MVC), en l'utilisant, vous pouvez facilement créer des composants d'interface utilisateur préservant l'état. C'est l'une des bibliothèques de classes préférées pour implémenter le DOM virtuel. Sa structure de mémoire permet de calculer efficacement les différences et les mises à jour des pages sont plus efficaces.

Petit, efficace, rapide et flexible

• Modèle de composant simple

• Bonne documentation et ressources en ligne

• Rendu côté serveur possible

• Actuellement populaire et connu une croissance rapide

• Inconvénients :

Besoin d'apprendre de nouveaux concepts et une nouvelle syntaxe

• Les outils de construction sont très importants

• Besoin d'autres bibliothèques de classes ou frameworks pour fournir des pièces de modèle et de contrôleur

• Code qui modifie le DOM et d'autres incompatibilités de bibliothèques

• En savoir plus sur React à la manière ES6

Vue.js

Vue.js est un framework progressif léger pour créer des interfaces utilisateur. Il fournit une couche de vue virtuelle basée sur le DOM de type React qui peut être intégrée à d'autres bibliothèques de classes pour créer de puissantes applications d'une seule page. Le framework a été créé par Evan You, qui avait déjà travaillé sur AngularJS et extrait ses parties préférées d'AngularJS.

Vue.js utilise la syntaxe du modèle HTML pour lier le DOM aux données d'instance. Les modèles sont de purs objets JavaScript qui mettent à jour les vues lorsque les données changent.

Avantages :

• Rapide à utiliser et de plus en plus populaire

• Facile à améliorer à un niveau élevé niveau Satisfaction des développeurs

• Faibles dépendances, bonnes performances

Inconvénients :

• Un projet plus récent – ​​le risque peut être plus grand

• Dépend en partie des développeurs pour les mises à jour

• Par rapport à d'autres Framework, moins de ressources

Backbone.js

Backbone.js est un MVC commun qui fournit des frameworks côté serveur L'un des premiers frameworks côté client options pour les structures. Sa seule dépendance est Underscore.js.

Backbone.js prétend être une bibliothèque car elle peut être intégrée à d'autres projets, mais je pense que la plupart des développeurs le considèrent comme un framework.

Avantages :

• Petite taille, poids léger, faible complexité

• Aucun HTML ajouté Logique

• File Rich

• Utilisé par de nombreuses applications, dont Trello, WordPress.com, LinkedIn et Groupon

Inconvénients :

• Moins d'abstraction par rapport à d'autres frameworks tels que AngularJS

• Nécessite des composants supplémentaires pour implémenter des fonctions tels que la liaison de données

• Le dernier framework n'utilise plus l'architecture MVC

Ember.js

Ember.js est l'un des frameworks basés sur le modèle Model-View-ViewModel (MVVM). Il implémente des modèles, des liaisons de données et des bibliothèques de classes dans un seul package.

Avantages :

• Fournit une solution unique pour les applications clientes

• Les développeurs améliorent instantanément l'efficacité du développement – il utilise jQuery

• Bonnes options de compatibilité descendante et de mise à niveau

• Adopte les normes de développement Web modernes

Inconvénients :

• Grand type distribué

• Par rapport aux autres Par rapport au cadre de développement de la structure des widgets, c'est très énorme

• La courbe d'apprentissage est raide

Knockout.js

Knockout.js est l'un des premiers frameworks MVVM, qui garantit que l'interface utilisateur reste synchronisée avec les données sous-jacentes, avec des modèles et un suivi des dépendances.

Avantages :

• Petit et léger, aucune dépendance

• Excellente prise en charge du navigateur, peut prendre en charge IE6

• Bonnes ressources de documentation

Inconvénients :

• Projets plus importants peut devenir complexe

• Le développement a ralenti

• L'utilisation semble diminuer

Plus de frameworks et bibliothèques

Les projets suivants ne sont pas particulièrement populaires, mais méritent d'être pris en compte :

• Polymer – prise en charge multi-navigateurs de la bibliothèque de classes HTML5 pour les composants Web

• Meteor – une plateforme full-stack pour les applications Web

• Aurelia – un framework multiplateforme léger et relativement nouveau

• Svelte – un nouveau projet qui convertit le code source du framework en JavaScript propre

• Conditioner.js – une bibliothèque de classes qui charge et décharge automatiquement les modules en fonction de l'état

Outils : effectuez des tâches courantes

Créez des outils pour effectuer automatiquement diverses tâches de développement Web, telles que le prétraitement, la compilation, l'optimisation des images, le code minifié, l'analyse du code, l'exécution de tests, etc. Les tâches peuvent être gérées uniformément dans un package exécutable.

Les outils les plus populaires actuellement sont les suivants :

Gulp.js

Bien que Gulp ne soit pas la première exécution de tâche outil, il est rapidement devenu le plus populaire. À l'aide d'un code JavaScript facile à lire, Gulp charge les fichiers sources dans des flux et gère les données via divers plugins avant de les afficher dans le dossier de construction. Vérifier Gulp.js avant toute autre option est facile, rapide et amusant.

NPM

npm est un gestionnaire de packages Node.js, mais ses outils de script peuvent être utilisés pour exécuter des tâches courantes. C'est un excellent choix pour les projets simples avec quelques dépendances. Cependant, cela pourrait devenir moins applicable à des tâches plus complexes.

Grunt

Grunt a été l'un des premiers outils d'exécution de tâches JavaScript adoptés en masse, mais a souffert de la vitesse et de la configuration JSON complexe. Mais il a conduit à la montée de Gulp. Maintenant que ces problèmes ont été résolus, Grunt reste un choix populaire.

Outils : Liaison de modules

Gérer plusieurs fichiers JavaScript est devenu une tâche fastidieuse. Par défaut, les fichiers du navigateur ne sont pas compilés, leurs dépendances doivent donc être chargées ou connectées dans l'ordre approprié. Bien qu'il existe des options telles que les modules ES6 et CommonJS, la prise en charge du navigateur est limitée, la liaison de module devient donc importante.

WebPack

Webpack prend en charge toutes les options de modules populaires et est devenu synonyme de développement React. Bien que Webpack prétende être un regroupeur de modules, il peut déjà être utilisé comme exécuteur de tâches universel.

Browserify

Browserify prend en charge les modules CommonJS utilisés par Node.js, il compile tous les modules dans un seul fichier compatible avec le navigateur.

RequireJS

RequireJS est un chargeur de module intégré au navigateur qui peut également être utilisé dans Node.js.

Outils : Analyse du code

Les outils d'analyse du code sont utilisés pour analyser le code à la recherche d'erreurs potentielles ou d'écarts par rapport aux normes de syntaxe. Une parenthèse non fermée ou une variable non déclarée sera toujours détectée.

ESLint

ESLint est un outil d'analyse de code enfichable. Chaque règle est un plugin et peut donc être configurée selon vos préférences personnelles.

JSHint

JSHint est un outil d'analyse de code JavaScript flexible qui équilibre les erreurs réelles avec l'ancienne syntaxe.

JSLint

JSLint est l'un des premiers outils d'analyse de code et implémente un ensemble strict de règles par défaut.

Outils : tests unitaires

La tâche de développement piloté par les tests nécessite d'écrire du code pour tester votre propre code. Il existe de nombreuses options, notamment Ava, Tape et Jest, mais les trois outils les plus populaires actuellement sont :

Mocha

Mocha est un framework de test JavaScript qui peut exécuter des tests dans Node.js ou dans le navigateur. Il prend en charge les tests asynchrones et est souvent utilisé avec Chai, ce qui permet d'exprimer le code de test de manière lisible.

Jasmine

Jasmine est un outil de test basé sur le comportement qui peut tester automatiquement l'interface utilisateur et les interactions dans le navigateur.

QUnit

QUnit est un framework de tests unitaires qui peut vérifier les résultats des fonctions lorsque des paramètres spécifiques sont saisis. Il rapporte également les résultats des tests pour garantir qu'aucune branche de code spécifique n'est oubliée.

Résumé et suggestions

Le framework le plus rationalisé à l'heure actuelle est React, et d'autres frameworks évoluent également vers les tendances populaires.

Si vous avez besoin d'une application Web sécurisée et polyvalente, pensez à utiliser Vue.js.

Les frameworks monolithiques ne sont plus populaires. Si vous avez besoin d'une gestion structurelle stricte d'un projet plus vaste, AngularJS est un bon choix. Actuellement, la plupart des gens s'en tiennent à Angular 1.0, mais à long terme, si vous souhaitez apprendre TypeScript, Angular 4.x est un meilleur choix.

Bien que jQuery ne soit pas très populaire actuellement et soit rarement mentionné dans l'actualité technologique, il est indéniable qu'il est activement développé et constitue un outil puissant pour les sites Web et les applications. jQuery a une courbe d'apprentissage douce et est bien compris par de nombreux développeurs du monde entier.

Si vous vous sentez aventureux, essayez Svelte, un framework client/serveur intéressant qui pré-rend JavaScript au moment de la construction et pourrait changer notre façon de développer.

La sélection des outils varie selon le projet. Bien que la plupart des développeurs utilisent actuellement Gulp, WebPack devient de plus en plus populaire. Dans le même temps, vous ne pouvez pas manquer les outils de test tels que ESLint et Mocha.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!