Pourquoi le projet développé par Facebook s'impose comme la technologie de référence des développeurs front-end sur la création d'applications web ?

Le succès de React JS ne fait que grandir. Depuis janvier 2015, la bibliothèque a été adoptée par la majorité des géants du web : Netflix, Twitter, Airbnb, Pinterest, WordPress ou Atlassian. En 2 ans, l'écart se réduit entre React et AngularJS, le framework JS champion de Google.

 

Comprendre React JS

 

React est une bibliothèque JavaScript libre développée par Facebook en 2013. Elle permet de créer des interfaces (ie. la partie visible et cliquable de l'application) hautement personnalisables et interactives pour des applications monopage (SPA ou Single Page App).

 

Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page (ou portion) HTML à chaque changement d'état... Wikipedia

 

Une interface React est découpée en composants assimilables à des fonctions. Un composant est une boîte noire qui reçoit des arguments en entrée (props) et retourne du DOM virtuel en sortie. Une fois combinés, ces composants constituent une application complexe.

 

Qu'est ce qu'un DOM Virtuel ?

 

Une page HTML classique est représentée sous forme d'un arbre DOM dans le navigateur : des balises HTML qui s'emboîtent et se suivent. Chaque modification de cet arbre DOM entraîne les opérations suivantes :

• Reconstruire l'arbre DOM suite à la modification
• Calculer les CSS du nouvel arbre DOM
• Calculer les positions et attributs de chaque bloc HTML
• Afficher les blocs dans la page du navigateur

Le DOM virtuel est une représentation du DOM en JavaScript, grâce auquel on pré-calcul les changements nécessaires pour n'en faire que le minimum. On minimise les opérations et on améliore grandement les performances. Ces gains sont particulièrement importants sur des applications manipulant beaucoup d'éléments.

Prenons l'exemple d'un tableur en ligne comme Google Sheets. À la modification/suppression d'une ligne, dans le paradigme React on décrit ce que le composant renvoi sous forme de Virtual DOM et React s'occupe de l'afficher. Là ou les frameworks de la génération précédente demandaient de coder les insertions et les mises à jour du DOM.

 

React est un hérisson : il ne fait qu'une chose mais il la fait très bien !

 
Contrairement AngularJS, React n’est pas un framework. Il n’y a pas de cadre qui permet de structurer votre application et vous devez définir votre architecture, la manière dont vous gérez les données, les règles d’implémentation et d’organisation du code. Par contre, vous pouvez intégrer React dans votre projet et l'utiliser avec, sans toutefois modifier le code existant.

React est aussi utilisable côté serveur avec Node.js ou pour la création d'applications mobiles avec React Native.

 

Pourquoi React est si populaire ?

 

Maintenant que vous savez ce qu'est React, concentrons-nous sur ses points forts et ce qui le rend si populaire. Que ce soit le côté Developer Experience (DX) ou business driving, voilà React sous son meilleur jour.

1. Le contenu est référençable
   Grâce à l’utilisation d’un serveur Node, le code va pouvoir être généré côté client et serveur à la différence des autres frameworks JS traditionnels. Le contenu généré par JavaScript est ainsi lu et référencé par les moteurs de recherche.
2. React est très rapide
   React crée un DOM virtuel auquel il rattache les composants. Quand un changement a besoin d'être fait, React calcul les changements à opérer et rafraîchit uniquement les parties impactées. Les opérations coûteuses sont ainsi évitées. Cette approche permet des performances exceptionnelles.
3. Le découpage en composants réutilisables
   React est basé sur des composants réutilisables, testables et combinables. Lorsqu'un bug est détecté dans un composant, vous pouvez le corriger une fois pour toutes. Lorsque vous modifiez un composant, les effets de bord sont limités à ce composant uniquement. Votre application est plus maintenable.
4. Une communauté prolifique
   React a rapidement séduit la communauté des développeurs JavaScript. Ces développeurs, très portés sur l'open-source, ont participé à la propagation d'une importante base de code libre d'utilisation. Ces publications représentent un gain de temps considérable dans la création d'une nouvelle application.
5. JavaScript natif
   React est une librairie JavaScript. Sa lecture est simple et permet de déterminer immédiatement quelles sont les fonctionnalités de votre application pour n'importe quel développeur JavaScript, même non initié. Encore un bon point côté maintenabilité !
6. La syntaxe JSX facilite la prise en main
   React utilise la syntaxe JSX, qui permet de décrire une structure DOM directement en JavaScript dans un langage très proche du HTML. Cette syntaxe, fortement recommandée, permet de faciliter l'écriture et la lecture.
7. Langage de rendu universel
   React ne se limite pas à la création d'application web, on peut l'utiliser pour beaucoup d'autres choses :
• react-native pour la création d'application mobiles
• react-sketch pour la création de maquette sketch
• react-word pour la création de documents word
• react-pdf pour la création de documents PDF, ...

Références :

• https://facebook.github.io/react/
• https://blog.octo.com/pourquoi-sinteresser-a-react/
• http://makemedev.com/pourquoi-utiliser-react-2/

Source : https://www.smooth-code.com/articles/pourquoi-react-est-il-si-populaire

 

---