Accueil / Frameworks JavaScript

Frameworks JavaScript

Dans le billet précédent, je constatais que les langages informatiques les plus recherchés actuellement sont JavaScript, Python, Java, C, C++, C#, PHP, Swift, Kotlin, et Ruby. Je me suis d’abord posé une série de questions, dont les réponses dépendaient de mes besoins actuels. Puis j’ai décidé de me lancer dans le code avec JavaScript (JS pour les intimes). Désormais, une nouvelle question se pose. Parmi les nombreux frameworks JavaScript, par lequel vais-je donc commencer pour poursuivre mon apprentissage?

Au sommaire

1- Frameworks, kesako?

La définition de l’agence 1min30 est bien plus claire que celle de Wikipedia. Plutôt qu’une longue citation, voici donc une capture d’écran :

L’objectif d’un framework est généralement de simplifier le travail des développeurs informatiques, en leur offrant une architecture “prête à l’emploi”, qui leur permette ainsi de ne pas repartir de zéro à chaque nouveau projet.

Il existe ainsi des frameworks pour à peu près tout, et ce n’est pas une spécificité de JavaScript. D’autres langages ont aussi leurs frameworks :

Quand apprendre un framework ? – Mike Codeur

↑ — Revenir au sommaire

2- La diversité des frameworks JS

Toutefois, JavaScript est particulièrement bien doté en frameworks. En effet, JavaScript remporte la palme de la polyvalence. Ce constat a d’ailleurs pesé dans mon choix. C’est bien simple, des frameworks lui sont associés pour à peu près tout :

  • Premièrement développer du front-end avec Vue.js, React, Angular
  • Ensuite gérer du back-end avec NodeJS (Payal, LinkedIn, Airbnb, Uber, Netflix, Yahoo, Groupon… utilisent NodeJS)
  • Mais aussi du développement mobile multiplateforme avec React Native de Facebook ou encore Ionic, compatibles a la fois avec iOS et Android (Uber ou Skype sont en React Native)
  • et même des applications de bureau avec Electron

Néanmoins, il n’est pas raisonnable de vouloir toucher à tous les langages de programmation, au lieu d’en choisir un pour l’approfondir, quitte à en apprendre d’autres plus tard. Ainsi cela m’a conduit à me concentrer sur JavaScript. De même, il serait hasardeux de vouloir toucher à tous les frameworks JS plutôt que d’en choisir un pour l’approfondir.

↑ — Revenir au sommaire

3- Les frameworks front-end de JS

Plus on utilise de JavaScript dans un site, plus le code devient difficile à organiser. C’est la raison pour laquelle sont nés les frameworks pour JS. Un autre point important est que certaines fonctionnalités communes à tous les projets Web, qu’elles soient basiques (par exemple ajouter un gestionnaire d’événements, effectuer un rendu conditionnel, boucler sur des éléments), ou très très avancées (par exemple l’optimisation des rendus par des algorithmes très performants et un DOM virtuel ou incrémental) ont déjà des réponses optimales. Les recoder est une perte de temps et risque d’aboutir à une solution bien moins performante. Pourquoi ne pas profiter des dizaines de milliers d’heures d’ingénieurs experts qui ont résolu ces problèmes pour nous ? Ne pas utiliser un framework est donc aujourd’hui impensable.

Néanmoins, comme je l’expliquais dans le précédent article, mon objectif est de poursuivre dans le développement web. En outre, venant du webdesign, j’ai une appétence particulière pour le front-end.

Les trois premiers frameworks de la liste vont donc plus particulièrement m’intéresser : Vue.js, React, Angular. Je pourrai toujours voir Node.js plus tard, au moment de passer développeur Full Stack.

↑ — Revenir au sommaire

4- Les frameworks Angular, React et Vue.js

Tout d’abord, les trois frameworks front-end vedettes du moment, ont eu de nombreux prédécesseurs.

4-1- Un peu d’histoire

Les anciens*

  • 1995 – JavaScript est né quelques années à peine après le web lui même. Tim Berners-Lee et ses collègues du CERN en Suisse ont en effet mis au point le Web et l’HTML en parallèle, entre 1989 et 1991.
  • 2006 – jQuery, Script.aculo.us, Moorools, YUI, pour régler les problèmes de compatibilité entre navigateurs. Cependant, ces problèmes se posent moins aujourd’hui.
  • 2009 – AngularJS de Google, Backbonejs (2010), Embersjs (2011) : Les Single Page Applications (SPA) sont entièrement centrées sur le JS. On ne quitte jamais la page d’origine, dont les éléments se mettent à jour automatiquement. Exemples : Facebook, Gmail…
    Node.js est né également en 2009 : Javascript côté serveur (ie Back-end).
  • 2012 : Agacé par la prolifération des frameworks JS, Eric Wastl qui est un petit plaisantin, propose Vanilla JS, « le framework le plus léger et le plus utilisé au monde ».
    Ce n’est pas faux : le fichier de VanillaJS pèse 0 octets. En informatique, « vanilla » désigne la version standard d’un programme informatique : ni patché, ni modifié.
    En clair, Vanilla JS, c’est donc le JavaScript standard. La fameuse blague a toujours autant de succès au fil des années, et un blogueur a même réalisé une traduction en français du site d’origine.

