React Native, Développer une application mobile avec React

Avant React Native

Lorsque l’on parle d’applications mobiles, il est assez intéressant de voir à quel point les technologies et langages peuvent être presque aussi divers et variés que dans le domaine du web. Il y’a 20 ans, Delphi a connu sa période de gloire ; de nos jours, Objective-C et Java sont en top liste, aux côtés de newbies qui gagnent en notoriété tels que Swift, Angular, sans compter ceux qui se sont entre temps éteints comme Bada par exemple. Il est intéressant aussi de noter que dans ce fatras, nous distinguons 2 grandes catégories d’applications: Les applications natives et les applications hybrides, cette dernière catégorie étant la plus récente des 2.

Cette 2e catégorie a été créée pour répondre à un besoin simple : beaucoup d’entreprises ont vu leur besoin en développeurs mobiles augmenter. Afin d’être au plus près des consommateurs/clients, ces entreprises souhaitent pouvoir décliner leurs services autant sur leurs sites web que sur des mobiles. Cependant, la voie de l’embauche n’étant pas privilégiée, ces entreprises préfèrent recycler leurs développeurs web afin que ceux-ci acquièrent les compétences nécessaires pour développer des applications mobiles, à partir de leur savoir-faire. Ceci donna lieu à la création de langages, frameworks et techniques de développement permettant de créer des applications mobiles à partir des technologies web.

 

1- Qu’est-ce que React Native ?

React Native est une librairie Javascript qui permet de développer des interfaces graphiques, le plus proche possible des applications natives. Sa création répond précisément au besoin décrit dans l’introduction. En effet, React Native est une « déclinaison » de ReactJS, créé et utilisé par Facebook pour développer ses applications web. Etant donné la rapidité et la simplicité de développement observée avec ReactJS, Facebook a décidé « d’adapter » ce langage aux applications mobiles en créant React Native. L’histoire de React Native commence donc avec ReactJS.

 

D’où vient ReactJS ?

Il a été initialement créé chez Facebook qui l’a utilisé pour développer le fil d’actualité de son réseau social. ReactJS est publié en open source en mai 2013, sous Licence Apache 2.0. Depuis la sortie de sa version 0.12 en octobre 2014, ReactJS est proposé sous licence BSD clause 3 – Facebook autorisant en parallèle l’utilisation des brevets associés au logiciel. ReactJS se concentre sur la gestion du rendu de la vue. En termes de performance, ReactJS optimise les opérations sur le DOM en utilisant un DOM virtuel.

Concrètement, ce dispositif compare le DOM existant à celui dont l’affichage est demandé (retourné par la méthode .render()), puis via un mécanisme de réconciliation ne modifie que la partie du DOM virtuel qui nécessite de l’être. Au final, seuls les éléments impactés par un changement au sein de la page web sont mis à jour. ReactJS est idéalement utilisé avec JSX, un pré-processeur JS qui permet d’écrire les templates avec une syntaxe XML, ce qui permet à des novices de le prendre en main très rapidement.

React Native s’appuie sur les mêmes principes de codage que ReactJS. Ils utilisent la même syntaxe, ce qui permet de facilement créer du code à la fois pour des applications web que pour des applications mobiles. Il permet aussi  de 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. React Native utilise le moteur JavaScriptCore avec le transpileur Babel, il est compatible ES5, ES6 ou ES7. Il se limite à la couche de rendu, et ne recouvre donc pas la logique applicative et la gestion des fonctionnalités matérielles – comme Cordova peut le faire. Mais au lieu d’exécuter des WebView (c’est le cas de Cordova), ses librairies JavaScript vont pouvoir invoquer et orchestrer des composants UI natifs  (UITabBar sur iOS ou encore Drawer sur Android, par exemple).

Facebook propose un kit de développement qui doit permettre de faciliter l’intégration des fonctionnalités de son réseau social (Login, partage, Analytics, accès aux API du Graph…) aux applications en React Native. Aujourd’hui, React Native a déjà été implémenté avec succès sur des centaines applications à travers le monde, dont l’application Keynote de Facebook, Airbnb et Instagram, pour ne citer que les plus connues.

Les principaux acteurs de React Native

 

2- Pourquoi s’y intéresser? (utilité, langage, avantages)

Facebook est un des géants du web, et fait notamment partie de ce que l’on appelle les GAFA. Cet acronyme désigne les quatre géants de l’Internet fixe et mobile que sont Google, Apple, Facebook et Amazon.

Les mouvements de Facebook sont donc suivis de très près car susceptibles de changer le cours du monde, du moins celui du web. La force de Facebook réside dans le fait qu’il soit à la pointe de la technologie, ses applications étant constamment maintenues et évoluant rapidement. De plus, le fait que React native fasse appel aux composants natifs UI augmente considérablement les performances des applications mobiles hybrides. Depuis sa création, React native ne cesse d’évoluer, s’enrichissant régulièrement de nouveaux outils, créés par sa communauté de développeurs grandissante, pour faciliter son implémentation.

