Upload
florent-le-gall
View
440
Download
0
Embed Size (px)
Citation preview
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