Au-delà de jQuery: un guide expert sur les frameworks JavaScript

La caractéristique déterminante d'un très bon programmeur est la paresse. Cela ne veut pas dire stupide ou ignorant, cependant. Le très bon programmeur paresseux n'écrit pas (il faut alors déboguer et tester) 100 lignes de code alors que 10 le fera. Dans le monde JavaScript, le développeur vraiment paresseux s'appuiera sur un framework efficace, bien testé et bien pris en charge pour éviter de réinventer constamment des solutions aux problèmes courants.

Les frameworks «fragmentent» une grande partie des fonctionnalités fines du langage JavaScript en appels de méthodes, réduisant la quantité de code dont le programmeur paresseux a besoin pour écrire, tester et déboguer. Il y a deux obstacles à franchir avant de récolter cet avantage: choisir un cadre adapté à votre objectif et l'apprendre.

Une fois que vous avez appris un cadre, le cours évident est de vous en tenir à tout ce que vous développez afin de ne pas avoir à apprendre autre chose, mais ce n'est pas toujours utile. En fait, l'un des indices qui indique que vous utilisez le mauvais cadre pour votre tâche actuelle est que vous faites beaucoup de travail. Alors soyez vraiment paresseux et continuez toujours à apprendre.

Un peu d'histoire JavaScript

L'histoire de JavaScript remonte au travail de développement réalisé par Brendan Eich sur le langage Mocha pour la société de navigateurs Web Netscape en 1995. Mocha est sorti sous le nom de LiveScript plus tard cette année-là et renommé en JavaScript lorsque Sun accorda à Netscape une licence de marque. Essayer de lier l'interpréteur JavaScript léger de type C au poids lourd indépendant de Java - un langage compilé par jeton orienté objet - au moyen d'un nom similaire semblait être une bonne idée à des fins marketing en 1995, mais au fil des ans, ce choix a n'a causé aucune fin de confusion.

Le développement de JavaScript au cours de la décennie suivante a été marqué par des désaccords entre les développeurs de navigateurs et un effort de normalisation ECMA assez faible. Ce qui a changé ce malaise et redynamisé le langage, c'est la montée en puissance du Dynamic HTML et de l'Ajax au milieu des années 2000, suivie rapidement par l'introduction de bibliothèques JavaScript open source telles que Prototype, jQuery, Dojo et MooTools, qui étaient destinées à créer du HTML dynamique. et Ajax plus faciles à utiliser et à fournir des «widgets» pour JavaScript qui amélioreraient la fonctionnalité des contrôles de formulaire HTML.

Bien que Netscape ait publié un serveur JavaScript peu de temps après JavaScript pour le navigateur, le langage n'a pas vraiment décollé pour une utilisation back-end jusqu'à la montée en puissance de Node.js à partir de 2009. Une partie de ce qui a rendu Node.js attrayant était l'utilisation de Google. Moteur JavaScript V8 hautement optimisé pour les modules de bibliothèque, avec code de base en C ++ assez portable.

Cette visite guidée des frameworks JavaScript est une tentative de donner un sens aux principales bibliothèques JavaScript d'aujourd'hui dans trois catégories: celles qui s'exécutent sur les serveurs Node.js, celles qui fonctionnent dans les navigateurs et celles qui prennent en charge les applications mobiles natives ou hybrides.

Framework Node.js

Node.js est une technologie de serveur basée sur JavaScript et C ++ qui a attiré beaucoup d'attention et de soutien depuis son introduction (à une ovation debout) par l'auteur Ryan Dahl au JSConf européen en novembre 2009. Node.js se distingue par un architecture événementielle capable d'E / S asynchrones, d'une faible empreinte mémoire et d'un débit et d'une évolutivité élevés pour les applications Web.

Alors que Node.js possède toutes les pièces nécessaires pour implémenter un serveur Web, l'écriture de cette couche demande du travail. TJ Holowaychuk a publié Express 1.0 Beta en juillet 2010, et il est rapidement devenu le serveur back-end «par défaut» pour Node.js et une partie de la pile MEAN, avec la base de données MongoDB et le framework frontal Angular.JS.

Néanmoins, différents développeurs et organisations ont des besoins différents. Express a engendré directement ou indirectement Locomotive, Hapi, Koa, Kraken et Sails.js. Meteor est assez différent, bien qu'il fonctionne également sur Node.js.

Express. Express est un cadre d'application Web Node.js minimal et flexible, offrant un ensemble robuste de fonctionnalités pour la création d'applications Web à une page, à plusieurs pages et hybrides. L'API Express traite l'application Web, les requêtes et réponses HTTP, le routage et le middleware. À partir d'Express 4.x, le middleware pris en charge pour Express réside dans un certain nombre de référentiels distincts.

Plusieurs fourchettes d'Express et d'add-ons pour Express ont fait surface, notamment Locomotive, Hapi et Koa. Koa a été créé par l'un des principaux contributeurs d'Express.

