REX react native
-
Upload
florent-le-gall -
Category
Software
-
view
440 -
download
0
Transcript of REX react native
![Page 1: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/1.jpg)
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
![Page 2: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/2.jpg)
Au programme
• Qu’est-ce que React Native ? • Pourquoi nous l’avons choisi chez Fluo • Notre retour • Démo
![Page 3: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/3.jpg)
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”
![Page 4: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/4.jpg)
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>
![Page 5: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/5.jpg)
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
![Page 6: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/6.jpg)
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
![Page 7: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/7.jpg)
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
![Page 8: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/8.jpg)
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
![Page 9: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/9.jpg)
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
![Page 10: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/10.jpg)
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
![Page 11: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/11.jpg)
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
![Page 12: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/12.jpg)
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
![Page 13: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/13.jpg)
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
![Page 14: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/14.jpg)
React Native : uniquement avec React ?
• Angular 2 au dessus de React Native
• https://github.com/angular/react-native-renderer
![Page 15: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/15.jpg)
Démo !
![Page 16: REX react native](https://reader030.fdocuments.net/reader030/viewer/2022021509/587f8dda1a28ab28518b60c1/html5/thumbnails/16.jpg)
Le bon génie de l’assurance
MERCI