Au départ, React.js a été développé par Facebook pour ses propres besoins : avoir une interface utilisateur (UI) à la fois dynamique et performante. Depuis il a connu une très grande popularité notamment dans de nombreuses start-up. En 2011, Jordan Walke (également créateur de Reason) et son équipe issue de Facebook développent le projet React JS : une bibliothèque JavaScript qui propose une nouvelle façon de générer les pages web, en rendant plus naturelles et plus fluides les interactions utilisateur. En 2015, deux ans après l’ouverture du code en open source, la même équipe réitère l’exploit en publiant la version mobile avec React Native qui fut immédiatement adopté par la communauté.

Vous trouverez dans cet article un aperçu des avantages de travailler avec les technologies React.js et React Native. Cela devrait vous donner une idée de leurs forces mais aussi de leurs différences.

 

 

React.js

React.js souvent appelé React ou ReactJS est une bibliothèque JavaScript responsable de la construction d’une hiérarchie de composants de l’interface utilisateur ou, en d’autres termes, responsable de la génération des composants de l’interface utilisateur. Il fournit un support pour frontend et côté serveur.

Rappelez-vous que React.js est le V du pattern MVC, c’est donc une bibliothèque uniquement destinée à générer vos vues.

 

Avantages de React

  • DOM (document object model) est un compromis des vus sur les entrées et sorties de données. Le DOM virtuel de React est plus rapide que le modèle de rafraîchissement complet conventionnel, puisque le DOM virtuel ne rafraîchit que certaines parties de la page. Ce qui est intéressant, c’est que l’équipe de Facebook n’était pas consciente qu’une actualisation partielle d’une page se révélerait plus rapide. Facebook cherchait juste un moyen de réduire leur temps de reconstruction, et le rafraîchissement partiel du DOM était juste une bonne solution. Au final, cela augmente les performances et accélère la programmation.
  • Vous pouvez réutiliser des composants de code dans React JS, ce qui vous fait gagner beaucoup de temps.
  • La génération complète de vos pages, du serveur au navigateur, améliorera le référencement de votre application web.
  • Il améliore la vitesse de débogage, facilitant ainsi la vie de votre développeur.
  • Même pour ceux qui ne sont pas familiers avec React, il est facilement lisible. De nombreux frameworks exigent que vous appreniez une longue liste de concepts qui ne sont utiles que dans le framework. React s’efforce de faire le contraire.
  • Vous profitez de toutes les avancées du langage Java et de son écosystème.

 

 

React Native

React Native est un framework pour créer des applications natives en utilisant JavaScript. React Native compile les composants d’application native, ce qui vous permet de créer des applications mobiles natives. Dans React JS, React est le concept de base de React DOM pour la plateforme web, alors qu’avec React Native, React est toujours le concept de base mais de React Native. La syntaxe et le workflow restent donc similaires, mais les composants sont différents.

 

Avantages de React Native

  • React Native est livré avec des modules natifs et des composants natifs qui améliorent les performances. À la différence de Cordova, PhoneGap et d’autres frameworks multiplateformes qui rendent le code via WebView, React Native restitue certains composants de code avec des API natives.
  • React Native a tous les avantages que React.js vous a apporté.
  • Vous n’avez pas à créer la même application pour iOS et Android séparément, car React Native permet à vos développeurs de réutiliser la couche logique commune.
  • La structure basée sur les composants de React Native permet aux développeurs de créer des applications avec une approche de développement web plus agile que la plupart des frameworks hybrides, et sans aucun réseau.
  • Si vous connaissez JavaScript, React Native sera facile à acquérir, permettant à la plupart des développeurs Web frontaux d’être un développeur mobile. Tout ce que vous devez savoir, c’est JavaScript, les API de plate-forme, certains éléments de l’interface utilisateur native et tous les autres modèles de conception spécifiques à la plate-forme.
  • Pas besoin de réviser votre ancienne application. Tout ce que vous avez à faire est d’ajouter les composants de l’interface utilisateur native de React dans le code de votre application existante, sans avoir à réécrire.
  • Le développement d’applications natives est généralement synonyme d’inefficacité, de temps de déploiement plus lent et de productivité moindre pour les développeurs. React Native est synonyme de rapidité, de réactivité et d’agilité du développement d’applications Web, ainsi que d’un traitement efficace et de la meilleure expérience utilisateur de l’espace hybride, pour offrir à vos utilisateurs une expérience d’application native.

 

 

Conclusion

React est un framework pour construire des applications en utilisant JavaScript. React Native est une plate-forme complète vous permettant de créer des applications mobiles multiplateformes natives, et React.js est une bibliothèque JavaScript que vous utilisez pour construire une couche d’interface utilisateur performante.

React.js est le cœur de React Native, et il incarne tous les principes et la syntaxe de React, de sorte que la courbe d’apprentissage soit facile. La plate-forme est ce qui a donné lieu à leurs différences techniques. Le code du navigateur dans React est généré via Virtual DOM tandis que React Native utilise des API natives pour générer les composants sur mobile. React utilise le HTML et avec React Native, vous devez vous familiariser avec la syntaxe React Native. React Native n’utilise pas CSS non plus. Cela signifie que vous devrez utiliser l’API d’animation fournie avec React Native pour animer différents composants de votre application.

En somme, React est idéal pour créer une interface utilisateur dynamique, performante et réactive pour vos interfaces Web, tandis que React Native est conçu pour donner à vos applications mobiles une touche vraiment native.

 

Au passage, si vous le souhaitez nous organisons des formations en France, en Suisse, au Luxembourg et en Belgique sur React et React Native !

 

Article grandement inspiré de : « What Is The Difference Between React.js and React Native? » et traduit en français par Hugo Chahine.