Makina Blog

Le blog Makina-corpus

Découverte de React Native


Présentation de React Native, quelles sont ses possibilités et peut-on l'utiliser en prod ?

On se demande souvent quelle solution mobile hybride choisir quand on démarre un projet et nous avons testé plusieurs frameworks pour explorer les possibilités de chacun. Nous vous présentons aujourd'hui React Native.

Qu'est-ce que React Native ?

React Native est un framework mobile hybride développé par Facebook depuis début 2015. Il continue d'évoluer avec le soutient de nombreux contributeurs sur Github.

Facebook a développé l'application de sa dernière Keynote en React Native, qui est un très bon exemple de ce qu'il est possible de faire. Toutes les explications et le code source sont disponibles ici.

"Learn once, write everywhere"

Le but de React Native est de pouvoir réutiliser le maximum de code entre les différentes plateformes (iOS et Android). Il offre un gain de temps considérable par rapport à du développement spécifique, tout en étant aussi performant.

L'écriture en javascript permet aux développeurs web de construire une application mobile native, contrairement à Cordova qui encapsule l'application dans une webview.

React Native utilise le moteur JavaScriptCore avec le transpileur Babel, il est compatible ES5, ES6 ou ES7 sans problème.

Dans la documentation, les exemples utilisent souvent la syntaxe Flow qui sert à vérifier les types en javascript, un peu à la manière de TypeScript

function foo(x: string, y: number): number {
  return x.length * y;
}

Nous avons annoté ici une fonction pour dire que nos paramètres seront de type string et number, et la réponse attendue de type number.

UIExplorer

Exemples de composants React Native

Une approche par composants

La syntaxe est celle React, si vous êtes déjà familier avec ce framework, vous pouvez passer directement aux spécificités par rapport au développement pour le web. Sinon, nous pouvez retrouver le diaporama "Comment React va révolutionner le web" et suivre ce récapitulatif sur les composants React.

Voici un exemple de composant React. En général un composant est appelé de la manière suivante, il peut aussi utiliser la méthode extend, cf. React.createClass versus extends React.Component[en].

const Picture = React.createClass({
    render: function() {
        return (
            <View>
                <Image source={{uri: 'http://url-de-mon-image.png'}} />
                <Text>Ceci est une légende</Text>
            </View>
        );
    }
});

La fonction render() est obligatoire, c'est ce qui va "rendre" les composants React dans le moteur du SDK.

Dans l'exemple ci-dessus, notre composant va rendre l'élément View, qui englobe deux autres composants : Image et Text. La fonction render ne peux rendre qu'un seul élément parent (qui peut contenir autant d'enfants que necéssaire). Nous n'aurions pas pu par exemple avoir directement Image et Text sans leur parent unique View.

La fonction getInitialState() permet de déclarer les données par défault à l'initialisation du composant. On peut ensuite les récupérer via this.state, comme ici dans la source du composant Image.

const Picture = React.createClass({
    getInitialState() {
        url: 'http://url-de-mon-image.png'
    },
    render: function() {
        return (
            <View>
                <Image source={{uri: this.state.url}} />
                <Text>Ceci est une légende</Text>
            </View>
        );
    }
});

Un composant peut récupérer les propriétés qui lui sont passées en attribut via this.props. Ici, le composant Picture récupère l'url de l'image via sa propriété url.

<Picture url='http://url-de-mon-image.png' />
const Picture = React.createClass({
    render: function() {
        return (
            <View>
                <Image source={{uri: this.props.url}} />
                <Text>Ceci est une légende</Text>
            </View>
        );
    }
});

