Si vous avez déjà cherché à créer une application mobile sans vouloir écrire deux fois le même code, vous êtes probablement tombé sur React Native. C’est l’un des frameworks les plus utilisés dans le développement mobile aujourd’hui, et pour de bonnes raisons. Mais entre les termes techniques, les acronymes et les concepts d’architecture, il est facile de se perdre. Cet article explique tout, dans l’ordre, sans jargon inutile.

Qu’est-ce que React Native ?

Définition simple et rôle de React Native

React Native est un framework open source créé par Meta en 2015. Il permet de développer des applications mobiles pour iOS et Android en utilisant JavaScript et la syntaxe de React. L’idée de base est simple : écrire une seule base de code et la déployer sur les deux plateformes principales.
Ce qui le distingue d’autres solutions multiplateformes, c’est qu’il ne génère pas une application web déguisée en application mobile. Il produit de vraies interfaces natives, avec les composants graphiques propres à chaque système d’exploitation. Autrement dit, un bouton sur iOS ressemblera à un bouton iOS, et sur Android à un bouton Android.

À quoi sert React Native et pour quels types d’applications ?

React Native est particulièrement adapté aux applications mobiles grand public : applications de e-commerce, réseaux sociaux, outils de productivité, applications de livraison, plateformes de contenu. Des entreprises comme Shopify, Microsoft ou Coinbase l’utilisent en production.
En revanche, si une application a besoin d’accéder intensivement au matériel de l’appareil, comme pour un jeu vidéo 3D ou une application de traitement vidéo en temps réel, le développement natif pur reste plus adapté.

Comment fonctionne React Native ?

Principe du rendu natif et rôle de JavaScript

Quand on écrit du code React Native, on décrit des interfaces en JavaScript. Ce code est ensuite interprété au moment de l’exécution et traduit en composants natifs réels. C’est très différent d’une application hybride classique qui affiche du HTML dans une WebView.
Concrètement, le JavaScript tourne dans un moteur JS séparé, et React Native fait le lien entre ce code et les composants natifs d’iOS ou Android. Ce pont de communication a longtemps été appelé le Bridge, même si l’architecture moderne s’en est progressivement éloignée.
 

flowchart LR
A[“Code JavaScript React Native”] –> B[“React Native Engine”]
B –> C[“JSI Bridge Layer”]
C –> D[“iOS Native Components”]
C –> E[“Android Native Components”]
D –> F[“User Interface iOS”]
E –> G[“User Interface Android”]

 

Différence entre React Native, React et le développement natif

React est une bibliothèque JavaScript pour créer des interfaces web. React Native reprend les mêmes concepts, les composants, le JSX, le state, mais les applique au mobile. Si vous connaissez React, vous retrouvez vos marques rapidement. La syntaxe est très proche, mais les composants sont différents. On n’utilise pas de div ou de span, mais des View, Text ou TouchableOpacity.
Le développement natif pur, lui, consiste à écrire en Swift ou Objective-C pour iOS, et en Kotlin ou Java pour Android. C’est plus performant dans les cas extrêmes, mais ça implique de maintenir deux codebases distinctes, avec deux équipes ou un double effort de développement.

Architecture React Native

Fabric Renderer, Host Platform et Host View

Fabric est le nouveau moteur de rendu de React Native, introduit pour remplacer l’ancien système basé sur le Bridge asynchrone. Il permet une communication synchrone entre le JavaScript et les composants natifs, ce qui améliore les performances et la fluidité des animations.
La Host Platform désigne la plateforme cible sur laquelle tourne l’application, iOS ou Android. Elle est responsable de l’affichage réel des éléments à l’écran. Une Host View est simplement une vue native rendue par cette plateforme, l’équivalent d’un élément visuel concret sur l’écran de l’utilisateur.

React Shadow Tree, React Shadow Node et Yoga Tree

Avant d’afficher quoi que ce soit, React Native construit une représentation intermédiaire de l’interface en mémoire. C’est le React Shadow Tree. Chaque nœud de cet arbre est un React Shadow Node, qui correspond à un élément de l’interface à afficher.
Yoga entre en jeu pour calculer la disposition de ces éléments. C’est un moteur de mise en page open source développé par Meta, qui implémente le modèle Flexbox. Il calcule les tailles et les positions des éléments avant que quoi que ce soit ne soit rendu à l’écran, de façon cohérente sur iOS et Android.

JSI et JNI

