:::: MENU ::::

Quel avenir pour React en 2017

Même sans être un développeur front fou furieux friand de nouvelles sensations et vacciné contre la JS Fatigue® vous avez surement déjà entendu parler de React. Voyons ce que nous réserve 2017 concernant cette bibliothèque.

La première release de React date de 2013 et la librairie a connu une très forte popularité les deux dernières années. Plusieurs projets s’en sont même inspiré et comme la tendance actuelle de développement est clairement orienté « composants », React n’est pas prêt de mourir 1.

Que ce soit pour faire des applications web complexes ou des sites (voir des application mobiles avec React Native ), React est très répandu. Souvent vendu utilisé pour ses performances, React tire sa force d’un découplage entre le(s) moteur(s) de rendu et l’API de la librairie. En d’autres termes, vous pouvez utiliser React coté serveur, sans utiliser le DOM du navigateur. On appelle ça le Server Side Rendering, ce qui permet de concevoir des applications dites isomorphiques.

Hélas il arrive parfois que les performances ne soient pas au rendez-vous ou que certaines fonctionnalités comme les animations soient complexes à mettre en oeuvre. C’est pourquoi l’équipe de dev de React a entamé depuis quelques temps déjà une réécriture complète du moteur.

React Fiber est l'algorythme du moteur de react

React Fiber

Comme introduit précédemment, on peut distinguer deux parties dans React : le moteur même de la librairie ( reconciliation ) et le système qui effectue le rendu ( rendering ) . Si vous utilisez React dans le navigateur vous aurez remarqué qu’il faut utiliser deux librairies : react et react-dom. react-dom est le composant de rendu spécifique pour le navigateur.

React Fiber est un projet qui consiste à réécrire la partie reconciliation de React pour la rendre plus performante et extensible. C’est un système complexe dont découle tout le reste de l’écosystème React.

L’idée est d’améliorer la manière dont le rendu sera géré en permettant de découper par morceaux le travail à effectuer. Il est alors possible de prioriser certaines étapes, de mettre en pause voir de réutiliser certains morceaux de calcul déjà effectués.

Voila un aperçu de ce que cela peut donner comme amélioration au niveau des performances

React Fiber permet aussi d’utiliser les fragments, c’est à dire de retourner plusieurs composants à la fois ce qui évite de devoir systématiquement créer des blocs intermédiaires.

C’est pour quand ?

La bonne nouvelle est que ce système sera intégré petit à petit dès la prochaine version majeure et que React Fiber est déjà opérationnel chez Facebook .

React 15.5 qui sera surement la dernière version de la branche 15 va marquer de nouvelles méthodes comme dépréciées ( React.createClass ). La migration ne devrait pas poser trop de problèmes puisque la majeure partie du travail d’adaptation à React Fiber est à effectuer dans les composants de rendu tel que react-dom. L’API ne change pas.

Quoi d’autre ?

Si React Fiber est LA grosse évolution, il y a aussi quelques autres travaux notables qui sont en cours comme la réduction de la taille de la librairie, des alertes plus visibles et éventuellement un moyen d’éviter la livraison en prod d’une application react configurée pour le dev

Quelques ressources

Voici quelques éléments d’information supplémentaires et des issues à suivre pour être au courant des avancements :

Suivre l’avancement des versions 15.5 et 16 

L’état de Fiber

Ce qu’il reste à faire avant une premiere sortie

Notes:
1. au passage il est toujours bon de rappeler que la version web de facebook est basée sur React. C’est quand même de la d’où vient cette librairie

So, what do you think ?