Les Meilleurs Projets JavaScript en 2017

Et le grand vainqueur de l'année 2017 est une nouvelle fois Vue.js avec plus de 40 000 étoiles ajoutées sur GitHub.

C'est beaucoup plus qu'en 2016 et l'écart avec le poursuivant React s'est accentué.

Nul ne pourra ignorer le succès de Vue en 2018 !

Mais quelles sont les raisons du succès de ce framework "côté client" ?

• Tout d'abord un accès facile pour les nouveaux venus, une approche "composant" comme avec React mais avec une syntaxe facile à appréhender pour les débutants.
• Un éco-système bien étudié avec des solutions claires pour des tâches telles que:
  • Le routing entre les pages avec vue-router
  • Le contrôle de l'état de l'application (State management) avec Vuex
• Le concept de fichier unique .vue: un fichier unique pour décrire un composant réutilisable: les balises HTML, le code JavaScript associé et leurs styles.
• Inclus par défaut dans l'un des frameworks PHP les plus populaires Laravel
• Ce n'est pas le produit d'un géant de l'internet tel que Facebook ou Google, mais c'est un projet maintenu par Evan You, avec une forte communauté "open source", en particulier du côté de la Chine.

Vue est utilisé par la plus grande plateforme de commerce électronique en Chine (Alibaba) mais aussi par des sociétés telles que Adobe ou GitLab.

La catégorie des "Frameworks côté client" est traditionnellement la catégorie reine, cette année aussi la bataille fut intense entre les prétendants.

3 grands acteurs se disputent les faveurs des développeurs dans cette catégorie: Vue.js, React et Angular

Nous avons vu précédemment ce qui faisait le succès de Vue.js.

React a un éco-système beaucoup plus fragmenté, laissant au développeur la liberté de créer une solution "à la carte" pour les questions suivantes: routing entre les pages, accès aux données depuis des API distantes, contrôle de l'état de l'application...

A l'opposé Angular propose une approche beaucoup plus systématique, car c'est un framework complet, on dit souvent qu'il y existe une "manière Angular" de faire les choses.

C'est la raison pour laquelle Angular remporte un grand succès dans le monde de l'entreprise. Ce succès est renforcé par l'utilisation par le framework du langage TypeScript, qui introduit dans le langage les "types" chers aux développeurs Java et C#.

Côté serveur également, JavaScript a une place de plus en plus importante.

Mikeal Rogers, un membre influent de la communauté Node.js, prédit que Node.js va dépasser Java dans 1 an.

Mais contrairement à des langages tels que PHP (avec Laravel), Ruby (avec Ruby on Rails) ou Python (avec Django), il n'existe pas de réel framework Node.js dominant ou d'architecture recommandée au moment de créer une nouvelle application serveur.

Malgré son âge, Express est resté en 2017 le framework Node.js le plus populaire. Qui plus est, il est utilisé en interne par de très nombreux projets tels que Feathers, Keystone or Nest.

Remarquons l'arrivée de 3 nouveaux venus dans le classement cette année:

• Fastify inspiré by Hapi, propose une approche complète et convient très bien au développment d'API au format JSON, API dont sont friandes les applications web modernes.
• Server.js est une solution qui propose d'emblée toutes les fonctionnalités d'un serveur web
• Nest se différentie en proposant une architecture familière aux développeurs Angular, faite de "modules" et de "contrôleurs" écrits dans le langage TypeScript.

Comme le domaine de React est limité à la partie visuelle des applications (la partie "vue" mais ce mot prête à confusion à cause du projet Vue.js !), cela libère de la place pour tout un éco-système de projets qui fonctionnent avec React.

En 2016, Create React App a résolu un problème récurrent: quel point de départ pour créer une nouvelle application avec React ?

Ce projet est très fréquemment mis à jour par Facebook et s'impose comme la manière quasi officielle de démarrer un nouveau projet. Comme une preuve supplémentaire de son succès, StackBlitz est un éditeur de texte en ligne qui permet de créer instantanément une application à partir de Create React App.

Pour les développeurs qui recherchent plus de fonctionnalités, une solution telle que React boilerplate offre toutes les joyeusetés d'une application moderne, y compris une couche "GraphQL" et la possibilité de fonctionner en local, en mode offline.

Parmi les autres projets du classement, on trouve des jeux de composants déjà stylés tels que Ant Design, Ant Design Pro ou Material UI qui permettent aux développeurs d'obtenir aisément une application web avec un joli rendu, qui donne une allure professionnelle (à défaut d'être originale sans doute !).

Le projet Recompose nous montre l'importance des motifs de programmation fonctionnelle (Functional Programming), motifs qui font une partie du succès de React. Tout peut se traduire par une simple fonction et Recompose propose un ensemble d'outils pour prolonger le voyage dans cette direction.

L'invité spécial: Evan You

Nous sommes admiratifs devant le succès rencontré par Vue.js mais il faut confesser que nous n'étions pas assez familiers avec son éco-système pour nous permettre d'écrire à ce sujet.

