15 alternatives à React, Angular ou Vue (1ère partie)

En matière de développement, il ne sert à rien de recommencer ce qui a déjà été très bien fait par d’autres. Il est préférable de partir d’une base construite par une très bonne équipe de développeurs open source plutôt que de tout refaire depuis le début. Encore faut-il choisir la bonne base. Et cela peut s’avérer presque aussi difficile que de tout reprendre de zéro. Le monde des frameworks web est très actif et il y a des dizaines de projets open source qui pourraient constituer un excellent départ pour tout nouveau projet. Pour rendre les choses encore plus difficiles, les équipes qui ont créé ces différents projets ont pris des routes diverses en raison de divergences philosophiques qu’ils jugeaient importantes. En considérant les autres frameworks, elles ont estimé qu’elles pouvaient faire bien mieux. React, Angular et Vue font partie des frameworks les mieux populaires en ce moment et les raisons de les choisir sont nombreuses. Mais depuis leur arrivée, d’autres frameworks les ont rejoints, parfois plus simples à utiliser, plus rapides ou plus robustes.

Dans la plupart des cas, les équipes des projets alternatifs ont créé quelque chose d’intéressant et de puissant en redéfinissant la nature du framework. La suppression de certaines fonctionnalités a parfois conduit à améliorer l’efficacité et à réduire la taille de la mémoire requise, permettant ainsi de démarrer plus vite ou d’être plus agile. Dans certains cas, elles ont ajouté certaines idées qui pourraient bien devenir un jour des standards. Voici une liste à explorer pour ceux qui auraient un peu de temps pour explorer certaines de ces options. Elles ne conviendront pas à tous et ne sont à l’évidence pas destinées à tous les usages, mais certaines peuvent représenter le meilleur choix pour certains projets. Pour les examiner, il convient d’élaborer une solide description de son application web, d’établir une tout aussi sérieuse description de ses différents cas d’usage, puis d’évaluer les outils listés ci-dessous avec ces éléments en tête. Il est possible alors de découvrir une approche particulière de concevoir le code que l’on trouvera intéressante. Ou bien de s’apercevoir que l’application que l’on prépare n’a pas besoin de certaines fonctionnalités présentes dans les frameworks les plus généralement utilisés. Il y a des dizaines de raisons possibles pour s’aventurer sur d’autres chemins que les sentiers battus. Tout simplement, l’un de ces frameworks peut être la réponse idéale pour une application donnée.

1 - Petit Dom

Si l’on aime l’idée d’un « modèle objet de document » (DOM) virtuel, mais que l’on ne veut pas des contraintes associées à l’univers React, Vue ou d’un autre framework vedette, Petit DOM peut constituer une réponse. On dispose d’un petit volume de code qui nous permet de manipuler une collection virtuelle de tags, puis de les migrer vers le véritable modèle objet de document. Pour tout le reste - structure des composants et rendu – c’est le développeur qui décide. S’il veut réaliser des composants sont simples, ou au contraire créer une hiérarchie de rendu hyper-complexe, Petit DOM est une base qui peut lui convenir parce que tout ce que fournit ce framework, c’est un outil pour virtualiser le DOM.

2 -Surplus

Le DOM virtuel ne convient sans doute pas à tout le monde. Il prend de la place. Donc, si les manipulations à faire ne sont pas trop complexes, le DOM officiel peut suffire à canaliser les instructions requises. C’est exactement ce que fait la bibliothèque Surplus. Elle prend toutes les balises JSX (JavaScript eXtension) les plus courantes et les compile dans un code qui va manipuler le véritable DOM. En d’autres termes, elle supprime les intermédiaires. Pas de niveau caché, juste une manipulation directe du DOM. Si le code de l’application que l’on veut développer est simple et suffisamment direct pour n’intervenir sur le DOM que de façon limitée, pourquoi s’embêter avec une étape de virtualisation.

3 - RE:DOM

Une autre option pour ceux qui ne veulent pas investir de mémoire dans un DOM virtuel, c’est d’utiliser RE:DOM, une bibliothèque de 2 Ko seulement. Celle-ci contient quelques routines de base qui permettent de créer tous les tags et composants avec quelques appels JavaScript tout simples. La syntaxe utilisée est ici plus proche de CSS. On peut donc, en quelques frappes au clavier, spécifier quelques tags élaborés avec des identifiants (ID) et des classes.

4 - Mithril

Toutes les alternatives proposées ici ne sont pas légères et minimalistes. Dans ce contexte, Mithril pourrait être décrit comme un framework de taille moyenne, bien qu’il ne pèse guère que 8 Ko environ. L’ensemble du code construit un DOM virtuel avec, comme pour les autres, un mécanisme de mise à jour efficace. Mais on trouve ici un jeu d’outils standardisés pour prendre en charge une partie des défis standards, comme le routage et les appels XMLHttpRequest. Les concepteurs du framework ont voulu que les projets Mithril soient relativement standardisés et ils ont estimé qu’ajouter ce code à la bibliothèque principale renforçait la standardisation. Si cela ne suffisait pas, ils ont également ajouté quelques structures de formatage et idiomatiques standards.

5 - Bobril

Pour ceux qui aiment utiliser le DOM virtuel et les composants à états de React, de même que la programmation TypeScript, Bobril pourrait être la bonne réponse, ou encore son cousin ngBobril, qui fonctionne bien avec Angular. Ce framework est systématiquement plus rapide que React ou Angular avec certains benchmarks, peut-être à cause de ses algorithmes diff plus rapides et de l’absence de support du JavaScript isomorphique. Il y a aussi des fonctions abrégées pour la manipulation CSS et une couche entière de gestion d’état, BobX, si on en a besoin.

6 - Marko

Marko est un framework léger et rapide qu’eBay partage à travers une licence open source. Son côté le plus intéressant est sans doute sa syntaxe très légère pour créer des modèles qui, de façon très judicieuse, se passent de toutes les lourdeurs d’un HTML pour définir une structure principalement par indentation. Et le moteur de rendu est très rapide dans son exécution, capable de gérer des constellations complexes de DIV se mettant à jour plus rapidement que 60 frames par seconde.

7 - Svelte

Les frameworks standards fournissent un compilateur et une bibliothèque runtime à télécharger pour exécuter ce que le compilateur a produit. Ce processus en deux étapes permet de réaliser du code très élaboré avec, en contre-partie, l’attente pour récupérer le runtime et pour le parcourir à chaque fois qu’une page est ouverte. Le compilateur Svelte s’affranchit de cette complexité en fournissant du code proche de JavaScript pratiquement prêt à s’exécuter par lui-même. Un bémol toutefois, il ne peut le faire que dans certains navigateurs récents : Chrome, Firefox, Opera et IE10. C’est une tactique architecturale astucieuse qui produit des sites web très légers qui exigent peu de mémoire.

A suivre dans la 2ème partie : Inferno, Preact, Hapi, Koa, Nest, Drupal/WordPress/Rails et Vanilla JS.