Points positifs

  • Performances proches des applications natives
  • Librairie éditée par Facebook, donc bien maintenue
  • Communauté de développeurs croissante
  • Logique de composants plutôt simple à appréhender
  • Même syntaxe que ReactJS (donc possibilité de sortir une version web)
  • Gain de temps sur du développement cross platform
  • Responsive design grâce à Flexbox (proche de CSS et HTML5)

Points négatifs

  • Techno jeune et encore peu déployée
  • Nouveaux concepts d’architecture à appréhender
  • Nécessité d’utiliser des conditions pour différencier le code spécifique aux composants natifs des différentes plates-formes
  • Nécessite une adaptation pour les développeurs web et une connaissance du code natif

 

3- Comment ça marche?

Un nouveau pattern d’architecture pour les projets React: Flux

Pattern React Native

Avec la création de React-JS et React Native, Facebook innove encore notamment en créant un nouveau pattern d’architecture nommé Flux. Ce dernier se démarque de ses prédécesseurs (MVC, MVVM) par le fait que la transmission des données est désormais unidirectionnelle et non plus bidirectionnelle. En effet, Flux vient pallier à une des limites du pattern MVC, après que Facebook ait fait face à un problème insolvable: dans un code constitué d’innombrables vues, services, controllers, où les échanges sont bidirectionnels entre vues et écrans partagés, il devient difficile de savoir quand et à quel endroit une variable précise est modifiée. Ce qui rend très compliqué le débogage dans ce code spaghetti, voire impossible. Le principe de Flux est simple: il propose une transmission de données unidirectionnelle et des composants, qui ont chacun une responsabilité clairement identifiée:

  • Les actions: C’est à partir d’une action qu’on pourra modifier le state d’un composant React,
  • Le dispatcher: Il reçoit toutes les actions de l’application. Son rôle est de notifier les stores, via des callbacks, qu’une action spécifique a eu lieu,
  • Les stores: Ils contiennent l’implémentation des règles de gestion et gèrent les states de l’application. Ils s’enregistrent auprès du dispatcher pour « écouter » certaines actions, et lui fournissent les callbacks exécutés lors de la notification d’une action,
  • Les vues: Elles affichent le « state » contenu dans le store associé. Elles s’enregistrent auprès du store pour être notifiées des changements d’état, afin de se mettre à jour en conséquence.

Une approche par composants

En général un composant React est appelé de la manière suivante:

La fonction render() est obligatoire, c’est ce qui définit le rendu graphique des composants React dans le moteur du SDK.

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

Dans l’exemple ci-dessus, la fonction getInitialState() permet de déclarer les données par défaut à l’initialisation du composant. On peut ensuite les récupérer via this.state, comme ici dans la source du composant Image. Un composant peut également récupérer les propriétés qui lui sont passées en attribut via this.props. A noter qu’ici, comme évoqué précédemment, this.state constitue le « DOM virtuel » et this.props le DOM physique, même si cette notion n’existe pas sur le mobile. Une des règles les plus strictes de React est donc de ne JAMAIS modifier la variable « props » d’un composant, mais plutôt de passer par la variable « state » pour effectuer les changements d’état de la vue.

Ici, le composant Picture récupère l’url de l’image via sa propriété url.

4- 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éé) : <View>, <Text>, <Image>, etc.

Tout doit être packagé

Toutes les ressources doivent être appelées, 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. On peut également créer un objet StyleSheet pour les définir.

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

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 à bien lire la documentation lorsqu’on utilise un nouveau composant.

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).

Quelques plugins

  • Yarn pour la gestion des dépendances,
  • Flow pour la vérification des types statiques,
  • Jest et Enzyme pour les tests,
  • Prettier pour formater le code,
  • Storybook, guide pour les styles de composants,
  • Redux, pattern d’architecture suivant les Ducks pattern,
  • Redux-persist pour gérer le cache en mode offline,
  • React-navigation pour gérer la navigation,
  • Styled-components pour designer l’UI.

 

Bibliographie

https://fr.wikipedia.org/wiki/Chronologie_des_langages_de_programmation

http://www.definitions-marketing.com/definition/gafa/

https://makina-corpus.com/blog/metier/2016/quelle-solution-pour-mon-application-mobile-hybride

http://www.journaldunet.com/web-tech/developpeur/1176787-react-native-la-declinaison-de-react-pour-developper-des-apps-natives/

https://makina-corpus.com/blog/metier/2016/decouverte-de-react-native

https://facebook.github.io/react/tutorial/tutorial.html

http://www.journaldunet.com/web-tech/developpeur/1171159-react-zoom-sur-la-librairie-javascript-qui-monte/

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *