Meilleurs frameworks, bibliothèques et outils JavaScript à utiliser en 2019

Le nombre de frameworks, bibliothèques et outils JavaScript semble avoir dépassé le nombre de développeurs. Fin 2018, une recherche rapide sur Github a montré 2,3 millions de projets JavaScript. Le NPM est devenu le plus grand système de modules au monde, avec 700 000 packages logiciels disponibles sur NPMJS.com et des milliards de téléchargements par mois.

6 décembre 2018: L'article a été mis à jour pour refléter l'état actuel de l'écosystème JavaScript. La mise à jour de cette année est parrainée par Sencha. Merci de soutenir les partenaires qui ont rendu SITEPoint possible!

Cet article vise à expliquer les bases et les différences de base entre les frameworks, bibliothèques et outils JavaScript côté client les plus populaires. Qu'ils vous conviennent est une autre question. Choisissez-en un et respectez-le pendant un certain temps. Notez que quoi que vous choisissiez, votre option préférée sera remplacée par quelque chose de mieux!

li.toc-h3 { marge-gauche: 20px; } li.toc-h4 { marge-gauche: 40px; } Points clés

• React reste le premier choix pour la construction d'interfaces utilisateur, en particulier les applications à une seule page, grâce à son architecture Virtual DOM et composants efficace.
• vue.js a reçu des éloges pour sa simplicité et sa flexibilité, ce qui en fait un excellent choix pour les développeurs à la recherche de cadres progressifs qui sont faciles à intégrer avec d'autres bibliothèques.
• Angular fournit une solution de cadre complète, en particulier dans sa dernière version (2), qui est fortement soutenue par Google et se concentre sur TypeScript, qui attire les développeurs familiers avec les langages dactylographiques statiquement.
• jQuery, malgré la baisse du battage médiatique, est toujours pertinent et largement utilisé dans de nombreux projets car il est facile à utiliser et a une compatibilité approfondie sur une variété de plateformes Web.
• WebPack et Eslint sont soulignés comme des outils essentiels dans le développement moderne de JavaScript, utilisé pour le regroupement des modules et l'assurance de la qualité du code, respectivement.
• Sencha ext js est considérée comme un puissant cadre de niveau d'entreprise qui fournit une large gamme de composants et d'outils d'interface utilisateur, avec de puissantes options de support commercial et de formation.

Catalogue

• Catalogue
• termes difficiles
• bibliothèque
• cadre
• outils
• Ne m'étiquetez pas!
• frameworks et bibliothèques javascript
• jQuery
• react
• angularjs 1.x
• Angular 2 (maintenant 7.x)
• vue.js
• Sencha ext js
• lodash et souligner
• dynamique.js
• Ember.js
• knockout.js
• projets qui méritent d'être prêts à prêter attention à
• Outil: Runner de tâche générale
• webpack
• gulp.js
• npm
• grogn
• outil: module bundler
• Browserify
• requirejs
• outil: vérification du style de code
• eslint
• jshint
• jslint
• Outil: Test Suite
• Jest
• moka
• jasmin
• Outils: Autres outils
• Résumé et suggestions
• Commentaires

Veuillez accepter les termes et conditions suivants avant de lire cet article! ...

• L'environnement JavaScript change chaque jour. Cet article sera dépassé au moment où il sera publié!
• par "meilleur", je veux dire "le projet général le plus populaire / utilisé / hycunt". Tous les projets ont des options gratuites / open source, mais la liste peut ne pas contenir vos projets préférés.
• Les éléments arrêtés (comme YUI) ne sont pas inclus, même s'ils sont toujours très élevés sur le réseau.
• se référer uniquement aux projets clients. Certains fonctionnent du côté du serveur, mais la liste n'inclut pas les frameworks côté serveur purs tels que Express.js ou HAPI.
Les informations sur chaque projet sont destinées à être brèves afin de donner un aperçu des recherches supplémentaires.
Chaque projet fournit un indicateur de popularité d'utilisation, mais les statistiques sont bien connues pour être difficiles à régler et peuvent être trompeuses.
Je suis biaisé. Vous avez aussi un parti pris. D'autres ont aussi des préjugés! Je n'ai pas essayé tous les outils ici et je déclarerai mon outil préféré, mais vous devriez faire votre propre évaluation en fonction de vos besoins.
SitePoint et moi ne sommes ni responsables des décisions désastreuses que vous prenez!

termes difficiles

Les termes "framework", "bibliothèque" et "outil" peuvent avoir des significations différentes pour différentes personnes à différents moments, selon le contexte. Définition commune utilisée ici:

bibliothèque

La bibliothèque

est une collection organisée et utile de fonctionnalités. Une bibliothèque typique peut inclure des fonctions qui gèrent les chaînes, les dates, les éléments HTML DOM, les événements, les cookies, les animations, les demandes de réseau, etc. Chaque fonction renvoie les valeurs à l'application d'appel, que vous pouvez implémenter en fonction de votre choix. Considérez-le comme une série de composants automobiles: vous pouvez utiliser n'importe quel composant à volonté pour aider à construire une voiture qui peut conduire correctement, mais vous devez construire le moteur vous-même.

Les bibliothèques

fournissent généralement des niveaux d'abstraction plus élevés, simplifiant ainsi les détails de mise en œuvre et les incohérences. Par exemple, vous pouvez implémenter AJAX à l'aide de l'API XMLHTTPRequest, mais cela nécessite plusieurs lignes de code et il existe de légères différences entre les navigateurs. La bibliothèque peut fournir des fonctions AJAX () plus simples, vous pouvez donc vous concentrer sur des niveaux plus élevés de logique métier.

La bibliothèque

peut réduire le temps de développement de 20% car vous n'avez pas à vous soucier des détails plus fins. Inconvénients:

Les erreurs dans la bibliothèque peuvent être difficiles à trouver et à corriger
L'équipe de développement ne peut garantir que le correctif sera publié rapidement
Les correctifs peuvent modifier l'API et provoquer des modifications significatives du code.

cadre

Framework est le squelette de l'application. Il vous oblige à gérer la conception du logiciel d'une manière spécifique et à insérer votre propre logique à certains points. Vous allez généralement fournir des fonctions telles que les événements, le stockage et la liaison des données. En utilisant l'analogie de la voiture, le cadre fournit un châssis, un corps et un moteur en activité. Vous pouvez ajouter, retirer ou régler certains composants, à condition que le véhicule soit toujours en cours d'exécution.

Les frameworks

offrent généralement des niveaux d'abstraction plus élevés que les bibliothèques et peuvent vous aider à construire rapidement les 80% de votre projet. Inconvénients:

• Si votre application est hors de portée pour le cadre, les 20 derniers% peuvent être difficiles - sinon impossible
• La mise à jour ou la migration du cadre peuvent être difficiles
• Le code et les concepts du cadre de base s'adaptent rarement bien à l'époque. Les développeurs trouveront toujours une meilleure façon de faire la même chose.
outils

Les outils

peuvent aider au développement, mais ne font pas partie indispensable du projet. Les outils incluent des systèmes de construction, des compilateurs, des traducteurs, des compresseurs de code, des compresseurs d'images, des mécanismes de déploiement, etc.

Les outils

devraient fournir un processus de développement plus simple. Par exemple, de nombreux programmeurs préfèrent SASS à CSS car il fournit une séparation de code, une nidification, des variables de temps, des boucles et des fonctions. Le navigateur ne comprend pas la syntaxe SASS / SCSS, donc le code doit être compilé en CSS à l'aide des outils appropriés avant le test et le déploiement.

Ne m'étiquetez pas!

Les différences entre les bibliothèques, les cadres et les outils sont rarement claires. Le cadre peut contenir des bibliothèques. La bibliothèque peut implémenter des méthodes de type Framework. Les outils peuvent être cruciaux pour les deux. J'ai essayé de marquer chaque élément, mais la portée peut varier.

Si cela semble trop compliqué, vous pourriez envisager d'écrire JavaScript natif. C'est génial, mais vous finissez par écrire votre propre bibliothèque et / ou un code de framework qui doit être maintenu. JavaScript lui-même est une abstraction au-dessus du navigateur et de l'abstraction du système d'exploitation!

frameworks et bibliothèques javascript

Éléments disposés par ordre d'utilisation / popularité approximatif ...

jQuery

jQuery Description Type Library Site Web jQuery.com Repository github. Com / jQuery / jQuery Github Stars 50 000 Version actuelle 3.3.1 Développeur JQuery Team Release Date août 2006 Taille typique 30Kb min Utilisation typique Utilisation universelle 73,5% de tous les sites Web JQuery reste la bibliothèque JavaScript la plus utilisée jamais, et distribuée avec WordPress, ASP .NET et quelques autres cadres. Il révolutionne le développement des clients en introduisant les sélecteurs CSS dans la récupération du nœud DOM et en liant pour appliquer des gestionnaires d'événements, des animations et des appels AJAX. Ces dernières années, JQuery est progressivement devenu impopulaire auprès des développeurs, mais son taux d'utilisation est toujours élevé. Il s'agit toujours d'une option viable pour les projets qui nécessitent une petite quantité de fonctionnalités JavaScript.