Spécificités par rapport au développement pour le web

  • Pas de DOM

    Inutile de faire appel à window ou document, React Native n'utilise pas de DOM. Attention donc à la compatibilité de certaines librairies JS.

  • Pas de balises HTML

    Les tags spécifiques au DOM ne sont donc pas admis non plus (<div>, <section>, <article>,…). L'interface doit être construite à partir des composants React-Native uniquement (ou de composants que nous aurions crée) : <View>, <Text>, <Image>,… voir la liste complète dans la documentation

  • Tout doit être packagé

    Toutes les ressources doivent être appelée, soit par un chemin absolu, soit par un require : {{uri: urlDeMonImage}} ou {require('./chemin/de/mon/image')}.

  • Styles

    On déclare le style d'un composant avec l'attribut style, puis on crée un objet StyleSheet pour les définir.

      const Picture = React.createClass({
          render: function() {
              return (
                  <View style={styles.container}>
                  <Image source={{uri: this.props.url}} />
                  <Text>Ceci est une légende</Text>
                  </View>
              );
          }
      });
      var styles = StyleSheet.create({
          container: {
              flex: 1
          },
      });
    

    Les styles sont limités à ceux disponibles en JS et peuvent avoir un comportement légèrement différent des styles dans un navigateur. Propriétés disponibles pour le positionnement en flexbox.

    Il n'est pas possible d'utiliser de fichier .css. On peut néanmoins externaliser le style d'un composant dans un fichier JS à part.

    À noter : pour certains composants, l'attribut style n'existe pas, il faut par exemple utiliser contentContainerStyle pour les composants ListView ou ScrollView. Attention donc a bien lire la doc lorsqu'on utilise un nouveau composant.

Bien démarrer avec React Native

Prérequis

  • OS X, Linux ou Windows peuvent développer pour Android
  • OS X et Xcode (> 7.0) sont nécessaire pour iOS
  • Git, Node et npm
  • Android JDK et SDK
  • Watchmen pour OS X ou Linux

L'installation et le lancement de la première application est assez simple et la procédure est bien documentée.

Debugging

  • Live reload : L'application se met à jour automatiquement à chaque modification grâce au livereload. Depuis la version 0.22, on peut aussi activer le Hot Reload, qui conserve l'état de l'application (utile pour des modifications graphiques car très rapide).

  • Chrome debug : un menu contextuel avec des options de développement (Debug JS, Inspecter l'élément, …) s'affiche quand on secoue l'appareil ou avec cette commande :

    adb shell input keyevent 82

  • Nuclide

    Nuclide

    Nuclide est un outil qui s'intègre à Atom. Il est compatible avec Flow et permet d'avoir une console (Chrome) et un inspecteur d'éléments directement dans notre éditeur. Il intègre également Buck, un outil de compilation. Pour le moment le support Android est encore limité.

Les plugins

À l'instar de Cordova, il existe de nombreux plugin React-Native. Beaucoup sont encore à l'état d'expérimentation, surtout pour Android.

Un outil permet d'automatiser l'installation de plugins : React Node Module Packager (rnpm), mais le mieux est encore de le faire à la main pour éviter les erreurs et mieux comprendre les modifications apportées.

Prêt pour la prod ?

Nous avons tenté de répondre aux besoins les plus courants avec React Native : connexion à une API, navigation, utilisation de la caméra, mais aussi à nos besoins spécifiques en cartographie.

Georama

Voici les plugins que nous avons retenu :

Prise de photos

Cartographie

Lecture de fichier

Dans l'ensemble, nous sommes plutôt satisfait des fonctionnalités offertes par ce framework, même si le support Android manque encore un peu de maturité. La syntaxe React est très agréable à utiliser. Le design de l'application est quant à lui un peu déroutant quand on vient du web car il faut tout construire de zéro avec des styles qui ne se comportent pas tout à fait comme sur le web.

Pour aller plus loin, venez suivre notre formation React Native!

Formations associées

Formations Mobile

Formation React Native

À distance (FOAD) Du 19 au 21 novembre 2024

Voir la formation

Actualités en lien

Image
Capture d'une partie de carte montrant un réseau de voies sur un fond de carte sombre. Au centre, une popup affiche les information de l'un des tronçons du réseau.
28/02/2024

Géné­rer un fichier PMTiles avec Tippe­ca­noe

Exemple de géné­ra­tion et d’af­fi­chage d’un jeu de tuiles vecto­rielles en PMTiles à partir de données publiques.

Voir l'article
Image
Read The Docs
01/02/2024

Publier une documentation VitePress sur Read The Docs

À l'origine, le site de documentation Read The Docs n'acceptait que les documentations Sphinx ou MKDocs. Depuis peu, le site laisse les mains libres pour builder sa documentation avec l'outil de son choix. Voici un exemple avec VitePress.

Voir l'article
Image
Widget
04/04/2023

Créer une application en tant que composant web avec Stencil

Mise en place dans le cadre de Geotrek, cette solution permet de se passer d'une iFrame pour afficher une application dans n'importe quel site.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus