Notre retour d’expérience sur React-Native et Redux, technologies avec lesquelles on travaille depuis un an. Ce blogpost reprend le contenu légèrement édité de ma présentation éponyme lors du web2day, le 8 juin 2017.
Bonjour, je m’appelle Barthélémy. Je suis développeur web et mobile chez Kumbu. Je vais vous présenter notre retour d’expérience sur React-Native et Redux, technologies avec lesquelles on travaille depuis un an.
Pourquoi React-Native ?
On a choisi React-Native pour plusieurs raisons:
- Personne dans l’équipe n’avait d’expérience dans le développement d’applications natives, que ce soit pour iOS ou pour Android. Prendre en main à la fois JAVA avec toutes les spécificités du développement Android que cela implique et Swift étaient pour nous une perte de temps. On a donc rapidement écarté cette idée.
- On s’est donc rapidement penché sur les technologies hybrides. L’unique experience que j’avais avec ces technologies était lors d’un precedent projet avec Phonegap. Phonegap est une technologie qui fait tourner du javascript dans une WebView sur le navigateur intégré a votre smartphone. Les deux gros défauts qui sont faites à Phonegap (meme si cela a pu changer depuis 3 ans) étaient son experience utilisateur qui ne ressemblait pas du tout au “look and feel” d’une application native et ses mauvaises performances.
- On s’est donc intéressé à React-Native, qui avait déjà le vent en poupe il y a un peu plus d’un an maintenant. En effet, React-Native a été créé par Facebook en 2015 et est un projet Open-Source.
Comment fonctionne React-Native ?
React-Native est composée de trois parties:
- Native
- JavascriptCore
- Le Bridge
Nous, développeurs, nous intervenons principalement dans la partie JavaScript.
Avec React-Native, nous utilisons un standard plus ou moins nouveau en JavaScript, le standard Ecmascript 6 ou 2015, et 7.
Ce standard qui tourne avec le moteur Babel permet aux développeurs de faire la programmation objet avec le javascript. Cela permettra à ceux d’entre vous qui ont toujours été allergiques à JavaScript de se réconcilier un peu avec ce langage. Nous avons ainsi les concepts de classe, d’objets, d’héritage, etc.
Ce sera donc bel et bien des composants natifs qui seront sur votre application iOS ou Android.
Si nous reprenons notre chère application, nous avons donc la partie JavaScript sur lequel nous travaillons. Nous avons ensuite le natif, Java ou Swift selon la plateforme. Lors de la compilation, React-Native va créer tous les composants que l’on utilise dans notre application. Ce sera donc bel et bien des composants natifs qui seront sur votre application iOS ou Android.
Si jamais vous trouvez un composant React-Native pas assez performant ou manquant certaines fonctionnalités, vous avez également la possibilité de développer une partie directement en natif. Par exemple, Instagram dont le gros de leur application est en natif, a développé seulement quelques vues en React-Native.
Nous avons enfin le bridge qui permet aux deux parties de discuter entre eux. C’est au niveau de ce pont où l’on peut avoir des pertes de performance — notamment au niveau des animations. Mais cela a tendance à s’améliorer. To Kal, ingénieur chez Wix, a développé un module qui permet de faire des animations à 60 images par seconde.
Et si je veux un comportement différent entre iOS et Android ?
Ou si je veux utiliser un composant qui est que sur Android. Prenons par exemple, le composant Toast qui permet d’afficher un message pendant une ou deux secondes à l’utilisateur et qui n’existe que pour Android.
Si je veux l’utiliser, je n’ai qu’à écrire deux fichiers, un se terminant par android.js et l’autre par ios.js.
React-Native compilera tous les fichiers se terminant par .js et .android.js pour créer l’application android. Il fera de même pour iOS en compilant les fichiers se terminant par .ios.js et .js.
Environnement de développement
Je ne peux pas vous présenter React-Native sans vous parler de l’environnement de développement de celui-ci.
Il faut savoir que le JavaScript, lorsque nous sommes en mode développement, tourne sur notre ordinateur et plus précisément dans notre navigateur Chrome. Il nous est ainsi possible de voir les logs du JavaScript dans la console de Chrome. Pour cela, il faut juste activer l’option “Debug JS Remotely”. Attention, ne cherchez pas à mesurer les performances de votre application en mode développement. Cela ne représente pas du tout les performances de votre application en production.
De plus, avec React-Native, nous avons deux modes de mise à jour du code qui nous permet de recharger les bouts de code modifiés sans avoir à tout recompiler, comme c’est le cas sur Android et iOS. Ces deux modes sont:
- Live Reloading — qui recharge toute l’application dès qu’un fichier change
- Hot Reloading — qui recharge uniquement les fichiers modifiés sans perdre l’état de l’application.
La magie de l’Open-Source
Comme vous le savez, React-Native est un framework open-source. Nous pouvons trouver un certain nombre de composants — mais cela reste des composants génériques. Il n’existe pas tout, et c’est parfois difficile de trouver le bon composant. Et c’est là que nous allons pouvoir profiter de la magie de l’Open Source.
Ne pas réinventer la roue !
Si vous avez pensé à un composant, la communauté a certainement déjà travaillé dessus. Ainsi, de nombreux composants sont disponibles en open-source. Il est important à mon sens de ne pas réinventer la roue, notamment pour les composants complexes. Chez Kumbu, par exemple, nous utilisons les composants react-native-video, react-native-share-extension ou encore react-native-router-flux.
Un moyen simple de les retrouver est d’aller sur le site web js.coach qui répertorie un grand nombre de composants React-Native. On peut également y trouver des composants React ou des modules pour Webpack.
CodePush
Je voulais également attirer votre attention sur un module en particulier, CodePush, développé par Microsoft. CodePush permet de mettre à jour son projet sur iOS ou Android ou les deux plateformes, et ce, à distance(“over the air”), directement sur les mobiles ou l’application est installée. Cela évite donc de passer par le Play Store ou l’App Store et donc de faire le déploiement beaucoup plus rapidement, très pratique notamment pour la correction de bugs
Si jamais en revanche, vous avez déployé une version de l’application trop rapidement, vous avez toujours la possibilité de revenir à la version précédente.
Un conseil pour ceux qui développent sous iOS. Apple fait très attention aux applications iOS et les révise à chaque fois avant de les rendre disponibles sur l’App Store. Pour tout ce qui est correction de bugs, cela ne pose pas de problèmes de le faire avec CodePush. Par contre, par prévention, il vaut mieux passer par la voie normale lors d’une mise à jour avec de nouvelles fonctionnalités, et ainsi éviter tout risque que votre application soit bloquée quelques jours.
Maintenant que je vous ai présenté les avantages de React-Native, je vais parler de Redux.
Redux
Redux est une librairie JavaScript qui permet de gérer les différents états de l’application.
Redux est composé de trois parties
- le store
- le (ou les) reducer(s)
- les actions
Le flux de données dans Redux est unidirectionnel. Prenons un exemple pour vous expliquer les différentes étapes, par exemple le login.
Nous avons un champ email vide, c’est notre état initial.
L’utilisateur fait une action et tape une lettre. L’action fait appel au reducer en lui indiquant que le champ email a été modifié. Celui-ci créé un nouvel état de l’application avec la nouvelle valeur du champ email et met à jour le store avec.
Une fois le store mis à jour, l’UI est également mise à jour et la valeur est affichée. Pour cela, nous avons besoin de connecter notre composant Login à Redux.
Cela se fait en deux étapes :
- utiliser la fonction connect() — qui indique les actions utilisables par le composant.
- et la fonction mapStateToProps — qui indique les attributs du store qui sont accessibles depuis le composant.
Si nous reprenons notre exemple de login. Nous aurons donc comme actions possibles, emailChanged, passwordChanged et loginSubmit. Et dans mapStateToProps, nous aurons accès aux attributs email et password.
Pourquoi avons-nous choisi Redux ?
Nous utilisions la gestion des états propre à React-Native ou chaque composant gère son état. Il se trouve qu’à un moment donné, l’application était devenue trop complexe. Nous avions besoin d’un état qui était utilisé par un autre composant, celui-ci était importé dans un autre composant et ainsi de suite plusieurs fois. Cela devenait de plus en plus difficile de suivre le flux des données de l’application et donc plus difficile à débugger, à faire des code reviews, etc.
Redux nous a permis de sortir la logique de l’application des composants React-Native et ainsi de rendre le code plus compréhensible pour les autres développeurs. Les composants de React-Native jouent donc le rôle de Vue dans le modèle MVC, le contrôleur étant plutôt les actions de Redux et le modèle, les reducers avec le store.
Plus l’application devient complexe, plus il est intéressant d’utiliser Redux
Voilà pour une présentation rapide de Redux. Il faut faire attention à bien dissocier Redux de React-Native. React-Native a sa propre gestion des états de l’application. Plus l’application devient complexe, plus il est intéressant d’utiliser Redux. On commence a avoir des états qui sont passés de composants parents aux filles, qui s’imbriquent. Et cela peut commencer à devenir incompréhensible.
Pour votre information, Redux n’est plus la seule librairie qui permet de gérer les différents états de l’application. Il existe depuis quelques mois MobX également.
Mon retour d’expérience en 4 conseils
1. Attention aux développeurs web
React-Native est très pratique et performant. Si on prend Instagram qui utilise React-Native pour quelques vues de leur application. Ils réutilisent entre 80 et 99% du code pour leurs applications Android et iOS.
Notre application, encore en beta, réutilise plus de 90% de code entre iOS et Android. Ce qui change étant la partie qui utilise des choses propres à iOS ou Android, comme le partage de médias depuis d’autres applications ou le style, qui peut être différent selon les deux plateformes.
On peut réutiliser une très grande portion de code pour les deux plateformes iOS et Android mais … Mais ca ne fait pas tout pour mettre l’application en production. La partie test et déploiement est propre à chaque plateforme et qu’il ne faut pas négliger.
Ainsi, pour Android, par exemple, il faudra faire une application de production et une de développement, signer l’application, remplir toutes les informations nécessaires sur le play store.
Pour iOS, il faut XCode et donc un mac pour développer une application iOS.
2. Ne pas réinventer la roue
Notamment pour les composants complexes. Bien explorer les modules existants, voir s’il est bien suivi par la communauté et ne pas hésiter à y contribuer.
3. L’utilité de CodePush
est vraiment un outil utile sur le développement mobile et rapide à mettre en place. Je vous conseille fortement de l’utiliser.
4. React-Native est encore une technologie jeune
Ça bouge très vite. Tous les mois, la communauté sort une nouvelle release. C’est important de bien lire les release notes pour prendre connaissance des nouvelles modifications faites sur le framework. Deux newsletters permettent également de suivre l’évolution du monde React/React-Native:
- React Status: react.statuscode.com
- React-Native Newsletter, http://reactnative.cc/
Ma présentation est désormais terminée. Merci à tous d’être venus !Applaudissements et grosse séance de questions qui terminera à l’extérieur 😊
Je suis Bart Arribe — Développeur et co-fondateur chez Kumbu — la boite à souvenir de l’ère numérique. N’hésitez pas à partager cet article s’il vous a plu, merci !!