pros:

Taille de la distribution

• La courbe d'apprentissage est fluide, et il y a beaucoup d'aide en ligne
• grammaire simple
• Facile à développer
Inconvénients:

• Ajouter des frais généraux de vitesse pour l'API native
• Maintenant, la compatibilité du navigateur s'est améliorée, il n'est donc pas très important
• Le taux d'utilisation a tendance à stabiliser
• Une certaine résistance de l'industrie à une utilisation inutile.

react

react Description Type Library Site Web Facebook.github.io/ React / Repository github.com/facebook/react github stars 115 000 Version actuelle 16.6.3 Développeur Facebook et contributeur Date de sortie mars 2013 Taille typique 21KB Min Utilisation typique Application Page Low Utilisation probablement discutée au cours des dernières années les plus nombreuses bibliothèques, React prétend être une bibliothèque JavaScript pour créer des interfaces utilisateur. Il se concentre sur la section "View" dans le développement de Model-View-Controller (MVC) et facilite la création de composants d'interface utilisateur préservés dans l'État. Il s'agit de l'une des premières bibliothèques à implémenter DOM virtuel;

L'utilisation de la réaction semble être faible en statistiques, probablement parce qu'elle est utilisée pour les applications plutôt que pour les sites Web. Près de 70% des développeurs affirment avoir une certaine expérience de la bibliothèque.

pros:

• petit, efficace, rapide et flexible
• modèle de composant simple
• bonne documentation et ressources en ligne
• Le rendu côté serveur est possible
• toujours très populaire et se développe rapidement
• de nombreuses annonces de travail réagissent les développeurs

Inconvénients:

• Les nouveaux concepts et la grammaire doivent être appris
• Les outils de construction sont essentiels
• D'autres bibliothèques ou cadres peuvent être nécessaires pour fournir des aspects de modèle et de contrôleur
• peut être incompatible avec le code et d'autres bibliothèques qui modifient Dom

angularjs 1.x

Angularjs Description Type Framework Site Web Site Web AngularJs.org Github Repository . . La version la plus populaire est toujours la version 1.x, qui étend le HTML via la liaison bidirectionnelle des données tout en séparant les opérations DOM de la logique d'application. Même si la version 2.0 est publiée (maintenant version 4.0!), Angular 1.x est toujours en cours de développement. Perplexe? Voir ci-dessous ...

pros:

un cadre populaire adopté par plusieurs grandes entreprises
Solution unique pour créer des applications Web modernes
fait partie de la pile moyenne "standard" (MongoDB, express.js, angularjs, nodejs), il existe donc de nombreux articles et tutoriels disponibles

Inconvénients:

• La courbe d'apprentissage est plus raide que les autres alternatives
• La base de code est énorme
• ne peut pas passer à Angular 2.x
• Bien qu'il s'agisse d'un projet Google, Google ne semble pas l'utiliser?

Angular 2 (maintenant 7.x)

Angular Description Type Framework Site Web site Web Angular.io Repository github . Il s'agit d'une réécriture complète qui introduit un modèle de composant modulaire créé à l'aide de TypeScript (compilé en JavaScript). Pour accroître la confusion, la version 4.0 est publiée en mars 2017 (sauté V3 pour éviter les problèmes de version sémantique).

Angular 2 est complètement différent de V1. Ni compatible - peut-être que Google devrait donner au projet un nom différent? !

pros:

• Solution unique pour créer des applications Web modernes
• fait toujours partie de la pile moyenne, bien que moins de tutoriels Angular 2 soient disponibles
• Pour ceux qui connaissent les langages typés statiquement tels que C # et Java, TypeScript offre certains avantages.

Inconvénients:

• La courbe d'apprentissage est plus raide que les autres alternatives
• La base de code est énorme
• Impossible de passer à partir de 1.x Angular
• par rapport à 1.x, le taux d'adoption angulaire 2.x est relativement faible
• Bien qu'il s'agisse d'un projet Google, Google ne semble pas l'utiliser?

vue.js

vue.js Description Type Framework Site Web Vuejs.org Repository github.com/vuejs/vue Github Stars 120 000 Version actuelle 2.5.17 Développeur Evan You Date de sortie février 2014 Taille typique 19KB Min Composants à objectif typique et application à page Une seule utilisation Vue.js Léger progressive, le cadre pour la création d'interface utilisateur. Le noyau fournit une couche de vue virtuelle virtuelle de type DOM qui peut être intégrée à d'autres bibliothèques, mais il est également capable de conduire des applications à page unique. Le cadre a été créé par Evan You, qui avait auparavant travaillé chez AngularJS mais voulait extraire les parties qu'il aimait.

