How to use ReactNative with librairies from the web like Redux.

1. @xebiconfr #xebiconfr
React Native &
Redux
Paul-Guillaume
Déjardin

2. @xebiconfr #xebiconfr
Qui suis-je ?
2
● Paul-Guillaume Déjardin
● Xebia
● @pgdejardin
● https://github.com/pgdejardin

3. @xebiconfr #xebiconfr
Sommaire
● Le mobile
● React & Co.
● Intégration d'une librairie web : Redux
● L'environnement autour de React Native
3

4. @xebiconfr #xebiconfr
Le Mobile
1
4

5. @xebiconfr #xebiconfr
Comparatif pour dev sur mobile (vue par un dev front)
5
1

6. @xebiconfr #xebiconfr
React Native : la solution miracle ?
6
1

7. @xebiconfr #xebiconfr
React & Co.
2
7

8. @xebiconfr #xebiconfr
React : Qui ? Quoi ? Comment ?
● JSX
● Virtual DOM
● One way data binding
● "Architecture beyond HTML" (Netflix, Paypal)
8
2

9. @xebiconfr #xebiconfr
React ? A quoi ça ressemble ?
9
2

10. @xebiconfr #xebiconfr
Qui fait du React Native ?
10
2
Facebook group AirBnBDiscord

11. @xebiconfr #xebiconfr
Et React Native ? À quoi ça ressemble ?
11
2

12. @xebiconfr #xebiconfr
Qu'est-ce qu'il faut pour commencer ?
● Choisir sa cible et son environnement de développement
○ IOS : Mac
○ Android : Mac, Linux, Windows
● Un IDE ou un éditeur de texte
○ XCode/Android Studio
● Node.js
○ brew install node
○ nvm install 6
● Watchman
○ brew install watchman
● Le client react-native-cli
○ npm install -g react-native-cli
12
2

13. @xebiconfr #xebiconfr
C'est parti !
● react-native init MyAwesomeProject
● react-native run-ios (ou run-android)
13
2

14. @xebiconfr #xebiconfr
Intégration d'une lib : Redux
3
14

15. @xebiconfr #xebiconfr
Redux
15
3

16. @xebiconfr #xebiconfr
Redux
16
3

17. @xebiconfr #xebiconfr
Un peu plus de code ?
4
17

18. @xebiconfr #xebiconfr
Continuous delivery et
crash reporting
5
18

19. @xebiconfr #xebiconfr
Les outils autour du dev avec React-Native
● Sentry/BugSnag pour les bugs
Javascripts
● Crashlytics pour la couche native
● Déploiement possible avec Fastlane
● Tests avec Jest
19
5

20. @xebiconfr #xebiconfr
Conclusion
6
20

21. @xebiconfr #xebiconfr
Conclusion
21
6
Cons
● Très jeune
● Pas tous les composants natifs
disponibles
● Maturité des composants iOS Vs.
Android
Pros
● Vision et rendu natif
● De bonnes performances
● Intégration avec les libs web / natif
très facile
● C'est du React
● Déploiement instantané sur les stores
(si uniquement code JS)
● Expérience développement
excellente

22. @xebiconfr #xebiconfr
Thank you!
22
6
https://github.com/pgdejardin/xebicon-reactnative-redux

23. @xebiconfr #xebiconfr
Références
● https://github.com/pgdejardin/xebicon-reactnative-redux
● La documentation officielle
● Showcase d'application faite en React-Native
● Des exemples d'applications et modules avec Redux
● Ajouter Crashlytics à son application React-Native iOS
● Ajouter Sentry pour capturer les bugs dans le javascript
● Petit comparatif des frameworks de tests avec React-Native
23
6