Les technologies frontend

Le monde du développement web est vaste. Lorsqu’on souhaite se spécialiser dans la partie frontend, on entend souvent revenir les mêmes technologies: Angular, React et VueJS.

Difficile en tant que débutant de faire un choix entre ces 3 mastodontes. Lequel choisir ? Va-t-il être simple à apprendre ? Le marché de l’emploi sur celui-ci n’est-il pas déjà surchargé ? Répondra-t-il à tous mes besoins ? Ne serais-je pas limité à un certain moment avec ?

Ce sont des questions que nous nous sommes tous posés. Je vais essayer de donner quelques indications mais je pense que comme toutes technologies, il faut savoir les essayer et les comparer soi-même pour comprendre comment elles pourront nous être utile dans notre sac à dos de développeur mais aussi si on appréciera de travailler avec..

Le chouchou des développeurs : React

React est une bibliothèque développée par Facebook depuis 2013. Son rôle est de faciliter la création de SPA Single Page Application, comprendre les applications mono page). Elle est basée sur le langage Javascript et sur la création de composants, du code qui permet de créer des choses visuelles puis de pouvoir les réutiliser à l’infini. Malgré tout, il existe une extension syntaxique appelée JSX permettant de développer plus simplement du code React mais non obligatoire contrairement à TypeScript qui est indissociable d’Angular.

React est ultra léger, de plus la courbe d’apprentissage est exponentielle dès le départ car facile à prendre en main. Un développeur saura donc rapidement développer avec React, cependant, il ne saura pas forcément bien développer avec React et c’est toute la difficulté de ces bibliothèques.

À mon sens, React est extrêmement optimisé pour la création d’application dites « mobile first », c’est à dire des applications qui ont pour vocation d’être utilisées en grande partie sur téléphone mais qui pourront aussi être utilisées dans un navigateur bureau.

Il existe 2 points importants à connaitre. React crée et gère son propre DOM Virtuel pour rendre les applications contrairement à Angular qui utilise le DOM d’origine. De plus, React possède une liaison de données dite unidirectionnelle (one-way databinding). Cela signifie que le Javascript peut envoyer des informations à l’HTML pour le modifier mais l’HTML lui ne peut pas envoyer de valeurs en temps réel à la partie Javascript pour effectuer une modification. Il est alors nécessaire de passer par les événements connus en Javascript.

Prenons l’exemple d’un champ texte (input). Je souhaite pré-remplir ce champ avec une valeur récupérée en base de données et stockée dans mon fichier Javascript. Dans mon template React, je vais pouvoir utiliser le contenu de cette variable pour pré-remplir le champ texte, super !

Maintenant, je souhaiterais que tout changement dans ce champ soit répercuté dans la variable. C’est ici que le one-way databinding trouve sa limite. Il va être nécessaire d’ajouter un listener sur le champ texte afin d’écouter lorsque celui-ci va changer pour ensuite avoir une fonction qui mettra à jour notre fameuse variable.

L’avantage est ici d’être certains de toujours travailler avec des variables immuables (qui ne changeront pas en cours de route) puisque pour générer un changement, il est nécessaire de coder le fonctionnement, le développeur est donc alerté sur le fait que la variable peut changer de contenu car c’est lui qui a mis en place le changement. Par contre, on se retrouve forcément avec un processus un peu plus lourd que de la liaison de données bidirectionnelles.

Comme j’ai pu l’expliquer auparavant, React étant une bibliothèque dédiée à la création d’interface utilisateur rapide et ergonomique, il sera souvent nécessaire de lui coupler d’autres bibliothèques pour se rapprocher d’un fonctionnement framework et ajouter des fonctionnalités importantes, je pense notamment à Flux (alternative du modèle MVC ou encore Redux (l’équivalent des services chez Angular).

Le framework le plus boudé: Angular

Angular est un framework développé par Google depuis 2016 et il est le grand frère d’AngularJS qui lui a été développé à partir de 2009. Tout comme React, son rôle est de faciliter la création de SPA Single Page Application). L’une de ces particularités repose sur le fait qu’il utilise la technologie TypeScript pour créer du code.

TypeScript est développé par Microsoft et représente ce qu’on appelle un surensemble du langage Javascript. Il permet d’écrire du Javascript avec des fonctionnalités en plus et des règles permettant de simplifier le debuggage (si difficile parfois avec Javascript).

Parmi les fonctionnalités phares, on retrouve le typage des variables (dire qu’une variable ne pourra avoir que des chiffres, des tableaux ou une instance de classe par exemple), la création de véritables classes permettant l’utilisation des notions de programmation orientée objet ou encore l’utilisation de paramètres optionnels dans les fonctions.

Angular possède 2 inconvénients majeurs qui en font une technologie boudée: la courbe d’apprentissage et le fait qu’il soit lourd à mettre en place. Devenir développeur Angular demande beaucoup de patience et souvent quelques notions profondes de programmation pour correctement comprendre tous les patterns. Rappelons-le, Angular est un framework, c’est à dire qu’il vient avec une grande dose de règles, de process, de manière de fonctionner qui permettent toute la rigidité de ce dernier et son efficacité une fois correctement pris en main.

Il y a donc énormément d’informations à comprendre lorsqu’on se lance dans son apprentissage, ce qui décourage la plupart des développeurs et rend la courbe d’apprentissage très lente au départ mais incroyablement exponentielle lorsqu’on a en main le framework.

Contrairement à React, Angular possède le two-ways databinding (la liaison de données bidirectionnelle) qui une fois correctement maîtrisée permet de gagner énormément de temps et de flexibilité dans l’interface. Tout comme ses concurrents, Angular utilise le système de composants pour rendre réutilisables une grande partie de l’application. Cependant, il va souvent moins loin dans la découpe: on parle souvent de développement respectant le design atomique, facilement applicable avec React car c’est une bibliothèque de création d’interfaces souple mais plus difficilement applicable avec Angular dû à son architecture logicielle.

C’est à mon sens une technologie qui permettra d’avoir un projet beaucoup plus péren dans le temps mais beaucoup moins personnalisable visuellement. Je la préférerais largement pour la création d’applications dites « dashboard » ou « intranet » lourd. C’est d’ailleurs pour ça que la plupart des banques travaillent jusqu’à présent sur une stack Java/Angular car beaucoup plus robuste dans le temps..

L’outsider qui mérite notre attention : VueJS

VueJS est un framework progressif, comprendre une bibliothèque possédant tous les outils pour correspondre aux attentes d’un framework, développé par Evan You depuis 2014. C’est une technologie extrêmement suivie, prenons pour indicateur le repo Github qui compte pas moins de 179 000 étoiles contre 164 000 étoiles pour React au moment où j’écris cet article. VueJS se veut être un mixte entre Angular et React, combinant les avantages de chacune de ces 2 technologies. Cependant malgré la hype autour de ce framework beaucoup lui tourne le dos car il n’est pas maintenu et influencé par une grosse société contrairement notamment à son concurrent direct React qui lui est maintenu par Facebook..

Tout comme React, Vue utilise le langage Javascript mais il est possible d’utiliser l’extension syntaxique JSX pour développer les templates et composants plus rapidement. Il utilisera lui aussi un DOM Virtuel pour rendre les applications mais intégrera le système de liaison de données bidirectionnelles comme Angular.

Ce qui est intéressant avec VueJS, c’est que certaines sociétés ont décidé de créer un framework complet sur la base de cette bibliothèque. C’est le cas de NuxtJS ! Bonus: il a pris naissance en France à Bordeaux !

Personnellement, je pense que VueJS est une étoile montante à surveiller de très près mais NuxtJS encore plus ! Dernièrement, la NASA a annoncé avoir basculé son site sous cette technologie et on retrouve sur la page d’accueil du framework des sociétés française largement connues comme « Arte » ou encore « Maison du monde »

Conclusion

Finalement, il n’y a pas de choix miracle dans l’utilisation d’une technologie. Il est important de comprendre comment chacune fonctionne et d’être en mesure de comprendre les attentes finales d’un projet.

Comme je le disais, Angular sera beaucoup plus intéressant pour des applications web lourdes comme des applications type « banque » ou « intranet », là où React ou VueJS seront beaucoup plus performants dans la création de portfolio, de blog ou encore de page e-commerce car leur structure orientée interface utilisateur permettra d’avoir un taux de conversion bien meilleure qu’une application Angular.