Développeur mobile en natif & hybride, je développe depuis plus d’un an sous React Native.
Mon expérience sur les différents langages me permet aujourd’hui de comparer la réactivité et la puissance du natif et les avantages qu’apporte React Native dans mes développements.
Je ne vais pas décrire ici ce qu’est React Native mais plutôt vous éclairer sur des interrogations ou des points de blocage que l’on rencontre lors du développement d’une application mobile hybride.
Les outils de développement
React Native vient avec des outils de développement modernes qui n’ont rien à envier aux solutions de hot reload et live reload du web.
Vous pouvez voir un aperçu ici des différentes possibilités : http://facebook.github.io/react-native/releases/0.43/docs/debugging.html#debugging
Depuis le simulateur iOS, un simple cmd + R
recharge l’application et un cmd + D
permet d’afficher le menu de développement, sur un vrai device, il faut secouer l’appareil. Le remote debugging permet d’afficher les sorties consoles dans l’inspecteur de Chrome.
Vous pouvez également utiliser les breakpoints pour debbuger comme avec un site classique.
Par rapport à un développement natif, le gain de temps est énorme.
Je vous conseille d’installer Genymotion pour émuler des devices Android.
Gérer les plateformes
Vous souhaitez gérer l’interface ou un comportement de manière différente selon la plateforme ? Rien de plus simple, deux choix s’offrent à vous :
- Suffixer vos fichier par
.android.js
/.ios.js
- ou utiliser
Platform.OS === 'ios'
Les interactions
Vous avez déjà tenté de reproduire un comportement de type :hover
au tap d’un bouton sur un mobile ? C’est tout simplement impossible, il n’y pas vraiment de solution satisfaisante sur le web même avec l’utilisation de librairie comme FastClick
.
En natif, le feedback est instantanément perceptible grâce aux différents composants TouchableHighlight
, TouchableOpacity
et TouchableNativeFeedback
(Ripple effect <3).
Voici un très bon guide pour réaliser des boutons avec des comportements différents selon la plateforme utilisée
https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472#4f6e
Pro tip : utilisez la property hitSlop
pour étendre la zone de clic :
hitSlop={{ top: 10, left: 15, bottom: 10, right: 15 }}
Le clavier
Combien de temps avez-vous perdu pour arriver à gérer correctement l’affichage du clavier lors du focus dans un champ de formulaire ? Vous avez galéré de longues heures avec ionic-plugin-keyboard
?
Les composants Keyboard
, KeyboardAvoidingView
ou encore la méta donnée pour Android android:windowSoftInputMode="adjustResize"
sont là pour vous aider et vous allez adorer leurs simplicités d’utilisation.
Pull to refresh et infinite scroll
Pour activer la fonctionnalité pull to refresh
dans une ListView
, il suffit d’ajouter la propriété refreshControl
et de rendre un composant de RefreshControl
. Et c’est tout !
<ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } ... >
Pour le scroll infini, il faut utiliser la propriété onEndReached
en lui passant un callback, on peut également configurer la distance de déclenchement avec la propriété onEndReachedThreshold
.
Les animations
La librairie Animated
qui est inclus de base permet de gérer les effets les plus courants : des transitions, des translations et leurs effets (avec Easing
).
Voici un exemple pour reproduire l’animation du header de Twitter lors du scroll : https://rnplay.org/apps/vWGQNg
Si vous souhaitez aller plus loin, je vous conseille l’excellente librairie de WIX https://github.com/wix/react-native-interactable
Les icônes
Utilisez react-native-vector-icons
qui supporte très bien les polices custom https://github.com/oblador/react-native-vector-icons#custom-fonts
La navigation
C’est le bordel complet ! Pour résumer, soit vous choisissez une librairie qui a une implémentation JS; soit une librairie qui a une implémentation native.
Vous avez le choix entre :
- https://reactnavigation.org/
- https://github.com/aksonov/react-native-router-flux
- https://github.com/wix/react-native-navigation
- https://github.com/airbnb/native-navigation
Pro tip : utilisez une librairie avec une implémentation native pour avoir de meilleurs performances.
Les vidéos
Vous allez enfin pouvoir lancer des vidéos Youtube sans être forcément en mode fullscreen grâce à https://github.com/inProgress-team/react-native-youtube
Sinon utilisez https://github.com/react-native-community/react-native-video avec https://github.com/cornedor/react-native-video-player
Pro tip : si vous avez un compte Vimeo premium, vous pourrez récupérer le flux mp4 de vos vidéos et les lire grâce au player react-native-video
.
InteractionManager
Une action à dispatcher ? Une animation à démarrer ? Pour améliorer la fluidité de votre application, il vaut mieux attendre que les transitions entre les écrans ou que les animations soit terminées. Pour ça utilisez : InterationManager.runAfterInteractions
:
componentDidMount() { InteractionManager.runAfterInteractions(() => { this.props.userActions.fetchContacts(); this.setState({isReady: true}); }); }
Collapsable (property)
J’ai rencontré des bugs de layout avec des bouts d’ihm qui disparaissaient quand mon composant se mettait à jour, cf : https://github.com/facebook/react-native/issues/12234
La solution consiste à ajouter une propriété collapsable={false}
sur la vue qui wrap le composant http://facebook.github.io/react-native/releases/0.43/docs/view.html#collapsable :
<View style={styles.content} collapsable={false}> <ActivityIndicator size="small" color="#000" loading={this.state.renderFull}/> </View>
Offline / persistance des données
Le couple AsyncStorage
combiné à redux-persist
https://github.com/rt2zz/redux-persist fait tout à fait l’affaire.
Si vous avez des besoins plus complexe, je vous suggère d’aller voir du côté de Realm ou de Firebase
Les tests d’IHM automatisés
La librairie Appium est excellente mais le code pour écrire pour les tests fonctionnels reste complexe à lire et à maintenir. http://chase-seibert.github.io/blog/2017/01/06/appium-react-native-quickstart.html
Un projet très prometteur (encore par la team de WIX) existe mais il ne supporte que iOS pour le moment : https://github.com/wix/detox. La version Android arrivera un peu plus tard et sera basé sur Espresso
.
Je vous conseille également de lire cet article d’un des développeurs de code-push et de regarder cette vidéo qui montre la synchronisation d’une application sur plusieurs devices (c’est hyper impressionnant)
http://blog.nparashuram.com/2017/03/reactconf-web-like-release-and.html
https://youtu.be/iMLpUVZseEg?t=691
Les mise-à-jours de RN
Un outil officiel existe pour mettre à jour votre projet mais je n’ai jamais réussi à m’en sortir https://facebook.github.io/react-native/docs/upgrading.html
Je vous conseille d’aller voir ce projet qui permet de voir toutes les différences entre chaque version https://github.com/ncuillery/rn-diff.
La communauté
Le groupe facebook https://www.facebook.com/groups/react.native.community/ est très actif, vous trouverez beaucoup de support ou d’exemples d’application ou d’utililsation de librairie.
Autres librairies
Carte
La librairie de Airbnb https://github.com/airbnb/react-native-maps est maintenant recommandée par Facebook, il n’y a pas de raison de ne pas s’en servir.
Notifications Push
Je vous conseille d’utiliser firebase https://github.com/evollu/react-native-fcm même si c’est un peu l’enfer à installer.
Je vous recommande de suivre les instructions attentivement et sans utiliser POD pour iOS, sinon vous serez dans le même cas de figure que ce dévelopeur : https://school.shoutem.com/lectures/add-serverless-firebase-push-notifications-react-native-app-chat-app-part-2/
Informations du téléphone
On a souvent besoin de récupérer des informations comme la locale, la timezone ou encore la version de l’app qui est installée : https://github.com/rebeccahughes/react-native-device-info
Conclusion
React Native est à la hauteur de ses promesses et nous offre un résultat bluffant. Cette technologie répond à toutes les attentes que l’on a d’une application native et les gains de temps entre debbugage et développements multi-plateformes sont impressionnants.
Le développement de React Native est toujours très actif, une nouvelle version sort chaque mois en apportant chaque fois de nombreuses corrections et nouvelles fonctionnalités.
Microsoft vient d’annoncer son support officiel https://ericroz.wordpress.com/2017/03/09/react-native-windows-moving-to-microsoft-github-organization/ il n’y a donc plus de raison de ne pas franchir le pas.