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

jQuery
类型	类库
网站	jquery.com
知识库	github.com/jquery/jquery
当前版本	3.2.1
开发人员	jQuery团队
发布日期	2006年8月
大小	最小30kb
用途	通用
使用度	72.4％的网站

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
类型	类库
网站	lodash.com/
知识库	github.com/lodash/lodash/
当前版本	4.17.4
开发人员	John-David Dalton
发布日期	2012年4月
大小	最小4kb – 24kb
用途	通用
使用度	低
Underscore
类型	类库
网站	underscorejs.org/
知识库	github.com/jashkenas/underscore
当前版本	1.8.3
开发人员	Jeremy Ashkenas
发布日期	2009年10月
大小	最小6kb
用途	通用
使用度	低

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

AngularJS
类型	框架
网站	angularjs.org
知识库	github.com/angular/angular.js
当前版本	1.6.4
开发人员	Google
发布日期	2010年10月
大小	144KB
用途	单页应用程序
使用度	低

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
类型	框架
网站	angular.io
知识库	github.com/angular/angular.js
当前版本	4.1
开发人员	Google
发布日期	2016年9月
大小	最小450kb
用途	单页面应用
使用度	低

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

Les statistiques montrent que l'utilisation de React semble faible car il est utilisé dans des applications plutôt que dans des sites Web.

React
类型	框架
网站	facebook.github.io/react/
知识库	github.com/facebook/react
当前版本	15.5.4
开发人员	Facebook和贡献者
发布日期	2013年3月
大小	21kb分钟
用途	单页应用程序
使用度	低

Avantages :

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 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
类型	框架
网站	backbonejs.org
知识库	github.com/jashkenas/backbone/
当前版本	1.3.3
开发人员	Jeremy Ashkenas
发布日期	2010年10月
大小	最小8kb
用途	单页面应用
使用度	低

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
类型	框架
网站	emberjs.com
知识库	github.com/emberjs/ember.js
当前版本	2.15.0
开发人员	Ember team
发布日期	2011年12月
大小	最小95kb
用途	单页面应用
使用度	低

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
类型	框架
网站	knockoutjs.com
知识库	github.com/knockout/knockout
当前版本	3.4.2
开发人员	Steve Sanderson
发布日期	2010年7月
大小	最小59kb
用途	单页面应用
使用度	低

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

Gulp.js
网站	gulpjs.com
知识库	github.com/gulpjs/gulp
当前版本	3.9.1
每月下载	300万

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
网站	npmjs.com
知识库	github.com/npm/npm
当前版本	4.5.0
每月下载	300万

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
网站	gruntjs.com
知识库	github.com/gruntjs/grunt
当前版本	1.0.1
每月下载	200万

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
网站	webpack.js.org
知识库	github.com/webpack/webpack
当前版本	2.5.1
每月下载	600万

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
网站	browserify.org
知识库	github.com/substack/node-browserify
当前版本	14.3.0
每月下载	260万

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
网站	requirejs.org
知识库	github.com/jrburke/r.js
当前版本	2.3.3
每月下载	百万

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
网站	eslint.org
知识库	github.com/eslint/eslint
当前版本	3.19.0
每月下载	600万

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
网站	jshint.com
知识库	github.com/jshint/jshint
当前版本	2.9.4
每月下载	200万

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

JSLint

JSLint
网站	jslint.com
知识库	github.com/reid/node-jslint
当前版本	0.10.3
每月下载	50000

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
网站	mochajs.org
知识库	github.com/mochajs/mocha
当前版本	3.3.0
每月下载	500万

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
网站	jasmine.github.io
知识库	github.com/jasmine/jasmine-npm
当前版本	2.6.0
每月下载	200万

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
网站
知识库	github.com/kof/node-qunit
当前版本	1.0.0
每月下载	25000

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!