React-Native : Comprendre son fonctionnement en 5 minutes

Depuis la première release de React-Native en 2015 par Facebook, on voit fleurir des milliers d'articles nous expliquant pourquoi nous devrions désormais passer par React-Native pour développer nos applications natives.

Pourtant bien souvent, ces articles nous parlent des bénéfices de React-Native sans vraiment nous expliquer comment fonctionne réellement le framework, et ses différences avec d'autres outils comme Apache Cordova, Ionic ou encore NativeScript.

N'ayant jamais travaillé avec React-Native auparavant, je regardais le phénomène de loin ; jusqu'à ce que récemment, un client me commissionne pour une mission avec React-Native.

J'ai alors commencé à découvrir le framework, et d'après ce que je lisais, je pensais que React-Native permettait de compiler une application React, en pur code natif, sans aucun morceau de Javascript restant.

Mais j'avais tort !

Sous le capot de React-Native

Si React-Native ne compile pas le javascript en langages mobiles natifs, alors que fait-il réellement ?

Sans React-Native

Si l'on prend l'exemple d'un framework "hybride" tel que Cordova (utilisé par Ionic), ce dernier génère une application native contenant simplement une WebView (composant natif pour afficher une page web dans une application), et le code de votre application web qui tournera dans cette Webview.

C'est ce qu'on appelle plus ou moins une "coquille vide".

Mais alors comment ce dernier fait-il pour utiliser les APIs natives de l'appareil ? Cordova fourni tout simplement un bridge (un pont) qui permet d'écrire des plugins en langage natif, interfacé avec javascript pour accéder à ces APIs de manière simple.

Si l'on résume : lorsqu'une application est lancée, la Webview est chargée, le bridge est rattaché à cette dernière pour pouvoir être appelé par le Javascript puis le bundle web est injecté dans la webview.

Nous avons donc une application non pas native, mais hybride (majoritairement web).

Avec React-Native

Avec le framework développé par Facebook, la logique métier de l'application tourne toujours dans une machine virtuelle javascript, mais les composants graphiques, eux, ne sont plus gérés par une webview, mais par du code natif.

Concrètement, lorsque vous créez un élément en React-Native, il sera transformé en un élément UILabel sous iOS et TextView sous Android. Puis le style du composant (ressemblant au css) sera transformé pour correspondre aux différents systèmes de layouts des différents OS.

React-Native fourni donc une API uniformisée pour créer et gérer l'UI de vos applications à partir de code JSX.

Si l'on compare à Cordova, qui fournissait une webview et un bridge pour le code natif, React-Native fourni en fait un bridge qui va permettre de gérer les appels aux APIs natives ET les éléments graphiques natifs.

Une application React-Native est donc séparée en 3 différents threads : l'UI, le Javascript, et le bridge. De cette manière, l'exécution du Javascript (asynchrone) n'est jamais bloquée par l'exécution des appels au code natif (synchrones pour la plupart).

React-Native porte-t'il bien son nom ? En réalité pas vraiment, car ce n'est pas une application native qui est déployée au bout de la chaîne, mais une application hybride (majoritairement native).

En conclusion

Je rentrerais en détails dans l'utilisation du framework dans un prochain article, mais je voulais faire cet article pour expliquer le fonctionnement réel (mais simplifié) de React-Native, afin d'éviter tout confusion, comme celle dont j'ai moi-même été victime.

Et éliminer la légende comme quoi React-Native permet de plus réutiliser son code web que d'autres frameworks alors que la manière même donc fonctionne le framework est contradictoire avec cette affirmation.

Si vous voulez plus de détails sur les avantages et les inconvénients techniques de React-Native dans le monde réel, je vous laisse un article publier sur le blog de Uber, expliquant pourquoi après deux ans d'utilisation la société se sépare de React-Native.

Si vous cherchez une alternative à React-Native, vous pouvez aussi essayer NativeScript, poursuivant la même philosophie que RN mais avec une implémentation technique différente !