C'est la raison pour laquelle nous avons demandé l'avis à un expert... Qui d'autre que le créateur de Vue.js en personne est plus qualifié pour donner son avis ?

De nombreux projets ont profité de la popularité grandissante de Vue.js pour construire un véritable éco-système en pleine croissance.

Element et iView sont les ensembles de composants UI (UI Toolkits) les plus populaires, ils permettent de réaliser rapidement des applications web classiques. De leut côté, Mint UI et vux misent sur les applications mobiles.

Vuetify est un framework qui adhère aux principes du "Material Design", il peut être utilisé aussi bien pour des applications mobiles que pour des applications web classiques. C'est sans doute le framework qui couvre le plus grand nombre de fonctionnalités: rendu côté serveur, applications web dites progressives (PWA), support pour ligne de commande (CLI)... Vue material est un autre framework qui suit rigoureusement les principes du "Material Design".

Nuxt est un framework de plus haut niveau qui permet de créer des applications dites universelles, produisant du code capable de s'executer tant côté serveur que côté client.

Weex est un framework qui permet de créer de véritables applications mobiles natives à partir d'une syntaxe et d'une API familières aux developpeurs Vue.js. Développé par Alibaba, le géant du e-commerce chinois, avec une priorité accordée aux performances, il a permis de construire certaines des applications les plus utilisées dans le monde.

La polyvalence de JavaScript est telle que l'on peut construire de réelles applications mobiles avec des technologies web.

On retrouve dans cette catégorie le clivage entre les 3 acteurs dominants des frameworks côté client:

• React avec React Native
• Vue avec Weex et Quasar
• Angular avec Ionic et NativeScript

Comme en 2016, React Native s'impose comme la solution la plus populaire pour construire une application mobile pour toutes les plateformes (iOS, Android et Windows Mobile), à partir de JavaScript.

Comme le montre cette video très complète intitulée Cross platform apps with React Native, le slogan: "Un seul code pour toutes les plateformes" est devenu une réalité !

Les "compilateurs" de cette catégorie sont des outils qui transforment du code dans un langage donné en code JavaScript standard, capable de s'exécuter dans n'importe quel navigateur Web, ou tout environnement supportant JavaScript.

On peut avoir besoin d'un tel compilateuur pour 2 raisons:

• Pour profiter des dernières avancées du langage JavaScript (spécifications ES6 et ES7) tout en produisant du code compatible avec la majorité des navigateurs web. C'est ce qui fait le succès de Babel, utilisé par un très grand nombre de projets Web.
• Pour ajouter de nouvelles fonctionnalités au langage, en particulier les "types statiques" qui existent dans des langages institutionnels tels que Java ou C#.

Le langage JavaScript ne propose que des types "dynamiques", cette flexibilité peut poser problème, en particulier dans le cadre de gros projets.

Dans le but d'offrir aux développeurs web le confort et la sécurité des "types statiques", 2 concurrents s'opposent farouchement: TypeScript, créé par Microsoft et Flow, créé par Facebook, et utilisé en interne par Facebook sur de nombreux projets.

TypeScript, largement en tête en 2016, conserve l'avantage sur son rival en 2017. De nombreux projets utilisent TypeScript, à commencer par Angular et l'intégration facile avec l'éditeur de texte VS Code joue en sa faveur.

Pour mieux comprendre les différences, nous vous recommandons cet article de James Kyle: A Comparison Between Adopting Flow or TypeScript

Pour construire une application web moderne, les développeurs ont besoin d'un outil capable d'assembler et de transformer diverses parties (templates, code JavaScript écrit dans un dialecte donné, styles...) et d'optimiser le tout dans le but de rendre l'application web performante. Ce sont ces outils de construction que nous analysons ici.

La plus grosse surprise de l'année est l'arrivée de Parcel qui détrône Webpack, le roi incontesté de la catégorie.

Lancé en août 2017, Parcel a connu un départ fulgurant avec 14 000 étoiles ajoutées sur GitHub en l'espace de quelques mois.

Alors que Webpack est basé sur tout un éco-système d'extensions appelées loaders, Parcel promet un usage extrêmement simple, sans aucune configuration nécessaire.

Ne faisons pas dire à ces chiffres ce qu'ils ne disent pas, Webpack reste extrêmement populaire et est inclus par de nombreux autres projets, en particulier Gatsby et Create React App.

Alors que Parcel et Webpack ciblent les développeurs d'applications web, Rollup, cible les créateurs de "librairies".

C'est ainsi que les créateurs de React ont migré leur processus de construction de Browserify vers Rollup en 2017, comme expliqué dans cet article issu du site officiel.

Tout comme Parcel, Poi mise sur une grande simplicité d'usage mais ne concerne (pour l'instant) que les projets créés avec React, Vue.js ou Preact.

Jest, créé par Facebook pour tester les applications React, a évolué très vite au cours des derniers mois (plus de 22 versions majeures sont sorties !) et s'est imposé comme le framework de test le plus populaire en 2017.