↑ — Revenir au sommaire

L’arrivée des Web Components

  • 2011 : Apparition des composants Web (web components), qui sont devenus en quelques années un nouveau standard du web, et serviront de base à la nouvelle génération de Framework JS. Ils permettent d’étendre les tags HTML existants (div, form, input, etc) pour créer de nouveaux composants HTML.
    Des ingénieurs de chez Google ont voulu rendre accessibles ces Web Components en créant une surcouche à ces technos. Cette surcouche, nommée Polymer (2013), était vouée à s’alléger proportionnellement à la couverture des navigateurs. Aujourd’hui, la librairie Polymer sert en partie de polyfill pour les anciennes versions de navigateurs. Mais la version 3 continue à être également utilisée pour créer de nouveaux composants web, à l’instar des frameworks qui sont venus après lui, et avec lesquels il peut même s’implémenter. Autre bibliothèques de Web components à connaître : X-Tag, développé par Mozilla puis repris par Microsoft.
Google Polymer

↑ — Revenir au sommaire

Les modernes*

  • 2013 – Après le rachat d’Instagram, Facebook lance React, basé sur un « Virtual DOM ».
  • 2014 – Un ancien de Google, Evan You, qui voulait un framework léger et flexible, développe Vue.js. Le plus grand site de commerce en ligne du monde, Alibaba, l’a adopté.
  • 2016 – Google crée Angular, à ne pas confondre avec le AngularJS de 2009 ! La firme de Mountain vue a en effet totalement réécrit son framework, qui n’a donc plus rien à voir avec la version de 2009. AngularJS n’est d’ailleurs plus maintenu.

↑ — Revenir au sommaire

Les framework-compilateurs, l’avenir ?

  • 2019 : Rich Harris sort la version 3 de Svelte, le dernier venu des Frameworks JS. Conçu pour le front, Svelte peut en outre fonctionner en tandem avec le framework back Sapper. Il propose un cadre de travail, avec ses méthodes et ses fonctionnalités, mais en plus il va compiler votre code en temps réel en JavaScript natif! C’est donc plutôt un hybride, à la fois framework et compilateur. Aucune librairie à embarquer, pas de DOM virtuel. C’est un peu la même idée que les préprocesseurs CSS, tels que Sass ou Less, mais appliquée au JavaScript. Pourquoi personne n’y avait pensé avant? C’est peut-être le précurseur d’une troisième génération de frameworks JS… Une affaire à suivre !
Svelte

Titres* : en référence à la Querelle des Anciens et des Modernes en littérature au XVIIe siècle

↑ — Revenir au sommaire

4-2- Frameworks Angular, React et Vue.js : le comparatif

Tous les frameworks front-end sont d’accord sur la manière d’organiser les choses : Les composants web. L’idée est ainsi de concevoir notre application sous forme de blocs indépendants réutilisables et fonctionnant de manière isolée. On peut considérer les composants comme des balises HTML améliorées.

Mais la problématique reste toujours la même : on souhaite rendre nos composants réactifs. Lorsque l’état d’un composant change, l’interface de ce dernier doit changer. C’est donc sur la mise en place de cette réactivité que les frameworks ne sont pas d’accord.

Web components

↑ — Revenir au sommaire

Ippon propose une liste exhaustive de critères pour bien choisir un framework. Voici donc les points saillants qui ressortent de mes lectures :

Performances

Pas de différence notable. Les trois sont très rapides, fiables et adaptés à de gros projets :

  • Google utilise Angular, tout comme Ryanair, Bose ou Rockstar Games
  • Facebook se sert de React, mais aussi AirBnB, Uber, Netflix, Paypal, Twitter ou encore Gutenberg de WordPress
  • Alibaba mais aussi Nintendo, Baidu, Expedia, ou Gitlab ont adopté Vue.js.

On constate néanmoins de plus en plus de remplacements d’Angular par Vue.jsS ou par React.

Alibaba : le plus gros site de e-commerce du monde, plus grosse valorisation boursière de l’histoire est… chinois, et déjà présent en France.

DOM Virtuel et JSX en React

Du fait du virtual DOM dans React, on doit préciser quel composant doit être rechargé à chaque changement. Avec Vue.js, qui a aussi un DOM virtuel, c’est automatique.

Pour simplifier le travail avec son Virtual DOM, React propose une syntaxe supplémentaire : le JSX. Cela nécessite donc un apprentissage supplémentaire. Dans Vue.js, tout HTML/CSS est valide et les préprocesseurs sont utilisables (Pug, LESS, SASS, Babel…). Vue.js reconnait JSX mais c’est facultatif.

DOM virtuel

TypeScript et RxJS dans Angular

TypeScript est le langage sur lequel est basé JavaScript. Son usage est obligatoire sous Angular, mais facultatif sous Vue.js et React.

RxJS est une librairie de programmation réactive pas facile à aborder lorsque l’on débute. Toutes les entreprises technologiques utilisent ce nouveau paradigme (GAFAM et Netflix par exemple).

