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 ne rafraîchit que certaines parties de la page contrairement au DOM, ce qui le rend plus rapide. 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 JavaScript 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çue pour donner à vos applications mobiles une touche vraiment native.
Au passage, si vous le souhaitez nous organisons des formations sur React et des formations sur React Native en France, en Suisse, au Luxembourg et en Belgique !
Article grandement inspiré de : « What Is The Difference Between React.js and React Native? » et traduit en français par Hugo Chahine.
thanks for this brief explanation. before I arrived here, I was thinking that react native is an advanced version of react. i thought that both are use to make mobile apps. Now, i know, react is for web development whereas react native is for mobile
A lot of incorrect statements made in this article.
The first and most obvious one is
« Vous profitez de toutes les avancées du langage Java et de son écosystème. »
JavaScript has Java in its name but they have nothing to share. You can’t use any Java library with React.
Next about virtual dom, it was never about performance. In fact, it might be slower than if you know exactly what dom node to update.
Virtual dom is about an easier reasoning model than dealing with the dom. The mental model of VDom is much easier than mutating directly the dom. The price to pay is a small performance.
You can see actually that it is in fact slower with componentShouldUpdate or React.memo. React.memo and componentShouldUpdate are about making the virtual dom diff algorithm much faster.
About react native, it is providing a bridge between JavaScript and Native platform.
It is indeed a great technology, it is great to remind it is still not in a stable release but usable in a production environment at your own risk. The ecosystem can vary in quality, sometimes you might not find some core functionality for your application. In general, you might find what you want but sometimes you still have to know Android and iOS development in order to develop what you need. I think react-native is great but you need to know about the trade-off and if it is a problem for your application or not.
Hello jalalc!
Thank you for your comment, you help us to correct some mistakes we made by inattention and to deepen some points. Your comment is a real help for improving the relevance and the accuracy of our article.
We have replaced « java » for « javascript » for the sentence « Vous profitez de toutes les avancées du langage Java et de son écosystème. ».
Indeed, the virtual DOM is not more powerful or faster than the DOM even if it remains an ideal framework for building dynamic, high performance, responsive UI for your web interfaces. We have changed the wording to make it clearer. It is the fact of being able to refresh only certain parts of a page that makes it faster.
React native is not as stable as a native language, however, due to many improvements, few skills in android and ios development are required even though it is recommended.