vue.js lie Dom aux données d'instance à l'aide de la syntaxe du modèle HTML. Lorsque les données changent, le modèle est un objet JavaScript normal qui met à jour la vue. D'autres outils fournissent des outils pour l'échafaudage, le routage, la gestion du statut, l'animation, etc.

pros:

• Adoption rapide et popularité croissante
• Facile à démarrer, Satisfaction élevée du développeur
• léger, faible dépendance, bonnes performances

Inconvénients:

• peut être couvert par React
• Reliance aux mises à jour pour les développeurs individuels
• moins de ressources que les alternatives

Sencha ext js

ext js Description Framework de type et site Web de bibliothèque de composants Sencha. / Extjs / Version actuelle 6.6.0 Développeur Sencha Date de sortie Date décembre 2007 Taille typique dépend des exigences: 85 - 500KB Les composants d'utilisation typiques et les applications à page unique USAGE EXT JS sont développées à partir de YUI-EXT, l'une des plus longues histoires de cette liste. Bien qu'il soit surtout connu pour sa large gamme de composants d'interface utilisateur transversaux configurables et accessibles et d'outils de visualisation des données, EXT JS fournit également un cadre pour créer des applications complètes. Alternativement, vous pouvez utiliser la bibliothèque de composants avec React ou Angular. ext js est le seul cadre ici qui offre une formation commerciale et un soutien. Il existe également une option pour que l'équipe Sencha aide à consulter votre code, à automatiser les tests et à migrer vers d'autres plateformes.

pros:

Composants largement disponibles
contient tout ce dont vous avez besoin pour créer une application Web et mobile
Personnalisation du script, outils de conception et prototypage rapide
Fournir des outils pour construire et styliser intuitivement les applications Web
Assistance commerciale et excellente documentation
Essai gratuit de 30 jours et version communautaire pour petites applications (revenus inférieurs à 10 000 $ par an)

Inconvénients:

À l'heure actuelle, l'intégration avec des cadres autres que React et Angular peut être peu pratique - voir le plan de la feuille de route d'EXT JS 7
Les modifications de l'UI personnalisées profondes peuvent être difficiles

lodash et souligner

Lodash Description Type Library Site Web Lodash.com/ Repository github .com / Lodash / Lodash / Github Stars 35 000 Version actuelle 4.17.11 Développeur John-David Dalton Date de sortie Avril 2012 Taille typique 4KB - 24KB MIN Utilisation typique Utilisation commune Bas usage traitant Description Type de la bibliothèque du site Web de bibliothèque sous-ore Date de sortie octobre 2009 Taille typique 6KB min Utilisation typique Utilisation commune à faible utilisation Cette section combine Lodash et souligner car ils fournissent des centaines d'utilitaires JavaScript fonctionnels pour compléter les caractères natifs, les nombres, les tableaux et autres méthodes d'objets brutes. Il y a un certain chevauchement, il est donc peu probable que vous ayez besoin des deux bibliothèques dans un seul projet. L'utilisation du client est faible, mais l'une ou l'autre bibliothèque peut être utilisée dans les applications Node.js côté serveur.

pros:

petit et simple
Facile à apprendre, bonne documentation
Compatible avec la plupart des bibliothèques et des frameworks
NE PAS étendre les objets intégrés
peut être utilisé du côté client ou du serveur

Inconvénients:

• Certaines méthodes sont fournies dans ES2015 et plus tard JavaScript.

dynamique.js

Backbone.js Description Type Framework Site Web Backbonejs.org Repository github.com/jashkenas/backbone/ github stars 37 000 Version actuelle 1.3.3 Développeur Jeremy Ashkenas Date de sortie octobre 2010 Taille typique 8KB Min Utilisation de l'application unique à faible page Backbone. Options du client pour la structure MVC. Sa seule dépendance est soulignement.js, qui est créée par le même développeur.

Backbone.js prétend être une bibliothèque car il peut être intégré à d'autres projets. Je soupçonne que la plupart des développeurs pensent que c'est un cadre, bien qu'il ne soit pas aussi arbitraire que d'autres.

pros:

• petit, léger et pas trop compliqué
• N'ajoutez pas de logique à HTML
• Excellente documentation
• a été adopté par de nombreuses applications, notamment Trello, WordPress.com, LinkedIn et Groupon

Inconvénients:

• un niveau d'abstraction inférieur à celui des alternatives comme les angularjs (mais cela peut être considéré comme un avantage)
• D'autres composants sont nécessaires pour implémenter des fonctions telles que la liaison des données
• Les cadres récents ont été loin de l'architecture MVC

Ember.js

Ember.js Description Type Framework Site Web Emberjs.com Repository github.com/emberjs/ember.js GitHub Stars 20 000 Version 3.6.0 Développeur Ember Ember Team Date de sortie décembre 2011 Taille typique 95KB Min Utilisation typique Application à page Single Low Usage Ember.js est basé sur Model-View-View One of the Cadres arbitraires plus grands du modèle du modèle (MVVM). Il implémente les modèles, les liaisons de données et les bibliothèques dans un seul package. Pour ceux qui ont de l'expérience avec Ruby on Rails, le concept de convention sur la configuration est immédiatement familier.

pros:

• Fournir une seule solution pour les applications client
• Les développeurs peuvent augmenter la productivité immédiatement - il utilise jQuery
• Bonne option de compatibilité et de mise à niveau vers l'arrière
• utilisé les normes de développement Web modernes

Inconvénients:

• Distribuer des fichiers volumineux
• Il est considéré comme monolithique par rapport à d'autres cadres qui se déplacent vers des structures de composants plus petites
• Courbe d'apprentissage abrupte - C'est la voie d'Ember, ou il n'y a aucun moyen du tout

knockout.js

knockout.js Description Type Framework Site Web knockoutjs.com Référentiel github.com/knockout/knockout github étoiles 9 000 version 3.5.0 actuelle du développeur Steve Sanderson Date de sortie juillet 2010 Taille typique 59KB Min Utilisation typique Application unique à faible utilisation knockout.js est l'un des anciens frameworks MVVM, il utilise des observateurs pour s'assurer que L'interface utilisateur reste synchronisée avec les données sous-jacentes. Il a des modèles et des capacités de suivi de dépendance.

pros:

• petit et léger, pas de dépendances
• Excellent support du navigateur, traçable à IE6
• Excellente documentation

Inconvénients:

• Les grands projets peuvent devenir compliqués
• La vitesse de développement ralentit
• L'utilisation semble diminuer

projets qui méritent d'être prêts à prêter attention à

Vous espérez en savoir plus? Les éléments suivants ne sont pas très populaires, mais méritent d'être considérés:

• Polymer - Une bibliothèque qui permet la prise en charge de Cross-Browser pour les composants Web HTML5
• Meteor - une plate-forme de pile complète pour les applications Web.
• Aurelia - Un cadre léger et multiplateforme
• svelte - Un projet assez nouveau qui convertit le code source du framework en javascript natif
• conditionner.js - Une nouvelle bibliothèque qui charge automatiquement et décharge automatiquement les modules en fonction de leur statut.

Outil: Runner de tâche générale

Les outils de construction automatisent diverses tâches de développement Web telles que le prétraitement, la compilation, le regroupement des modules, l'optimisation d'image, la compression de code, la vérification du style de code et l'exécution des tests. Les tâches sont généralement gérées ensemble dans un package exécutable. Les options les plus populaires:

webpack

webpack Description site Web webpack.js.org github. com / webpack / webpack github stars 45 000 version actuelle 4.25.1 4 millions de téléchargements par semaine WebPack prend en charge toutes les options de module populaires et est devenu synonyme de développement de réact. Bien qu'il prétend être un bundler de module, WebPack peut être utilisé comme coureur de tâche à usage général. Les configurations basées sur des objets JavaScript peuvent être un peu maladroites. Le générateur est disponible, mais certains utilisateurs de WebPack ont ​​déménagé à la parcelle pour une configuration plus facile et des temps de compilation plus rapides.

gulp.js

gulp.js Description site Web gulpjs.com Répositoire github. com / gulpjs / gulp github stars 30 000 version actuelle 4.0.0 (3.9.1 est toujours actif) 750 000 téléchargements hebdomadaires Bien que ce ne soit pas le premier coureur de tâche, Gulp est rapidement devenu l'un des coureurs de tâches les plus populaires, ce qui est également mon préféré préféré . Gulp utilise un code JavaScript facile à lire qui charge le fichier source dans un flux, puis transmet les données via divers plugins avant de les diffuser dans le dossier de construction. C'est simple, rapide et amusant, mais les développeurs ont déménagé sur WebPack.

npm