Jest est devenu une solution de test complète qui peut être utilisée aussi bien côté client que côté serveur.

Ses points forts:

• Pas de configuration nécessaire
• Très confortable du point de vue du développeur (Jest détecte les changements sur les fichiers de manière intelligente, les compte-rendus d'exécution sont très lisibles...)
• Syntaxe similaire à celle de Mocha, en particulier les mots-clefs describe et it sont connus de nombreux développeurs.
• Pas de librairie supplémentaire pour écrire les tests, tout est inclus dans Jest.
• Possibilité unique d'enregistrer automatiquement les réponses attendues aux futurs tests (snapshots)

AVA, le projet numéro 1 l'an dernier, glisse en seconde position cette année.

C'est l'un des innombrables projets de Sindre Sorhus qui l'utilise comme solution de test pour ses propres projets.

Par rapport à Jest, AVA est une solution plus légère qui privilégie les performances en exécutant les tests en parallèle, et utilise une syntaxe proche de standards utilisés par des solutions telles que Tape.

Nous parlons ici des éditeurs de texte issus de projets open-source et utilisant des technologies web.

VS Code, créé par Microsoft et Atom, créé par GitHub, sont 2 applications construites à partir d'Electron une plateforme très populaire pour le développement d'applications desktop pour Windows aussi bien que pour MacOS.

Les 2 projets étaient au coude-à-coude en 2016 mais VS Code a pris un avantage déterminant en 2017.

VS Code progresse très vite, chaque mois apporte son lot d'innovations.

Sans devoir installer aucune extension, les développeurs disposent de toutes les fonctionnalités dont ils ont besoin:

• Integration avec Git
• Saisie assistée pour beaucoup de choses: le language JavaScript bien sûr, mais aussi les noms de fichiers en local, les noms de package installés depuis NPM...
• Syntaxe React prise en compte
• Ligne de commande intégrée

Si l'on ajoute Prettier à VS Code sans oublier d'activer l'option pour formater automatiquement le code à chaque enregistrement, on obtient la combinaison parfaite pour écrire du code dans un confort absolu !

Il n'y a toujours pas de consensus à propos de la meilleure façon de manipuler les styles d'une application construite avec React.

Il est possible d'utiliser des ensembles de composants React qui intègrent déjà leurs propres styles: c'est la cas de solutions telles que Material UI ou Ant Design. Cette solution est très pratique à condition que les besoins soient plutôt standards et ne nécessitent pas trop de personnalisation.

Il est aussi possible d'opter pour l'intégration d'une feuille de styles à l'ancienne, en utilisant le très célèbre Bootstrap ou encore Bulma, et en jouant avec la propriété className des composants pour associer les bons styles.

Mais dans ce cas les composants dépendent d'un contexte global, ils ne sont plus atomiques, ce qui rend le partage, les tests plus difficiles. Sans parler des risques de conflit entre les composants qui partagent des styles communs... jusqu'à ce qu'un besoin de personnalisation fasse jour. Un casse-tête bien connu des développeurs Web !

C'est la raison pour laquelle une nouvelle catégorie de solutions a émergé récemment: "CSS dans JavaScript" ou "Feuilles de styles en JavaScript".

Mark Dalgleish, l'auteur de CSS Modules, a écrit un excellent article qui explique l'intérêt de cette approche: Un language de style unifié.

Les Générateurs de Site Statique sont des outils capables de générer un ensemble de fichier HTML, CSS et JavaScript qu'il est possible de déployer sur n'importe quel serveur web.

De tels sites, dits statiques, ont l'avantage d'être performants, robustes et faciles à maintenir... à condition d'utiliser l'outil adéquat!

Numéro 2 en 2016, Gatsby tient sa revanche en 2017. Il permet de construire des sites web statiques en profitant du vaste éco-système React.

Cette année React Static est le nouveau venu dans la catégorie. Inspiré par Create React App, il propose une approche plus légère que Gatsby en misant sur la simplicité et les performances.

Observons que les projets Next.js et Nuxt, mentionnés précedemment parmi les éco-systèmes React et Vue, peuvent aussi être utilisés en tant que Générateurs de Site Statique.

Quand les historiens du futur jetteront un regard sur l'historique de GraphQL, 2017 sera probablement un point clé.

Des compagnies importantes telles que le New York Times ont commencé à adopter GraphQL, et sur le plan des librairies Relay et Apollo (les deux principales librairies client GraphQL) ont toutes les deux sorti des versions majeures cette année.

A part ces deux acteurs majeurs, d'autres compagnies telles que Graphcool ont aussi sorti une floppée d'autres outils et librairies, et les frameworks full-stack adoptant GraphQL tels que Vulcan commencent également à créer leur propre niche.

Il est aussi important de mentionner que le générateur de sites statiques le plus populaire de l'année, Gatsby, utilise également GraphQL en tant que maillon dans sa chaîne de traitement de données.

Avec autant de nouveaux entrants dans la galaxie GraphQL, ce n'est qu'une question de temps avant que cette technologie devienne une alternative valable à REST.