JavaScript vs TypeScript

MVC – structure du code

Angular et Vue.js utilisent le design patern MVC (Modèle-vue-contrôleur). Le code est donc plus structuré, avec des composants séparés de leur visuel. Avec React, il y a plus de flexibilité, mais moins de structure : il faut se mettre d’accord quand on travaille à plusieurs. Angular est très cadré, Vue.js et React sont plus libres.

Modèle-vue-contrôleur

Écosystème

  • Angular est un tout-en-un qui a donc besoin de peu de choses extérieures.
  • Avec React, c’est tout l’inverse. On n’installe que ce qui nous intéresse, mais on peut vite se perdre dans son écosystème pléthorique. React peut ainsi proposer dix bibliothèques pour une même chose (développées par la communauté), avec parfois des problèmes de compatibilité.
  • Vue.js a beaucoup de choses intégrées, mais moins qu’Angular. Parmi les choses qu’on peut lui ajouter, il y a souvent un seul outil pour une seule fonction – gestion d’état, routage restent ainsi sous maintenance officielle. Il en résulte une expérience de programmation plus évoluée et une intégration plus poussée avec Vue.js (toutefois moins qu’avec Angular).
Une partie de l’écosystème de React

Communauté, popularité, employabilité

  • Angular et React sont très populaires, alors que Vue.js est le petit nouveau qui monte.
  • Angular est surtout recherché dans les pays latins et les grands groupes
  • On trouve plutôt React dans le monde anglo-saxon et les startups
Statistiques sur StackoverFlow 

↑ — Revenir au sommaire

Apprentissage

  • Angular englobe beaucoup d’outils, qui sont autant de choses à apprendre. Il est donc difficile d’identifier par quoi commencer, alors que tout est intégré. A cela s’ajoute l’apprentissage du Typescript.
  • React seul, c’est plutôt simple. Mais il faut ajouter une quantité de librairies, ce qui suppose de déterminer au préalable lesquelles choisir, puis d’en faire l’apprentissage. Le framework n’est donc pas si simple qu’il n’y parait. En outre, il faut apprendre JSX. A la fin, React peut devenir plus difficile qu’Angular.
  • Vue.js réunit en fait le meilleur des deux autres. Moins complexe au départ, il a plus de choses intégrées de base et moins d’outils à ajouter que React. Ni Typescript, ni JSX ne sont obligatoires. En outre, créé par un développeur pour les développeurs, Vue.js a la meilleure documentation technique.
Courbes d’apprentissage selon Dyma

Bonus : développement pour Mobiles et cross plateformes

React Native est pour l’instant plus développé et avancé que Vue Native, Weex ou Quasar.

En résumé…

↑ — Revenir au sommaire

5- Conclusion

Même si Vue.js est pour l’instant moins répandu dans le monde professionnel, sa facilité d’accès va être l’élément déterminant pour moi, avec des bonus pour ce choix :

  • Étant encore novice dans la programmation, le modèle MVC de Vue.js va me permettre de produire du code plus propre, mieux structuré et de prendre de bonnes habitudes, que je pourrai ultérieurement réinjecter dans un autre framework.
  • Le JSX obligatoire avec React, et le Typescript imposé par Angular, sont utilisables de manière facultative avec Vue.js. Je pourrai donc les apprendre dans un deuxième temps, avant d’éventuellement basculer sur l’un ou l’autre des concurrents. D’ailleurs, que ce soit Node.js, React, Vue.js, tout l’écosystème JavaScript se met progressivement au Typescript
  • Enfin, Vue.js permet de transformer petit à petit un site web existant en application.

Évidemment, ce choix ne correspond qu’à mes besoins. Je pense néanmoins que ce billet fournit suffisamment d’éléments pour faire votre choix, lequel correspondra à vos besoins. N’hésitez pas à nous en faire part dans les commentaires.

Pour finir, une conférence de Hubert Sablonnière au DevFest 2019 sur “Le Web, ses frameworks et ses standards
(Lien de secours : la même conférence au Devoxx 2019 : https://youtu.be/uFxVH5mFAKg )

↑ — Revenir au sommaire

Sources

jQuery, pour l’intérêt historique

Angular, React, Vue.js

Vue.js

Svelte, une affaire à suivre

Nous venons de passer de “les ordinateurs et les navigateurs web sont de plus en plus puissants” à “les applications web sont déployées sur des machines de moins en moins puissantes (objets connectés…)” sans nous en rendre compte. Et les outils à notre disposition aujourd’hui (React, Angular…) ont grandement amélioré la qualité et l’efficacité du développement de nos applications, mais pas forcément autant leur performance ou la taille des fichiers finaux.

↑ — Revenir au sommaire

Lisez aussi

↑ — Revenir au sommaire

2 commentaires sur “Frameworks JavaScript”

  1. Retour de ping : Algorithmique et algorithmes | InfoDocBib - Architecte de l'information

  2. Retour de ping : Quel langage informatique apprendre en 2020 ? Architecte de l'information

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *