Pour afficher une page web, le serveur envoie au navigateur : du HTML pour le contenu, du CSS pour définir le style et du JavaScript pour ajouter de l’interactivité. En 2017, ce dernier point constitue un élément important, voire central, dans le développement d’une application web. De ce fait, de nombreux outils, techniques, langages et paradigmes ont été développés et popularisés lors de ces dernières années. Nous allons ici en exposer une vue d’ensemble.
Aujourd’hui, énormément d’information est disponible sur internet à ce sujet, et il peut être difficile de trouver du contenu à jour et ordonné. La suite de cet article propose aux développeurs qui souhaitent s’initier au JavaScript moderne un aperçu de l’environnement typique pour se mettre en route.
Le développement front-end
Dans le développement d’un site web, le terme de « front-end » désigne la partie du code exécutée sur le client, généralement un navigateur. Il est opposé au « back-end », qui désigne la partie serveur de l’architecture du code et des bases de données.
Initialement, les pages web étaient presque entièrement générées et envoyées par le serveur, et le code exécuté dans le navigateur était minimal et permettait de modifier le DOM par petites touches. Le DOM (Document Object Model) étant une représentation en mémoire de la page HTML construite par le navigateur sous la forme d’un arbre de données, avant de l’afficher à l’écran.
Ensuite, la bibliothèque jQuery est devenue populaire car elle facilitait les opérations de sélection, de modification et d’animation du DOM. Elle a ainsi grandement comblé et facilité l’usage des API JavaScript implantées par les navigateurs de manière inconsistante et verbeuse. De plus, les requêtes « AJAX » se sont démocratisées, permettant de faire appel depuis le code client à des services retournant des données par HTTP au format JSON ou XML afin de les afficher dynamiquement.
Au fur et à mesure, les développeurs ont voulu ajouter de plus en plus d’interactivité, de fonctionnalités et de temps-réel dans leurs applications. Aussi, un rechargement de page complet pour chaque événement s’avère être trop lourd pour le ressenti utilisateur. On s’est aussi rendu compte que le rendu des pages pouvait très bien être réalisé par les navigateurs sur des machines modernes. On peut ainsi délester les serveurs de cette tâche, ainsi que de multiples traitements métiers, plus ou moins légers.
Ainsi, de plus en plus d’applications sont développés comme des « Single-Page Applications » (SPA) pour lesquelles il suffit de télécharger une seule fois la première page et toute la navigation est gérée dynamiquement.
C’est donc pour ces raisons que le code côté client s’est largement développé, et le développement en est devenu complexe.
Aujourd’hui, les technologies commencent a être matures, stables et robustes pour le développement front-end. Nous allons les survoler dans la suite de cet article.
Les frameworks JavaScript
Pour faciliter le développement (et la maintenance) d’applications front-end, dont le code est de plus en plus important, et éviter le « spaghetti code », des frameworks JavaScript se sont développés. Ils permettent de favoriser certaines bonnes pratiques, mettent en avant des architectures avec des paradigmes particuliers. Ils proposent à travers leurs bibliothèques des fonctions utiles, et permettent ainsi de ne pas réinventer la roue à chaque fois.
Les trois principaux frameworks utilisés aujourd’hui sont Angular, React et Vue. Il y en a beaucoup d’autres, dont une partie qui ont été créés avant (Ember, Backbone, Marionnette…).
Angular
Angular est le premier de ces trois-là, il a été lancé et est maintenu par Google, et il est le plus complet car il se suffit à lui-même pour la construction d’application complexe. Il se base sur un modèle Model-View-ViewModel (variante du MVC) et introduit certains concepts de modules, contrôleurs, directives, filtres, routes… de façon à permettre le développement d’application de manière professionnelle et modulaire.
Il y a une grande différence entre la version 1 (communément appelée « AngularJS ») et les versions supérieurs (simplement « Angular ») puisque le framework a été entièrement réécrit et n’est pas rétrocompatible.
React
Quand Facebook a lancé React, cela a complètement changé les paradigmes de développement web front-end. Premièrement, cela a eu lieu grâce à l’introduction du concept de Virtual DOM. Celui-ci correspond à une représentation virtuelle, en mémoire, du DOM réel et les éléments qu’il comporte, copié à l’identique en incluant des données dynamiques. Ainsi, le code peut directement modifier ce DOM virtuel de manière très rapide, et un algorithme s’occupe automatiquement de mettre à jour uniquement les éléments qui ont été modifiés dans la page.
Un autre changement de mentalités que React a apporté est qu’il est dorénavant accepté et même parfois encouragé d’intégrer le HTML dans le code JavaScript, notamment à travers le langage JSX qu’il a introduit, et l’approche par composants que l’on assemble pour créer des applications. Aussi, React a popularisé certains bénéfices de la programmation fonctionnelle.
Il existe aussi des alternatives très similaires à React, plus légères en termes de volume des bibliothèques et de rapidité ou performance : Preact et Inferno.
React, en lui même, suffit pour le développement de petites applications web, mais il ne se concentre que sur la partie Vue du modèle MVC. Il est devenu coutume de l’associer à d’autres bibliothèque comme Redux, Flux ou MobX pour gérer les flux de données dans l’application et mieux pouvoir raisonner dessus.
Vue.js
Vue.js est un framework, qui comme React se concentre sur la partie Vue (comme son nom l’indique), se base sur un Virtual DOM et le développement par composants, mais promet de meilleures performances. Au lieu du JSX (HTML dans le JavaScript), Vue.js propose l’utilisation d’un système de templates, sous la forme de HTML amélioré.
Un des avantages de Vue.js est que le framework est plutôt simple à apprendre et à utiliser. Il est même facile de l’intégrer à une projet existant petit à petit. Aussi, il n’est pas dépendant d’une grande entreprise comme React, et présente moins de risque par rapport à sa licence.
L’environnement de développement
Auparavant, un simple fichier JavaScript contenant tout le code ajouté par un lien dans la page HTML suffisait à créer une page simple. Avec la complexification des applications web, des outils sont devenus populaires pour aider les développeurs.
NodeJS et NPM
NodeJS est un outil qui permet de faire exécuter du code JavaScript en dehors d’un navigateur. Il est souvent utilisé pour créer un serveur avec du JavaScript, et ainsi ne réaliser le développement de toute la stack avec un seul langage.
Pour le développement front-end, NodeJS est utilisé pour organiser ses fichiers et son code dans son environnement de travail.
NPM est le gestionnaire de paquets associé à NodeJS et il en est une grande force. Il permet de rapidement et simplement importer des modules, des bibliothèques, et d’en répertorier l’utilisation et la version. C’est aussi un avantage pour le développement par équipe. Yarn, par Facebook, en est une alternative.
Ces outils-là sont devenus indispensables pour le développement front-end.
Les Task Runners et Bundlers
Aujourd’hui, le code front-end des applications web est décomposé dans plusieurs fichiers, il est modulaire et peut faire appel à de multiples bibliothèques. Pour pouvoir gérer tout cela, des outils ont été popularisés. Ces outils utilisent NodeJS.
Tout d’abord sont apparus les Task Runners : Grunt (configuration en JSON), puis Gulp (configuration en JavaScript et flux d’exécution). Ils permettent d’automatiser de multiples tâches qui sont récurrentes dans le développement front-end : par exemple la concaténation (c’est-à-dire la fusion) des différents fichiers d’un projet afin de réduire le nombre d’imports de ces fichiers (et éviter la multiplication des requêtes HTTP/1). On peut ainsi avoir 50 fichiers JavaScript pour développer et se retrouver à en avoir un seul à importer en production !
Une autre utilisation courante des Task Runner est la minification des fichiers afin d’en réduire le volume, ou encore la transpilation qui permet de traduire d’un langage de programmation à un autre. Ces tâches peuvent aussi être configurées pour le HTML ou le CSS.
Une fonctionnalité utile, « watch », permet de lancer l’exécution des tâches après chaque modification des fichiers.
En tant qu’alternative à ces Task Runners, il est aussi possible de directement utiliser NodeJS et des scripts à exécuter, sans intermédiaire. Cette méthode peut donner le même résultat, avec parfois de meilleures performances.
De nos jours, même si on utilise toujours les Task Runners, on utilise le plus souvent des Bundlers. Ces derniers s’occupent simplement de parcourir tous les modules du projet et de les assembler pour qu’ils puissent s’exécuter dans les navigateurs. Les principaux Bundlers sont Webpack, Browserify et Rollup.
Webpack a par exemple, via son module webpack-dev-server, un serveur de développement qui a l’avantage d’inclure une fonction Hot-Reload. Cela permet de rafraîchir la page du navigateur après chaque modification du code.
Certains frameworks proposent des outils en ligne de commandes pour pré-configurer un environnement de travail avec ces outils : vue-cli, create-react-app…
Les langages
Le langage JavaScript est basé sur les standards ECMAScript et n’est pas implanté de manière similaire dans tous les navigateurs. En particulier, certaines API et certaines fonctionnalités du langage ECMAScript2015 (aussi appelé ES6) ne sont pas comprises par certains navigateurs. Il faut toujours prendre en considération les moteurs d’exécution JS des navigateurs mobiles très variables et les anciennes versions d’Internet Explorer dans les entreprises.
Pour pouvoir travailler avec les dernières capacités du langage, il est possible d’utiliser Babel pour « transpiler » du code écrit de façon moderne vers une version plus communément compréhensible par tous les navigateurs.
Un autre langage qu’il est possible d’utiliser est le TypeScript. Ce langage est notamment utilisé pour les applications avec Angular (à partir de la version 2), mais peut s’avérer utile dans de nombreux cas.
Le TypeScript est une évolution du JavaScript et sa principale caractéristique est de travailler avec des données typées strictement.
CoffeeScript, qui est une version de JavaScript reprenant le style des langages comme Ruby, est en revanche de moins en moins utilisé malgré une grosse popularité à une époque.
Les tests
Toute application qui grandit doit s’assurer qu’elle est robuste. Pour éviter les bugs et autres cas particuliers, on se doit d’écrire des tests unitaires.
Dans le monde du JavaScript, les outils pour réaliser des tests ont été développés. Malgré que cette partie du développement ne soit pas celle qui apporte le plus de satisfaction, une majorité et de plus en plus de développeurs JS déclarent écrire des tests.
Mocha (combiné à Chai) et Jasmine sont les deux bibliothèques les plus populaires. On les appelle aussi des « frameworks de test » et elles sont à peut près similaires. On les associe avec d’autres outils comme Karma (Test Runner) ou encore PhantomJS (navigateur sans interface graphique).
L’exécution des tests peut s’effectuer automatiquement dans les processus d’intégration continue avec Jenkins, Travis ou Bamboo.
Conclusion
La communauté JavaScript (font-end) évolue très vite et même si elles deviennent matures, les technologies utilisées sont encore récentes. Néanmoins, on se dirige dans la bonne direction pour toujours améliorer le développement d’applications web.
Dans cet article, nous avons évoqué divers frameworks et outils qui sont utilisés dans l’industrie, mais il en existe beaucoup d’autres.
Pour démarrer, il est conseillé de ne pas tout vouloir essayer dès le début pour éviter de se perdre. Il vaut mieux commencer par un projet simple et rajouter des surcouches au besoin.
Sources
https://www.infoq.com/articles/state-of-javascript-2016
https://medium.freecodecamp.com/a-roadmap-to-becoming-a-web-developer-in-2017-b6ac3dddd0cf
http://stateofjs.com/2016/introduction/