Express est plus ancien que ses descendants et a une plus grande empreinte. Néanmoins, il a également une communauté plus large et plus de stabilité. Je vois constamment Express incorporé dans d'autres frameworks et outils sans commentaire, comme si c'était le seul choix possible pour créer un serveur Web sur Node.js. Sur GitHub, le framework compte plus de 23 000 étoiles et 4 000 fourches.

Hapi. Hapi est une infrastructure simple à utiliser et centrée sur la configuration avec prise en charge intégrée de la validation d'entrée, de la mise en cache, de l'authentification et d'autres fonctionnalités essentielles pour la création d'applications Web et de services. Hapi permet aux développeurs de se concentrer sur l'écriture d'une logique d'application réutilisable d'une manière hautement modulaire et normative. Il a été développé par Walmart Labs et constitue un bon choix pour les grandes équipes et les grands projets.

Hapi a été construit à l'origine sur Express, mais a ensuite été repensé pour être autonome. Il est basé sur l'idée que «la configuration est meilleure que le code» et «la logique métier doit être isolée de la couche de transport». Dans l'exemple ci-dessus, notez à quel point la configuration des routes de serveur apparaît claire et nette dans le code.

Koa. Koa est un nouveau framework Web conçu par l'équipe derrière Express, mais indépendant du code Express. Koa vise à être une base plus petite, plus expressive et plus robuste pour les applications Web et les API. Koa utilise des générateurs ES6 pour le middleware plutôt que les rappels Node.js. Ce qui suit est une application Koa «bonjour, monde» utilisant un générateur, qui fait yield nextpasser le contrôle au générateur suivant:

La différence entre les générateurs middleware, tels qu'utilisés par Koa, et les rappels, tels qu'utilisés par Express et Connect, est que vous obtenez plus de flexibilité avec les générateurs. Par exemple, Connect passe simplement le contrôle à travers une série de fonctions jusqu'à ce que l'une revienne, tandis que Koa cède le contrôle «en aval», puis le contrôle revient «en amont». Dans l'exemple ci-dessus, le temps de réponse x «encapsule» le générateur de réponse, avec l' yield nextinstruction marquant l'appel. Le rendement est plus flexible que les appels de fonction explicites, car il facilite l'insertion d'un autre générateur dans la séquence, par exemple, un enregistreur Web entre le minuteur et la réponse.

Kraken. Projet open source PayPal, Kraken est une couche sécurisée et évolutive qui étend Express en fournissant une structure et une convention, un peu comme Locomotive. Bien que Kraken soit le principal pilier de son framework, les modules suivants peuvent également être utilisés indépendamment: Lusca (sécurité), Kappa (proxy NPM), Makara (LinkedIn Dust.js I18N) et Adaro (LinkedIn Dust.js Templating).

Kraken s'appuie sur yopour générer des projets, comme indiqué dans la capture d'écran à gauche. Comme Locomotive, il organise ses projets dans des répertoires classiques de type Rails, comprenant des modèles, des contrôleurs et des configurations. Tel qu'il est généré, Kraken est lié à Express en tant que middleware standard, défini comme an app, qui a alors ses méthodes app.use()et app.listen()appelées. Chaque route d'un serveur Kraken vit dans son propre fichier dans le dossier des contrôleurs.

Locomotive. En tant que cadre Web pour Node.js, Locomotive prend en charge les modèles MVC, les routes RESTful et les conventions de configuration (comme Rails), tout en s'intégrant de manière transparente à toute base de données et moteur de modèle. Locomotive s'appuie sur Express and Connect, qui est un framework de collage simple pour middleware utilisé par un certain nombre de frameworks Node.js.

Locomotive ajoute à Express une structure de type Ruby on Rails, que vous pouvez voir dans l'image ci-dessus, qu'Express manque autrement. Les vues de locomotive sont souvent des fichiers JavaScript (html.ejs) intégrés, comme illustré ici, mais Locomotive prend également en charge Jade et d'autres moteurs de modèles compatibles pour Express. La fonctionnalité REST est contrôlée par des routes, comme c'est généralement le cas dans les serveurs Express. Vous pouvez utiliser n'importe quelle base de données et couche ORM (object-relational mapping) que vous souhaitez avec Locomotive. Le guide montre l'utilisation de MongoDB avec Mongoose, ainsi que l'utilisation de Passport pour l'authentification des utilisateurs.

Météore. Meteor vous offre un moyen radicalement plus simple de créer des applications mobiles et Web en temps réel, entièrement en JavaScript, à partir d'une seule base de code. Plutôt que d'envoyer du HTML sur le fil, Meteor envoie des données du serveur pour que le client les rende. En plus de fonctionner de manière autonome, Meteor peut s'intégrer à AngularJS et React. Meteor ne ressemble en rien à Express, même s'il est également construit sur Node.js et prend en charge les modèles Handlebars, Blaze et Jade.

