REX react native

R E X R e a c t N a t i v e

F l o r e n t L e G a l l @ f l o r n t # m o i s d u j s

Au programme

• Qu’est-ce que React Native ? • Pourquoi nous l’avons choisi chez Fluo • Notre retour • Démo

React Native ?

• Pourquoi Facebook a fait React Native ? • “Our Biggest Mistake Was Was

Betting Too Much On HTML5” - Mark Zuckerberg 2012

• “What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.”

• “Learn once, write anywhere”

React Native ?

• Qu’est-ce que React Native ? • Un pont entre une VM JS et du

code natif (composants, services) • Un “virtual dom” qui manipule

des composants • Les composants React sont

implémentés en JS • Les composants de base sont

implémentés en natifs : • <View> • <Text> • <Image>

React Native ?

• Qu’est-ce que n’est pas React Native ? • React Native n’est pas un

framework mobile qui fait tourner React Web dans une WebView

Pourquoi nous avons choisi React Native ?

• Deux apps (IOS/Android) • Fluo.com (Angular/Java) • Des sites pour nos clients

B2B (Angular/Java) • Des APIs REST pour nos

clients B2B (Java) • Des SDKs pour les mobiles et

montres connectées • 3 langages avec les règles de

diagnostic d’assurance implémentées 3 fois par 3 développeurs

Pourquoi nous avons choisi React Native ?

• On attend un niveau de qualité natif • On souhaite une bonne expérience de développement • On veut partager du code entre tous nos produits (mono-repository) • On a déjà une application Native et l’on veut coder les nouveautés en

React Native

Les deux projets Fluo utilisant React Native

• L’application Fluo : Android / Ios : • Une application native avec les nouveautés implémentées en

ReactNative • Un SDK Objective-C / Android pour utiliser le coeur métier de Fluo (JS) :

• On n’utilise aucun composant React Native! • On utilise juste le bridge React Native pour communiquer entre les

deux

React Native : on aime

• L’expérience développeur • Hot-Reload • Flex box • Peu de fatigue Javascript : tout est outillé pour démarrer

directement en ES2017 : Modules, Async/Await, Fetch… • L’utilisation de Flow-Type pour typer les props et le state des

composants • Possibilité de débogguer le JS dans les devtools de Chrome

React Native : on aime

• L’intégration avec le code natif • Depuis le JS: on appelle des modules Objective-C ou Java • Depuis le code natif on émet des évènements • Il est aussi possible d’implémenter des composants en natif

• Productivité • Temps de développement record • En général, ça marche directement sur les deux plateformes

• Stabilité et fréquence des releases React Native

React Native : on aime moins• La documentation

• Elle n’est pas toujours complète, certaines propriétés sont juste énumérées et pas documentées • Mais ça s’améliore

• Le build IOS/Android par rapport à nos besoins • C’est très simple quand on démarre un projet “from scratch”, • Un peu plus difficile quand on intègre une application existante • Difficile quand on sort des cas d’usage classiques

• Pas de support pour l’appareil photo • Module externe react-native-camera

React Native fait-il de nous de bons développeurs mobile ?

• Plus productifs que si l’on développait séparément • Le rendu est très proche des maquettes faites par le designer

• Mais, les habitudes d’ergonomie du web ne s’appliquent pas toujours au mobile

• Les spécificités mobiles sont à apprendre : permissions, notifications, build, release sur les stores

React Native : seulement sur mobile ?

• React Native Windows

• https://blogs.windows.com/buildingapps/2016/04/13/react-native-on-the-universal-windows-platform/

• React Native MacOs

• https://github.com/ptmt/react-native-desktop

• React Native Samsung Tizen (Smart TV, mobiles)

• https://www.tizen.org/blogs/srsaul/2016/samsung-committed-bringing-react-native-tizen

• React Native Web

• https://github.com/necolas/react-native-web

React Native : uniquement avec React ?

• Angular 2 au dessus de React Native

• https://github.com/angular/react-native-renderer

Démo !

Le bon génie de l’assurance

MERCI