Il semble qu'il y ait plus de frameworks, de bibliothèques et d'outils JavaScript que de développeurs. À la fin de 2018, une recherche rapide sur GitHub révèle 2,3 millions de projets JavaScript. npm est devenu le plus grand système de modules au monde avec 700 000 paquets utilisables sur npmjs.com et des milliards de téléchargements chaque mois.
2018.12.07: ] Cet article a été mis à jour pour refléter l'état actuel de l'écosystème JavaScript. La mise à jour de cette année a été sponsorisée par Sencha . Merci de soutenir les partenaires qui rendent SitePoint possible!
Cet article tente d'expliquer les principes de base et les différences rudimentaires entre les principaux frameworks, bibliothèques et outils JavaScript côté client. Une autre question est de savoir s'ils sont «meilleurs» pour vous. Choisissez quelque chose et restez-y pendant un moment. Sachez simplement que votre option préférée sera remplacée par quelque chose «meilleur» peu importe votre choix!
Table des matières
Veuillez accepter les conditions suivantes avant de lire cet article!… [19659006] Le paysage JavaScript change quotidiennement. Cet article sera obsolète au moment de sa publication!
Tricky Terminology
The les termes "cadre", "bibliothèque" et "outil" peuvent signifier différentes choses pour différentes personnes à différents moments en fonction du contexte. Les définitions générales utilisées ici:
Bibliothèques
Une bibliothèque est une collection organisée de fonctionnalités utiles. Une bibliothèque typique peut inclure des fonctions permettant de gérer des chaînes, des dates, des éléments HTML DOM, des événements, des cookies, des animations, des requêtes réseau, etc. Chaque fonction renvoie à l'application appelante des valeurs qui peuvent être implémentées à votre guise. Pensez-y comme à une sélection de composants de voiture: vous êtes libre de les utiliser pour aider à construire un véhicule en état de marche, mais vous devez également construire le moteur vous-même. Par exemple, Ajax peut être implémenté à l'aide de l'API XMLHttpRequest mais cela nécessite plusieurs lignes de code et il existe des différences subtiles entre les navigateurs. Une bibliothèque peut fournir une fonction ajax () plus simple, vous permettant ainsi de vous concentrer sur une logique métier de niveau supérieur.
Une bibliothèque peut réduire le temps de développement de 20%, car vous n'avez pas à vous inquiéter. sur les détails les plus fins. Les inconvénients:
- un bogue dans une bibliothèque peut être difficile à localiser et à corriger
- rien ne garantit que l'équipe de développement publiera un correctif rapidement
- un correctif pourrait modifier l'API et entraîner des modifications importantes de votre code. 19659023] Frameworks
Un framework est un squelette d'application. Cela nécessite que vous abordiez la conception de logiciels de manière spécifique et que vous insériez votre propre logique à certains moments. Des fonctionnalités telles que les événements, le stockage et la liaison de données vous sont normalement fournies. En utilisant l'analogie de la voiture, un cadre fournit un châssis, une carrosserie et un moteur fonctionnels. Vous pouvez ajouter, supprimer ou modifier certains composants en supposant que le véhicule reste opérationnel.
Un framework fournit normalement un niveau d'abstraction supérieur à celui d'une bibliothèque et peut vous aider à construire rapidement les 80% premiers de votre projet. Les inconvénients:
- les 20% restants peuvent s'avérer difficiles si votre application dépasse les limites du cadre
- . Les mises à jour ou migrations du cadre peuvent être difficiles – voire impossible
- . et les concepts vieillissent rarement bien. Les développeurs découvriront toujours un meilleur meilleur moyen de faire la même chose
Outils
Un outil facilite le développement mais ne fait pas partie intégrante de votre projet. Les outils comprennent les systèmes de compilation, les compilateurs, les transpileurs, les minificateurs de code, les compresseurs d'image, les mécanismes de déploiement, etc.
Les outils devraient faciliter le processus de développement. Par exemple, de nombreux codeurs préfèrent Sass à CSS car ils fournissent la séparation de code, l'imbrication, les variables de rendu, les boucles et les fonctions. Les navigateurs ne comprenant pas la syntaxe Sass / SCSS, le code doit donc être compilé en CSS à l'aide d'un outil approprié avant le test et le déploiement.
Ne vous identifiez pas!
La distinction entre bibliothèques, frameworks et outils est rarement claire. Un cadre pourrait inclure une bibliothèque. Une bibliothèque peut implémenter des méthodes de type framework. Les outils pourraient être essentiels pour l'un ou l'autre. J’ai tenté d’étiqueter chaque projet, mais la portée peut varier.
Si cela vous semble trop compliqué, vous pouvez envisager de coder le code JavaScript à la vanille . C’est bien, mais vous allez inévitablement écrire votre propre bibliothèque et / ou code-cadre qui doit être maintenu. JavaScript lui-même est une abstraction sur une tour de navigateur et d'abstractions d'OS!
Frameworks et Bibliothèques JavaScript
Projets dans un ordre approximatif d'utilisation / popularité / hype…
jQuery
jQuery reste la bibliothèque JavaScript la plus utilisée jamais créé et est distribué avec WordPress, ASP.NET et plusieurs autres cadres. Il a révolutionné le développement côté client en introduisant le sélecteur CSS dans la récupération de nœud DOM ainsi que dans l'enchaînement pour appliquer des gestionnaires d'événements, des animations et des appels Ajax. Il reste une option viable pour les projets nécessitant une pincée de fonctionnalités JavaScript.
Pour:
- distribution de petite taille
- courbe d’apprentissage peu profonde, aide en ligne considérable
- syntaxe concise
- facile à étendre
Inconvénients:
- ajoute une rapidité supplémentaire aux API natives
- moins essentielle maintenant que la compatibilité avec les navigateurs s'est améliorée
- l'utilisation
- a permis d'éviter
- une certaine industrie de contrecarrer contre les utilisations inutiles.
React
React description type bibliothèque site web facebook.github.io/react/ référentiel ] github.com/facebook/react étoiles GitHub 115.000 version actuelle 16.6.3 développeur Facebook et les contributeurs date de lancement Mars 2013 format typique 21kb min utilisation typique applications d'une page [19659056] usage faible React, qui est peut-être la bibliothèque dont on parle le plus au cours des dernières années, est une bibliothèque JavaScript permettant de créer des interfaces utilisateur. Il se concentre sur la partie "View" du développement de Model-View-Controller (MVC) et facilite la création de composants d'interface utilisateur qui conservent leur état. C'était l'une des premières bibliothèques à implémenter un DOM virtuel; la structure en mémoire calcule les différences et met à jour efficacement la page.
L'utilisation de React semble faible dans les statistiques, peut-être parce qu'elle est utilisée dans des applications plutôt que sur des sites Web. Près de 70% des développeurs déclarent avoir une certaine expérience de l'utilisation de la bibliothèque .
Pour:
- petit, efficace, rapide et flexible
- modèle de composant simple
- bonne documentation et ressources en ligne [19659007] le rendu côté serveur est possible
- toujours populaire et en croissance rapide
- de nombreux emplois sont proposés aux développeurs de React
Inconvénients:
- de nouveaux concepts et syntaxes à apprendre
- les outils de construction sont essentiels
- peut nécessiter d'autres bibliothèques ou structures pour fournir les aspects modèle et contrôleur
- peut être incompatible avec le code et d'autres bibliothèques modifiant le type de DOM
AngularJS 1.x
AngularJS description framework site Web angularjs.org référentiel github.com/angular/angular.js étoiles GitHub 60 000+ [19659056] version actuelle 1.7.5 développeur Google date de lancement octobre 2010 taille typique 144ko utilisation typique applications d’une page usage bas Angulaire est le premier cadre – ou Cadre d'application MVC – à figurer sur cette liste. L'édition la plus populaire reste la version 1.x qui étend le code HTML à la liaison de données bidirectionnelle tout en dissociant la manipulation DOM de la logique d'application.
Angular 1.x est toujours en cours de développement malgré la sortie de la version 2 (qui est maintenant la version 4 !) Confus? Voir ci-dessous…
Pour:
- un cadre populaire adopté par plusieurs grandes entreprises
- une solution unique pour produire des applications Web modernes
- faisant partie de la pile MEAN "standard" (MongoDB, Express.JS, AngularJS, NodeJS) tant d'articles et de tutoriels sont disponibles
Inconvénients:
- courbe d'apprentissage plus abrupte que certaines alternatives
- base de code volumineuse
- impossible à mettre à niveau vers Angular 2.x
- bien qu'il s'agisse d'un projet Google, Google
Angular 2+ (maintenant 7.x)
Angular description type framework site Web angular.io référentiel github.com/angular/angular GitHub étoiles 43.000+ version actuelle 7.1 développeur Google ] date de lancement septembre 2016 taille typique 450 Ko minimum utilisation typique applications d’une page usage [1 9659055] bas Angular 2.0 est sorti en septembre 2016. Il s'agissait d'une réécriture complète qui introduisait un modèle à base de composants modulaires créé avec TypeScript (compilé en JavaScript). Pour ajouter à la confusion, la version 4.0 a été publiée en Mars 2017 (la v3 a été ignorée pour éviter les problèmes de version sémantique).
Angular 2+ est radicalement différent de la v1. Ni l'un ni l'autre n'est compatible avec l'autre – peut-être que Google aurait dû donner un nom différent au projet?
Pour:
- une solution unique pour produire des applications Web modernes
- fait toujours partie de la pile MEAN Bien que moins de tutoriels angulaires 2+ soient disponibles
- TypeScript offre certains avantages aux utilisateurs familiarisés avec les langages à typage statique tels que C # et Java.
Contre:
- courbe d'apprentissage plus abrupte que d'autres alternatives [19659007] base de code volumineuse
- impossible à mettre à niveau depuis Angular 1.x
- Angular 2.x a connu une adoption relativement faible par rapport à 1.x
- alors qu’il s’agissait d’un projet Google. Google ne semble pas l’utiliser?
Vue.js
Vue.js description type cadre site web vuejs.org référentiel github.com/vuejs/vue GitHub stars 120 000+ version actuelle [19659055] 2.5.17 développeur Evan You date de lancement février 2014 taille typique 19kb min utilisation typique composants et applications à une page ] usage low Vue.js est un cadre léger et progressif permettant de créer des interfaces utilisateur. Le noyau offre une couche de vue virtuelle basée sur React, semblable à React, qui peut être intégrée à d'autres bibliothèques, mais il est également capable d'alimenter des applications d'une page. Le framework a été créé par Evan You qui travaillait auparavant sur AngularJS mais souhaitait extraire les parties qu'il appréciait.
Vue.js utilise une syntaxe de modèle HTML pour lier le DOM aux données d'instance. Les modèles sont des objets JavaScript simples qui mettent à jour la vue lorsque les données sont modifiées. Des outils supplémentaires fournissent des installations pour l’échafaudage, le routage, la gestion des états, les animations, etc.
Pour:
- adoption rapide et popularité croissante
- simple à utiliser avec un niveau élevé de satisfaction des développeurs
- légère, petite dépendance et bonne performance
Inconvénients:
- peut être éclipsé par React
- une certaine confiance dans un développeur unique pour les mises à jour
- moins de ressources que d’alternatives
Sencha Ext JS
Lodash et Underscore sont combinés dans cette section car ils fournissent des centaines d'utilitaires JavaScript fonctionnels pour ement chaîne native, nombre, tableau et autres méthodes d'objet primitives. 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 côté client est faible, mais l'une ou l'autre bibliothèque peut être adoptée pour les applications Node.js côté serveur.
Pour:
- small et simple
- facile à apprendre avec une bonne documentation
- compatible avec la plupart des bibliothèques et les frameworks
- ne prolonge pas les objets intégrés
- peut être utilisé sur le client ou le serveur
Les inconvénients:
- certains les méthodes sont disponibles dans ES2015 et dans les éditions ultérieures de JavaScript.
Backbone.js
Backbone.js description type framework site web backbonejs.org [19459004)] référentiel github.com/jashkenas/backbone/ GitHub stars 37.000+ version actuelle 1.3.3 développeur (19659055] Jeremy Ashkenas date de lancement octobre 2010 taille typique 8kb min utilisation typique simple-p applications d'âge utilisation faible Backbone.js était l'une des premières options côté client permettant de fournir une structure MVC communément trouvée dans les frameworks côté serveur. Sa seule dépendance est Underscore.js qui a été créée par le même développeur.
Backbone.js prétend être une bibliothèque car elle peut être intégrée à d'autres projets. Je suppose que la plupart des développeurs le considèrent comme un cadre, bien que moins d'opinion que certains autres.
Pour:
- petit, léger et moins compliqué
- n'ajoute pas de logique à HTML
- la grande documentation
- adoptée pour de nombreuses applications, notamment Trello, WordPress.com, LinkedIn et Groupon
Inconvénients:
- un niveau d'abstraction inférieur à celui d'alternatives telles que AngularJS (bien que cela puisse être considéré comme un avantage)
- nécessite des composants supplémentaires pour la mise en oeuvre de fonctionnalités telles en tant que liaison de données
- les frameworks les plus récents se sont éloignés des architectures MVC
Ember.js
Ember.js description type framework site web .com référentiel github.com/emberjs/ember.js GitHub étoiles 20 000+ version actuelle 3.6.0 [19659056] développeur Ember team date de lancement décembre 2011 [19659056] taille typique 95kb min utilisation typique applications d’une page utilisation bas Ember.js est l’un des plus vastes cadres avec opinion basé sur un Modèle Model-View-ViewModel (MVVM). Il implémente des modèles, des liaisons de données et des bibliothèques dans un seul package. Les concepts de sur-configuration par convention seront immédiatement familiers à ceux qui ont l'expérience de Ruby on Rails.
Pour:
- fournit une solution unique pour les applications côté client
- Les développeurs peuvent être instantanément productifs – il utilise jQuery [19659007] une bonne compatibilité ascendante et des options de mise à niveau
- ont adopté des normes de développement Web modernes
Contre:
- de grande taille
- distribuable considéré comme monolithique par rapport à d’autres cadres qui évoluent vers des structures de composants plus petites
- Ember way or no way
Knockout.js
Knockout.js description type framework site Web knockoutjs.com référentiel github.com/knockout/knockout GitHub étoiles 9.000+ version actuelle 3.5.0 développeur Steve Sanderson . date juillet 2010 ty taille physique 59kb min utilisation typique applications d’une page utilisation bas L’un des plus anciens frameworks MVVM, Knockout.js utilise des observateurs pour assurer les séjours à l’UI synchronisé avec les données sous-jacentes.
Avantages:
- petit et léger, sans dépendance
- excellente prise en charge du navigateur depuis IE6
- bonne documentation
Inconvénients:
- les grands projets peuvent devenir complexes [19659007] le développement a ralenti
- l'utilisation semble être en recul
Mentions notables
Envie de plus? Les projets suivants sont moins populaires mais valent la peine
compte tenu de:- Polymer – une bibliothèque qui permet la prise en charge de composants Web HTML5 entre navigateurs
- Meteor – une complète- Plate-forme de pile pour applications Web.
- Aurelia – Un cadre léger multiplate-forme
- Svelte – un projet relativement nouveau qui transforme le code source du cadre en un code JavaScript semblable à celui de la vanille [19659007] Conditioner.js – Une nouvelle bibliothèque qui charge et décharge automatiquement les modules en fonction de l'état.
Outils: Organisateurs de tâches polyvalents
Les outils de construction automatisent une variété de tâches de développement Web, telles que – traitement, compilation, regroupement de modules, optimisation d'image, minification de code, lintérisation et exécution de tests. Les tâches sont généralement gérées ensemble dans un seul package exécutable. Les options les plus populaires:
Webpack
Webpack prend en charge toutes les options de module courantes et est devenu synonyme de développement de React. Bien qu'il prétende être un bundle de modules, Webpack peut être utilisé comme un exécuteur de tâches à usage général. La configuration basée sur les objets JavaScript peut être un peu délicate. Des générateurs sont disponibles mais certains utilisateurs de Webpack ont migré vers pour obtenir une configuration plus facile et des temps de compilation améliorés.
Gulp.js [19659052] Gulp.js
description site Web gulpjs.com référentiel github.com/gulpjs/gulp de 1965 Github.com 30 000+ version actuelle 4.0.0 (3.9.1 toujours actif) téléchargements hebdomadaires 750 000+ Bien que n'étant pas le premier exécutant, Gulp est rapidement devenu l'un des le plus populaire et est mon préféré . Gulp utilise un code JavaScript facile à lire, qui charge les fichiers source dans un flux et dirige les données via divers plug-ins avant leur sortie dans un dossier de construction. C’est simple, rapide et amusant, mais les développeurs ont migré vers Webpack.
npm
npm est le gestionnaire de paquets Node.js mais ses fonctions de script peuvent être utilisées pour la tâche polyvalente exécutée . C’est une option attrayante pour des projets simples avec peu de dépendances. Cependant, des tâches plus complexes peuvent rapidement devenir impraticables.
Grunt
Grunt a été l'un des premiers exécutants de tâches JavaScript à parvenir à une adoption massive, mais la rapidité et la configuration JSON compliquée ont entraîné la montée en puissance de Gulp. Les pires problèmes ont été résolus et Grunt reste une option populaire.
Tools: Module Bundlers
La gestion de plusieurs fichiers JavaScript peut devenir une corvée. Sauf si vous pouvez adopter la syntaxe relativement nouvelle du module ES6 de manière native, les dépendances de JavaScript dans le navigateur doivent être chargées ou concaténées dans un ordre approprié. Un bundle de modules peut être utilisé si vous devez prendre en charge des navigateurs plus anciens (toute version antérieure à 2018), mais la nécessité d'utiliser ces outils diminuera avec le temps.
Browserify
Browserify prend en charge les modules CommonJS utilisés par Node.js pour compiler tous les modules en un seul fichier compatible avec le navigateur.
RequireJS
RequireJS a démarré un chargeur de modules dans le navigateur, bien qu'il puisse également être utilisé dans Node.js. Il prend en charge la syntaxe AMD.
Tools: Linting
Linting analyse votre code pour détecter les erreurs potentielles ou les écarts par rapport aux normes syntaxiques.
ESLint
ESLint est l’outil de lintérisation le plus populaire pris en charge par la majorité des IDE, des éditeurs, des logiciels d’embouteillage et des coureurs de tâches. Chaque règle est un plugin, vous pouvez donc le configurer à votre guise.
JSHint
Un linter JavaScript flexible, moins configurable que ESLint, mais offrant un bon équilibre entre les erreurs véritables et les exigences syntaxiques pédantes.
JSLint
] Un des premiers linters qui implémente un ensemble strict de règles par défaut. Le développement a ralenti et cela peut être un peu intransigeant pour certains développeurs.
Outils: Suites de tests
Le développement piloté par les tests vous oblige à écrire du code pour tester votre code avant de commencer à l'écrire. Vous pouvez également écrire du code pour tester votre code de test!
Il existe de nombreuses options, notamment Ava Tape et Jasmine mais le Les trois options les plus populaires sont actuellement…
Jest
Un framework de test de Facebook qui a gagné en popularité en raison de ses liens étroits avec React et Webpack.
Mocha
Mocha peut exécuter des tests dans Node. .js et un navigateur. Il prend en charge les tests asynchrones et est souvent associé à Chai pour permettre au code de test d'être exprimé dans un style lisible. C'était l'option la plus populaire pendant plusieurs années.
Jasmine
Jasmine est une suite de tests axée sur le comportement qui permet d'automatiser le test de votre interface utilisateur et de vos interactions dans un navigateur.
Outils: Divers
efforts, j'accepte, tout le monde n'aime pas JavaScript! Des compilateurs tels que TypeScript LiveScript et CoffeeScript peuvent rendre votre développement plus agréable. Vous pouvez également envisager Babel de transformer une source moderne et concise ES2015 en code ES5 compatible avec plusieurs navigateurs.
Il existe des dizaines de moteurs de modèle HTML alimentés par JavaScript . ] y compris Moustache Guidons Pug (Jade) et EJS . Je préfère les options légères qui conservent la syntaxe JavaScript, telles que EJS et doT .
Enfin, pourquoi rédiger votre propre documentation alors que vous pouvez l’automatiser? Les générateurs de documentation compatibles ES2015 incluent ESDoc JSDoc YUIdoc documentation.js et et . ] Résumé et recommandations
Si vous suivez la sagesse de la foule, l’élan est actuellement derrière React et d’autres bibliothèques évoluent dans le même sens technique. C'est un choix de carrière sûr, mais vous devriez aussi envisager Vue.js ou le modèle React compatible mais plus petit Preact .
Les cadres monolithiques sont tombés en désuétude, mais si vous en aviez besoin une structure stricte pour des projets plus importants, AngularJS reste une option populaire. La majorité des développeurs sont restés fidèles à la version 1.0, mais c’est peut-être par nécessité que par choix. À plus long terme, la version 2+ pourrait être un pari plus sûr, mais vous devrez apprendre le typeScript.
Ne négligez pas jQuery . Il n’est pas à la mode et est rarement mentionné dans la presse technique, mais il est activement développé et plus que capable pour les sites Web et les applications. jQuery a une courbe d'apprentissage peu profonde et est compris par de nombreux développeurs dans le monde entier.
Si vous vous sentez aventureux, de nouvelles options de transpiler, telles que Svelte et Rawact convertissent le code en framework en vanilla JavaScript . La dépendance à la structure est supprimée, le code est considérablement plus petit et fonctionne plus rapidement.
Le choix des outils est moins critique et peut varier d'un projet à l'autre. La plupart WebPack Scripts Gulp ou npm. Vous ne pouvez pas vous tromper avec ESLint et Jest à des fins d’essais, mais il existe de nombreuses alternatives à essayer.
Cela dit, chaque projet, chaque équipe et chaque ensemble de compétences sont différents. Vous avez peu de temps pour faire une évaluation, il est donc tentant d’utiliser ce que vous savez. Cet article recevra des commentaires recommandant FrameworkX mais tout ressemble à un clou lorsque vous avez un marteau.
Enfin, n'oubliez jamais que les bibliothèques, les frameworks et les outils sont facultatifs! Développement JavaScript a été révolutionné au cours de la dernière décennie; Nous sommes passés de quelques bibliothèques auxiliaires rudimentaires à un choix impressionnant. Il est facile de tomber dans le piège de la complexité croissante ou de passer au dernier cadre très chaud tous les quelques mois. Considérez toujours le JavaScript vanille – en particulier pour les personnes plus petites et personnelles. Les connaissances acquises ne peuvent être datées et deviendront inestimables lors de l'évaluation de frameworks pour d'autres projets.
Ai-je manqué, licencié ou omis de vanter les avantages de vos bibliothèques, frameworks et outils JavaScript préférés? Bien sûr que j'ai! Commentaires bienvenus…
Craig est un consultant web britannique indépendant qui a créé sa première page pour IE2.0 en 1995. Depuis lors, il préconise les normes, l'accessibilité et les meilleures techniques HTML5. Il a créé des spécifications d'entreprise, des sites Web et des applications en ligne pour des entreprises et organisations telles que le Parlement britannique, le Parlement européen, le Département de l'énergie et des changements climatiques, Microsoft, etc. Il a écrit plus de 1 000 articles pour SitePoint et vous pouvez le trouver @craigbuckler .
Source link