JSI signifie JavaScript Interface. C’est une couche d’abstraction qui permet au code JavaScript d’appeler directement des fonctions natives sans passer par le Bridge classique. Le résultat est une communication plus rapide et plus flexible entre les deux mondes.
JNI, Java Native Interface, est un mécanisme propre à Android qui permet à du code Java ou Kotlin d’interagir avec du code natif écrit en C ou C++. Dans le contexte de React Native sur Android, il est utilisé en arrière-plan pour faire dialoguer les différentes couches de l’architecture. On ne l’utilise généralement pas directement, mais il est utile d’en comprendre le rôle si vous travaillez sur des modules natifs personnalisés.

Vocabulaire technique essentiel

React Component et React Element

Un React Component est une fonction ou une classe qui décrit une partie de l’interface. On en écrit des dizaines dans une application. Par exemple, une carte produit, un bouton ou un formulaire sont autant de composants.
Un React Element, lui, est le résultat de l’appel à ce composant. C’est un objet JavaScript qui décrit ce qui doit être affiché, avec ses propriétés et ses enfants. C’est une description, pas encore quelque chose de visible à l’écran. La distinction est subtile mais importante quand on commence à comprendre comment React fonctionne en profondeur.

Host Components

Les Host Components sont les composants de base fournis directement par la plateforme native. Dans React Native, ce sont des éléments comme View, Text, Image ou ScrollView. Ils correspondent à de vrais composants natifs sur iOS et Android, contrairement aux composants que l’on crée soi-même en JavaScript. Quand on utilise un View dans son code, React Native le traduit en UIView sur iOS et en android.view.View sur Android.

Avantages, limites et cas d’usage

Pourquoi choisir React Native

Le premier argument, c’est le partage de code. Une seule base de code couvre iOS et Android, ce qui réduit le temps de développement et simplifie la maintenance. Pour une startup ou une équipe de taille modeste, c’est un avantage concret.
L’écosystème est également très riche. La communauté est active, les bibliothèques sont nombreuses, et si vous venez du développement web avec une expérience React, la courbe d’apprentissage est relativement douce. L’outillage est mature, le hot reload permet de voir les modifications en temps réel, et les grandes entreprises contribuent activement au projet.

Les principales limites à connaître

React Native n’est pas une solution universelle. Les performances peuvent être inférieures au natif pur pour des applications très sollicitantes en termes de calcul graphique. La couche de communication entre JavaScript et le natif, même améliorée par Fabric et JSI, introduit une complexité que le développement natif n’a pas.
Les mises à jour de React Native sont également fréquentes, et les migrations entre versions majeures peuvent être laborieuses. Certaines bibliothèques tierces ne suivent pas toujours le rythme des évolutions de la plateforme, ce qui peut créer des incompatibilités.

Quand React Native est un bon choix

React Native convient bien aux projets qui ont besoin d’être déployés sur iOS et Android sans doubler les ressources de développement. C’est une bonne option pour les applications de contenu, de commerce, de services ou de gestion dont les besoins en performances graphiques restent raisonnables.
Si votre équipe a déjà une expertise JavaScript ou React, l’adoption sera naturelle. En revanche, si la principale raison d’être de votre application est l’accès bas niveau au matériel ou le rendu graphique intensif, il vaut mieux évaluer sérieusement le développement natif avant de faire son choix.

FAQ

Qu’est-ce que React Native ?

React Native est un framework open source créé par Meta qui permet de développer des applications mobiles iOS et Android en JavaScript, en produisant de vraies interfaces natives plutôt que des vues web.

À quoi sert React Native ?

Il sert à créer des applications mobiles multiplateformes à partir d’une seule base de code. Il est utilisé pour des applications de e-commerce, des outils de productivité, des plateformes de contenu et de nombreux autres types d’applications grand public.

Quelle est la différence entre React Native et React ?

React est une bibliothèque JavaScript pour créer des interfaces web. React Native reprend les mêmes principes et la même syntaxe, mais les applique au développement mobile. On travaille avec des composants spécifiques à chaque plateforme plutôt qu’avec des éléments HTML.

Quelle est la différence entre React Native et le natif ?

Le développement natif consiste à écrire du code spécifique à chaque plateforme, Swift pour iOS et Kotlin pour Android. React Native permet d’utiliser une seule base de code JavaScript pour les deux, au prix d’une légère couche d’abstraction supplémentaire entre le code et le matériel.

Qu’est-ce que la Fabric Renderer dans React Native ?

Fabric est le moteur de rendu moderne de React Native. Il remplace l’ancien Bridge asynchrone par un système de communication synchrone entre JavaScript et les composants natifs, ce qui améliore sensiblement les performances et la réactivité des interfaces.

Qu’est-ce que JSI dans React Native ?

JSI, ou JavaScript Interface, est une couche technique qui permet au code JavaScript d’appeler directement des fonctions natives sans passer par le Bridge classique. C’est l’un des éléments clés de la nouvelle architecture React Native, qui rend les échanges entre JavaScript et le natif plus rapides et plus directs.