React Native vous permet de construire une application mobile native pilotée en JavaScript gràce au framework React.
Hybride vs React Native
Créer des applications mobiles en utilisant des langages web
Ce n'est pas la première fois qu'une telle promesse apparait mais l'approche de React Native est originale par rapport à l'approche hybride proposée par Apache Cordova notamment.
Pour rappel, Apache Cordova permet de créer une application mobile en utilisant le couple HTML/CSS pour la présentation et utilise une webview pour empaqueter l'application dans une application native. Une surcouche est rajoutée pour permettre au JavaScript éxécuté au sein de la webview de communiquer avec des éléments natifs (pour accéder aux contacts, fichiers ou autre).
Cette approche permet d'utiliser des langages que l'on connait déjà bien mais engendre un certain nombre de problèmes :
- Le moteur embarqué dans la webview change fortement entre les versions et les systèmes (des solutions existent pour uniformiser l'expérience mais alourdissent considérablement le poid de l'application).
- Recréer certains comportements "natif" peut être un vrai casse tête vous obligeant souvent à rajouter pas mal de librairies ou à rajouter une surcouche avec un framework (comme ionic).
- Certains éléments peuvent aussi poser des problèmes en terme de performances. Si votre application a besoin d'afficher une carte par exemple, les performances d'une carte google map web sont très loins des performances du système de carte natif. Une longue vue scrollable ne sera pas aussi performante qu'une ListView capable de lazy load les contenus lorsqu'ils deviennent visibles.
- L'apparition du clavier est un enfer à gérer.
- Le "touch" a un délai de 300ms par défaut qu'il faudra prendre en compte et contourner.
React Native, comme son nom l'indique, va permettre de créer une vraie application native qui utilisera les composants disponibles nativement sur la plateforme sélectionnée et les pilotera en JavaScript.
import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';
class AwkwardScrollingImageWithText extends Component {
render() {
return (
<ScrollView>
<Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} />
<Text>
Sur iOS, un composant ScrollView utilise un UIScrollView natif.
Sur Android, un ScrollView sera utilisé.
Sur iOS, un composant ScrollView utilise un UIScrollView natif.
Sur Android, un ScrollView sera utilisé.
Sur iOS, un composant ScrollView utilise un UIScrollView natif.
Sur Android, un ScrollView sera utilisé.
</Text>
</ScrollView>
);
}React native utilise le principe du Virtual DOM mais remplace la passerelle Virtual DOM <=> DOM par une passerelle Virtual DOM <=> Native. Lorsque votre composant est mis à jours les modifications faites au niveau du Virtual DOM sont reportées vers les composants natifs. Ainsi, l'utilisateur interagit avec votre application comme avec une application entièrement native. L'avantage étant que vous pouvez réutiliser une grande partie de votre JavaScript pour piloter l'interface.
Les inconvénients ?
L'utilisation de composants natif apporte aussi un certains nombre de problèmes plus ou moins difficiles à surmonter.
Hot Reload
Pendant le développement, on est amené à changer l'interface assez souvent et recompiler l'application à chaque changement n'est pas envisageable. Alors qu'il est très facile d'actualiser une webview, recharger du code natif est un peu plus complexe.
React Native a très bien compris ce problème et propose un système capable de recharger votre application à chaud afin de remonter un composant sans avoir à recharger l'application. Cette méthode marche dans la plupart des cas mais la nature stateful du JavaScript ne permet pas une expérience parfaite. Dans certains cas il vous faudra recharger l'application pour voir convenablement vos modifications. Afin de vous simplifier la tache vous pouvez utiliser create-react-native-app pour créer rapidement un projet React Natif disposant du hot reload.
Composants natifs
Un autre souci peut être rencontré lors de l'utilisation d'éléments avancés. Si votre application sort du cadre classique vous pourriez avoir besoin de composants natifs (Video Youtube, Passerelle de paiement...) qui ne sont pas fournis par défaut par React Native. Dans ce cas là il faudra étendre le système et créer le code Object-C / Java afin de créer votre composant personnalisé. C'est un problème que l'on rencontre aussi avec des applications hybrides mais qui est plus rapidement présent avec react native. Il est toutefois envisageable d'utiliser le composant WebView pour certains cas spécifiques afin d'utiliser des composants web.
React
Ce n'est pas réellement un inconvénient mais plutôt une limitation. Pour fonctionner React Native se repose sur le virtual DOM de React et vous oblige donc à utiliser React (ce qui parait logique vu le nom). Il vous faudra donc bien comprendre le framework mais aussi tous les outils autour comme flux notamment. Ce choix vous incite aussi à utiliser React pour la version web de votre application afin de partager un maximum de logique entre votre application web et votre application mobile.
