Framework React.js

React.js n’est pas vraiment un framework. Il se caractérise comme étant une bibliothèque JavaScript open source dédiée à la création d’interfaces utilisateurs. Elle a été créée par Facebook en 2013 pour développer son fil d'actualités. Considérée comme la Vue dans un modèle MVC, elle est utilisable avec le framework AngularJS. Cette librairie JavaScript a déjà apporté de nombreuses innovations dans la gestion des interfaces utilisateurs.

Des composants indépendants.

Le principal objectif de React.js est de simplifier les interfaces complexes en les subdivisant en simples composants. Cela grâce au JSX qui est un mélange de HTML et de JavaScript. La force de JSX est l’optimisation, la lisibilité et la maintenance des composants. Un composant de l’interface peut être par exemple, un header, un formulaire de contact ou encore un footer.

Chaque composant est composé lui-même d’autres composants. Par exemple, à l’intérieur du footer on peut retrouver le logo, les adresses de contact et les icônes des réseaux sociaux. Chaque composant est également indépendant, ce qui simplifie le partage de codes d’interface d’un développeur à un autre ou d’un projet à un autre.

Les composants peuvent également être réutilisés. Des librairies de composants sont régulièrement utilisées dans les interfaces, les plus populaires sont Material UI, Semantic UI et Bootstrap UI. Material UI est très accessible et permet à un développeur non expérimenté en design de construire une belle interface et à désigner confirmé d'accélérer significativement l’intégration de son design.

Comme React.js est orienté composants, il permet de créer plus facilement des architectures modulaires voire microservices.

La force de VirtualDOM

React.js utilise le VirtualDOM qui est un algorithme de réconciliation. Le DOM, c’est le Modèle Objet du Document qui représente une interface de programmation d’application pour les documents HTML et XML. C’est avec le DOM que les développeurs créent des documents, naviguent dans leur structure et peuvent gérer les éléments et leur contenu (ajout, modification, suppression). Le DOM est souvent lent à manipuler et les modifications intégrées ralentissent en général toute l’application. Le VirtualDOM permet de s’affranchir de ces contraintes. Ainsi, React.js ne va modifier que les éléments du DOM qui ont été changés, cette technique est très performante. Elle limite les interactions avec le DOM, souvent lent en écriture.

C’est en cela que React.js se démarque des autres frameworks : il travaille avec un DOM Virtuel qui met à jour le rendu dans le navigateur seulement en cas de nécessité. Les performances de l’application s’en retrouvent accélérées et optimisées.

React.js fonctionne donc sous le concept d’immutabilité : un objet ne peut pas être modifié, à chaque changement nécessaire un nouvel objet est créé.

• Il simplifie la création des interfaces.
• Les composants sont réutilisables.
• Il donne accès à des librairies de composants.
• Le VirtualDOM est performant : seuls les éléments modifiés au sein de la page web sont mis à jour.
• Il permet de développer des applications mobiles natives avec le framework React Native basé sur Reac.js.
• La communauté autour de ce framework est très active et grandit vite (on compte parmi les utilisateurs de React.js, Airbnb, Netflix, Facebook, Instagram ou encore Pinterest).