npm Description site Web NPMJS.com GitHub référentiel GitHub .com / npm / npm GitHub Stars 17 000 Version actuelle 6.4.1 Téléchargements hebdomadaires 1 million de npm sont le gestionnaire de package Node.js, mais ses outils de script sont disponibles pour les exécutions de tâches courantes. Il s'agit d'une option attrayante pour des projets simples avec moins de dépendances. Cependant, des tâches plus complexes peuvent rapidement devenir peu pratiques.

grogn

grunt Description site Web gruntjs.com github.com/ Gruntjs / Grunt Github Stars 17 000 téléchargements actuels de version 1.0.3 par semaine 425 000 Grunt a été l'un des premiers coureurs de tâches JavaScript à mettre en œuvre une adoption à grande échelle, mais sa vitesse et sa configuration JSON complexes ont conduit à la montée de Gulp. Le pire problème a été résolu et le grognement est toujours un choix populaire.

outil: module bundler

La gestion de plusieurs fichiers JavaScript peut devenir lourde. À moins que vous ne puissiez adopter nativement la syntaxe d'importation du module ES6 relativement nouveau, vous devez charger ou connecter des dépendances JavaScript dans le navigateur dans l'ordre approprié. Si vous devez prendre en charge les navigateurs plus anciens (tous les navigateurs publiés avant 2018), vous pouvez utiliser le bundler du module, mais la demande pour ces outils diminuera au fil du temps.

Browserify

Browserify Description Site Web Browserify.org Repository github.com/ Browserify / Browserify GitHub Stars 12 000 Version actuelle 16.2.3 Téléchargements par semaine 480 000 Browserify prend en charge le module CommonJS utilisé par Node.js, en compilant tous les modules dans un seul fichier compatible avec le navigateur.

requirejs

requirejs Description site Web requirejs.org Repository github.com/ requirejs / r.js GitHub Stars 2 500 Version actuelle 2.3.6 Téléchargements par semaine 230 000 requirejs était à l'origine un chargeur de module de navigateur, bien qu'il puisse également être utilisé dans Node.js. Il prend en charge la syntaxe AMD.

outil: vérification du style de code

Vérification du style de code Analyser votre code pour des erreurs ou des écarts potentiels par rapport aux normes grammaticales. Vous ne manquerez jamais le support proche ou la variable non déclaré!

eslint

eslint Description site Web Eslint.org Repository github.com/ Eslint / Eslint Github Stars 12 000 Version 5.9.0 Téléchargements 4 millions par semaine Eslint est l'outil de vérification du style de code le plus populaire, qui est pris en charge par la plupart des IDE, éditeurs, bundlers et coureurs de tâches. Chaque règle est un plugin, il peut donc être configuré en fonction de vos préférences.

jshint

jshint Description site Web jshint.com Repository github.com/ Jshint / jshint Github étoile 8 000 téléchargements actuels de la version 2.9.6 par semaine 390 000 Un vérificateur de style de code JavaScript flexible qui n'est pas aussi configurable qu'Eslint, mais établit un bon équilibre entre les bogues réels et les exigences de syntaxe rigides.

jslint

jslint Description site Web jslint.com Repository github.com/ Reid / Node-Jslint GitHub Stars 8 000 Version actuelle 0.12.0 Téléchargements par semaine L'un des premiers vérificateurs de style de code qui implémente un ensemble strict de règles par défaut. Le développement a ralenti et pour certains développeurs, il peut être un peu intransigeant.

Outil: Test Suite

Le développement axé sur le test vous oblige à écrire du code pour tester votre code avant de commencer à l'écrire. Bienvenue pour écrire du code pour tester votre code de test!

Il existe de nombreuses options, notamment Ava, Tape et Jasmine, mais les trois options les plus populaires sont ...

Jest

Jest Description Site Web https: // www .php.cn / link / 50be28d343081a44df25869ab1e4502f Repository github.com/kof/node-qunit github étoile 21 000 version actuelle 23.6.0 Téléchargements hebdomadaires 2 millions du cadre de test de Facebook en raison de sa connexion étroite avec React et WebPack et il est devenu de plus en plus populaire.

moka

Mocha Description site Web mochajs.org github.com/ Mochajs / Mocha Github Stars 16 500 Version actuelle 5.2.0 1,8 million de téléchargements par semaine Mocha peut effectuer des tests dans Node.js et navigateurs. Il prend en charge les tests asynchrones et est généralement utilisé avec Chai pour pouvoir exprimer le code de test dans un style lisible. C'est le choix le plus populaire depuis des années.

jasmin

jasmine Description site Web jasmine.github.io github. COM / JASMINE / JASMINE-NPM GitHub Stars 300 Version 3.3.0 Téléchargements actuels par semaine 750 000 Jasmine est une suite de tests axée sur le comportement qui automatise le test de votre interface utilisateur et des interactions dans votre navigateur.

Outils: Autres outils

Malgré mes meilleurs efforts, j'avoue que tout le monde n'aime pas JavaScript! Les compilateurs tels que TypeScript, Livescript et CoffeeScript peuvent rendre la vie de votre développement un peu plus agréable. Alternativement, envisagez d'utiliser Babel pour convertir le code source ES2015 concis et concis en code ES5 compatible entre les navigateurs croisés.

Il existe de nombreux moteurs de modèle HTML axés sur JavaScript, y compris la moustache, le guidon, le carlin (Jade) et les EJ. Je préfère les options légères qui préservent la syntaxe JavaScript, telles que les EJ et DOT.

Enfin, pourquoi rédiger votre propre documentation lorsque vous pouvez l'automatiser? Les générateurs de documents compatibles ES2015 incluent ESDOC, JSDOC, YUIDOC, Documentation.js et Transcription.

Résumé et suggestions

Si vous suivez la sagesse des masses, l'élan actuel est derrière React, et d'autres bibliothèques se déplacent également vers des directions technologiques similaires. Il s'agit d'un choix de carrière sûr, mais vous devriez également considérer Vue.js ou réagi-compatible mais un préact plus petit.

Les cadres monographiés ne sont plus populaires, mais AngularJS est toujours un choix populaire si vous avez besoin de fournir une structure stricte pour les grands projets. La plupart des développeurs s'en tiennent à la version 1.0, mais cela peut être par nécessité et pas le choix. La version 2 peut être une option plus sûre à long terme, mais vous devez apprendre TypeScript.

EXT JS de Sencha est une excellente option pour les entreprises (petites entreprises à l'entreprise) qui souhaitent avoir à la fois des cadres et des composants et des outils intégrés prédéfinis (y compris l'accès au support commercial). EXT JS intègre également facilement sa puissante bibliothèque de composants avec React and Angular, ce qui est un excellent choix pour les développeurs qui souhaitent implémenter des composants prédéfinis au lieu de les construire vous-même.

N'ignorez pas jQuery. Ce n'est pas élégant et rarement mentionné dans Tech News, mais il est sous le développement actif et est plus que suffisant pour les sites Web et les applications. La courbe d'apprentissage de JQuery est fluide et est comprise par de nombreux développeurs du monde entier.

Les nouvelles options de traductrices comme Svelte et RawACT convertiront le code Framework en JavaScript natif si vous souhaitez prendre des risques. Les dépendances du cadre ont été supprimées, le code est plus petit et il s'exécute plus rapidement.

Le choix des outils est moins important et peut varier selon le projet. La plupart des scripts WebPack, Gulp ou NPM. Pour les tests, vous pouvez utiliser Eslint et JEST, mais il existe de nombreuses autres alternatives à essayer.

c'est-à-dire que chaque projet, équipe et compétences est différent. Vous avez un temps limité à évaluer, il est donc tentant d'utiliser ce que vous savez. Ce message recevra des commentaires, recommandés frameworkx , mais lorsque vous avez un marteau, tout ressemble à un clou.

Enfin, n'oubliez jamais que les bibliothèques, les frameworks et les outils sont facultatifs! Le développement JavaScript a révolutionné au cours de la dernière décennie; nous avons évolué de plusieurs bibliothèques auxiliaires de base à des choix incroyables. Il est facile de tomber dans le piège de l'augmentation de la complexité ou de passer au dernier cadre populaire tous les quelques mois. Considérez toujours le JavaScript natif - en particulier dans les petits projets personnels. Les connaissances que vous gagnez ne seront pas dépassées et deviendront inestimables lors de l'évaluation des cadres pour d'autres projets.

Suis-je manquant, rejeté ou n'avez-je pas loué les avantages de vos bibliothèques, cadres et outils préférés JavaScript? Bien sûr, je l'ai fait! Bienvenue à commenter ...

Des questions fréquemment posées sur les meilleurs cadres JavaScript, bibliothèque et outils

Quelle est la principale différence entre angulaire et réagir?