Meteor permet un prototypage rapide et produit du code multiplateforme (Web, Android, iOS). Il s'intègre à MongoDB, en utilisant le protocole de données distribuées et un modèle de publication-abonnement pour propager automatiquement les modifications de données aux clients sans que le développeur n'ait à écrire de code de synchronisation. Sur le client, Meteor dépend de jQuery et peut être utilisé avec n'importe quelle bibliothèque de widgets d'interface utilisateur JavaScript.

Meteor est développé par Meteor Development Group, une startup incubée par Y Combinator. Meteor est maintenant suffisamment mature pour prendre en charge une demi-douzaine de manuels didactiques. Le projet a attiré plus de 32 000 étoiles sur GitHub.

Meteor lui-même est un logiciel open source gratuit, mais le groupe Meteor le monétise en vendant des abonnements Meteor Galaxy DevOps, qui incluent un espace serveur AWS et une prise en charge de base de Meteor, ainsi qu'un abonnement au support Premium séparé.

Sails.js. Avec Sails, vous pouvez créer des applications Node.js personnalisées de niveau entreprise. Il est conçu pour émuler le modèle familier de modèle-vue-contrôleur (MVC) de frameworks tels que Ruby on Rails, mais avec la prise en charge des exigences des applications modernes: des API basées sur les données avec une architecture évolutive orientée services. C'est particulièrement utile pour créer des applications de chat, des tableaux de bord en temps réel ou des jeux multijoueurs, mais vous pouvez l'utiliser pour n'importe quel projet d'application Web. Sails prend en charge WebSockets et envoie automatiquement des messages de socket aux itinéraires de votre application.

Comme Rails, Sails valorise la convention sur la configuration, fournit des générateurs et des échafaudages pour créer rapidement des API REST à partir de plans et utilise un modèle de conception MVC / enregistrement actif. Sails est construit sur Express et utilise Waterline pour son ORM, avec prise en charge des jointures ORM. Waterline prend en charge les bases de données SQL et NoSQL.

Sails est un framework back-end conçu pour être compatible avec n'importe quel framework Web frontal, tel que Angular ou Backbone, ou appareil mobile, tel qu'iOS ou Android, que vous aimez ou devez prendre en charge. Il y a un livre en préparation sur Sails.js, encore partiellement terminé.

Framework HTML5 / JavaScript

Nous pensons traditionnellement que les bibliothèques et les frameworks JavaScript fonctionnent dans les navigateurs. Comme je l'ai mentionné plus tôt, certains d'entre eux - jQuery, Dojo et MooTools - sont apparus au milieu des années 2000 principalement pour rendre le HTML dynamique et Ajax plus faciles à écrire. Certains d'entre eux se sont depuis étendus à d'autres domaines de fonctionnalités, tels que les widgets d'interface utilisateur et les interfaces d'appareils mobiles.

D'autres sont apparus plus récemment. AngularJS est un framework frontal qui étend le HTML avec un balisage pour les vues dynamiques et la liaison de données. Backbone.js et Ember sont conçus pour développer des applications Web d'une seule page. React sert à créer une interface utilisateur ou une vue, généralement pour les applications d'une seule page.

D'autres cadres encore poursuivent des domaines de spécialisation plus étroits. D3 fait de la visualisation des données et des animations. Socket.IO implémente des applications Web en temps réel. Knockout est un moyen de haut niveau de lier un modèle de données à une interface utilisateur Web. Polymer offre une couche légère de «sucre» au-dessus des API des composants Web pour vous aider à créer vos propres composants Web. Underscore est une bibliothèque d'utilité générale.

Comme vous vous en doutez, vous avez l'embarras de la richesse à choisir pour le développement Web côté client.

AngularJS.  AngularJS (ou simplement Angular, entre amis) est un framework JavaScript Ajax modèle-vue-tout (MVW) qui étend le HTML avec un balisage pour les vues dynamiques et la liaison de données. Angular est particulièrement utile pour développer des applications Web d'une seule page et lier des formulaires HTML à des modèles et des contrôleurs JavaScript.

Le modèle modèle-vue-quel que soit le son étrange est une tentative d'inclure les modèles modèle-vue-contrôleur, modèle-vue-vue-modèle (MVVM) et modèle-vue-présentateur (MVP) sous un même nom. Alors que les programmeurs aiment discuter des différences entre ces trois modèles étroitement liés, les développeurs Angular ont décidé de se retirer de la discussion.

Fondamentalement, Angular synchronise automatiquement les données de votre interface utilisateur (vue) avec vos objets JavaScript (modèle) via une liaison de données bidirectionnelle. Pour vous aider à mieux structurer votre application et à la rendre facile à tester, Angular enseigne au navigateur comment faire l'injection de dépendances et l'inversion de contrôle.

Angular a été créé par Google et open-source sous la licence MIT. Le référentiel sur GitHub compte plus de 47 000 étoiles et 22 000 fourches. Made with Angular présente des centaines de sites Web construits avec Angular, dont beaucoup sont des propriétés Web de haut niveau.