Angular et React sont tous deux des frameworks JavaScript populaires, mais ils ont des différences clés. Angular, développé par Google, est un cadre MVC mature qui fournit un ensemble puissant de fonctionnalités pour créer des applications complexes. Il utilise la liaison des données bidirectionnelle et le DOM réel. React, développé par Facebook, en revanche, est une bibliothèque pour créer des interfaces utilisateur. Il utilise la liaison des données unidirectionnelle et le DOM virtuel, ce qui le rend plus rapide et plus efficace lors de la rendu de grandes listes et ensembles de données.

Comment choisir le bon cadre JavaScript pour mon projet?

Choisissez le bon cadre JavaScript dépend de plusieurs facteurs. Vous devriez considérer la taille et la complexité du projet, la courbe d'apprentissage du cadre, la taille de la communauté et les ressources disponibles et les exigences de performance et d'évolutivité de l'application. Il est également important de considérer la viabilité à long terme du cadre, car vous souhaitez choisir un cadre qui continuera d'être pris en charge et de mise à jour à l'avenir.

Quels sont les avantages de l'utilisation de Vue.js par rapport aux autres frameworks JavaScript?

vue.js est connu pour sa simplicité et sa facilité d'utilisation. Il a une courbe d'apprentissage douce, ce qui en fait un bon choix pour les débutants. Il dispose également d'une architecture flexible qui vous permet de choisir entre des paramètres légers de type bibliothèque ou des paramètres de framework entièrement traduits. Vue.js utilise également Virtual Dom et fournit une rérivation efficace et une mise en cache au niveau des composants pour des performances rapides.

Quel est le rôle de Node.js dans le développement JavaScript?

Node.js est un environnement d'exécution qui permet d'exécuter JavaScript du côté serveur. Cela signifie que vous pouvez utiliser JavaScript pour construire le frontal et le back-end de votre application, ce qui améliorera l'efficacité de développement et simplifiera la maintenance du code. Node.js possède également un énorme écosystème de bibliothèques et d'outils et est connu pour ses performances élevées et son évolutivité.

Quelle est l'importance d'apprendre TypeScript lors de l'utilisation de JavaScript Framework?

TypeScript est un superset de JavaScript qui ajoute des types statiques à la langue. Apprentissage TypeScript pour utiliser des cadres JavaScript n'est pas nécessaire, mais cela peut être bénéfique. TypeScript peut aider à attraper des erreurs au moment de la compilation plutôt qu'à l'exécution, ce qui entraîne un code plus robuste. Il est particulièrement utile lorsqu'il s'agit de grandes bases de code et équipes.

Quels sont les avantages de l'utilisation de bibliothèques JavaScript comme Lodash?

Lodash est une bibliothèque d'utilité qui fournit des moyens utiles de manipuler des tableaux, des objets et d'autres types de données en JavaScript. Cela peut aider à rendre votre code plus concis, lisible et plus efficace. Les méthodes Lodash sont également optimisées pour les performances, donc dans certains cas, elles peuvent être plus rapides que les méthodes JavaScript natives.

Comment Ember.js se compare-t-il aux autres cadres JavaScript?

Ember.js est un cadre entièrement fonctionnel qui fournit de nombreuses fonctionnalités intégrées telles que les routeurs et les couches de données. Cela peut faciliter la création d'applications complexes, mais cela signifie également que plus de contenu doit être appris. Ember.js suit le principe des conventions sur la configuration, ce qui peut accélérer le développement, mais peut ne pas être aussi flexible que les autres cadres.

Quelles sont les principales caractéristiques de la bibliothèque polymère?

Polymer est une bibliothèque développée par Google pour la création de composants Web. Il fournit un ensemble de fonctionnalités pour créer des éléments HTML personnalisés, encapsulant CSS et JavaScript dans ces éléments, et en utilisant la liaison des données et le traitement des événements. Le polymère prend également en charge la liaison des données unidirectionnelle et bidirectionnelle.

Comment fonctionne JQuery dans un environnement JavaScript moderne?

jQuery est une bibliothèque qui simplifie la traversée de documents HTML, le traitement des événements et l'animation. Bien qu'il ne soit pas aussi nécessaire que celle auparavant dû aux améliorations du JavaScript natif et à la montée des cadres modernes, JQuery est toujours largement utilisé et est un bon choix pour des projets plus simples ou le maintien d'un code hérité.

À quoi sont les frameworks et bibliothèques JavaScript émergents qui méritent d'être prêts à prêter attention?

Certains frameworks et bibliothèques JavaScript émergents incluent Svelte, un framework basé sur le compilateur conçu pour fournir une expérience de développement plus simple et plus rapide; sur React. Ces outils deviennent de plus en plus populaires et peuvent devenir plus importants à l'avenir.

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!