Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@xebiconfr #xebiconfr
React Native &
Redux
Paul-Guillaume
Déjardin
@xebiconfr #xebiconfr
Qui suis-je ?
2
● Paul-Guillaume Déjardin
● Xebia
● @pgdejardin
● https://github.com/pgdejardin
@xebiconfr #xebiconfr
Sommaire
● Le mobile
● React & Co.
● Intégration d'une librairie web : Redux
● L'environnement autou...
@xebiconfr #xebiconfr
Le Mobile
1
4
@xebiconfr #xebiconfr
Comparatif pour dev sur mobile (vue par un dev front)
5
1
@xebiconfr #xebiconfr
React Native : la solution miracle ?
6
1
@xebiconfr #xebiconfr
React & Co.
2
7
@xebiconfr #xebiconfr
React : Qui ? Quoi ? Comment ?
● JSX
● Virtual DOM
● One way data binding
● "Architecture beyond HTM...
@xebiconfr #xebiconfr
React ? A quoi ça ressemble ?
9
2
@xebiconfr #xebiconfr
Qui fait du React Native ?
10
2
Facebook group AirBnBDiscord
@xebiconfr #xebiconfr
Et React Native ? À quoi ça ressemble ?
11
2
@xebiconfr #xebiconfr
Qu'est-ce qu'il faut pour commencer ?
● Choisir sa cible et son environnement de développement
○ IOS...
@xebiconfr #xebiconfr
C'est parti !
● react-native init MyAwesomeProject
● react-native run-ios (ou run-android)
13
2
@xebiconfr #xebiconfr
Intégration d'une lib : Redux
3
14
@xebiconfr #xebiconfr
Redux
15
3
@xebiconfr #xebiconfr
Redux
16
3
@xebiconfr #xebiconfr
Un peu plus de code ?
4
17
@xebiconfr #xebiconfr
Continuous delivery et
crash reporting
5
18
@xebiconfr #xebiconfr
Les outils autour du dev avec React-Native
● Sentry/BugSnag pour les bugs
Javascripts
● Crashlytics ...
@xebiconfr #xebiconfr
Conclusion
6
20
@xebiconfr #xebiconfr
Conclusion
21
6
Cons
● Très jeune
● Pas tous les composants natifs
disponibles
● Maturité des compos...
@xebiconfr #xebiconfr
Thank you!
22
6
https://github.com/pgdejardin/xebicon-reactnative-redux
@xebiconfr #xebiconfr
Références
● https://github.com/pgdejardin/xebicon-reactnative-redux
● La documentation officielle
●...
Upcoming SlideShare
Loading in …5
×

XebiCon'16 : React Native et Redux, une complémentarité hors du commun. Par Paul-Guillaume Dejardin, Développeur Front chez Xebia

264 views

Published on

React Native, développé par Facebook, permet une nouvelle approche du développement mobile dit "hybride". Basé sur le framework Javascript du même nom, il permet d'utiliser des composants natifs de la plateforme cible. De son coté, Redux, librairie, développée aussi Dan Abramov, pousse plus loin l’idée de Flux en réduisant au maximum la complexité. Le mariage des deux promet de faire des étincelles : Redux permet de gérer le “state” (état) de son application mobile avec une simplicité hors du commun et de pouvoir le manipuler au travers de nos composant React Native. Après une rapide présentation de Redux et React Native, découvrez à travers des exemples concis en live-coding le bien fondé de l'utilisation de Redux avec un projet React (Web ou Mobile).

Published in: Technology
  • Be the first to comment

  • Be the first to like this

XebiCon'16 : React Native et Redux, une complémentarité hors du commun. Par Paul-Guillaume Dejardin, Développeur Front chez Xebia

  1. 1. @xebiconfr #xebiconfr React Native & Redux Paul-Guillaume Déjardin
  2. 2. @xebiconfr #xebiconfr Qui suis-je ? 2 ● Paul-Guillaume Déjardin ● Xebia ● @pgdejardin ● https://github.com/pgdejardin
  3. 3. @xebiconfr #xebiconfr Sommaire ● Le mobile ● React & Co. ● Intégration d'une librairie web : Redux ● L'environnement autour de React Native 3
  4. 4. @xebiconfr #xebiconfr Le Mobile 1 4
  5. 5. @xebiconfr #xebiconfr Comparatif pour dev sur mobile (vue par un dev front) 5 1
  6. 6. @xebiconfr #xebiconfr React Native : la solution miracle ? 6 1
  7. 7. @xebiconfr #xebiconfr React & Co. 2 7
  8. 8. @xebiconfr #xebiconfr React : Qui ? Quoi ? Comment ? ● JSX ● Virtual DOM ● One way data binding ● "Architecture beyond HTML" (Netflix, Paypal) 8 2
  9. 9. @xebiconfr #xebiconfr React ? A quoi ça ressemble ? 9 2
  10. 10. @xebiconfr #xebiconfr Qui fait du React Native ? 10 2 Facebook group AirBnBDiscord
  11. 11. @xebiconfr #xebiconfr Et React Native ? À quoi ça ressemble ? 11 2
  12. 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. 13. @xebiconfr #xebiconfr C'est parti ! ● react-native init MyAwesomeProject ● react-native run-ios (ou run-android) 13 2
  14. 14. @xebiconfr #xebiconfr Intégration d'une lib : Redux 3 14
  15. 15. @xebiconfr #xebiconfr Redux 15 3
  16. 16. @xebiconfr #xebiconfr Redux 16 3
  17. 17. @xebiconfr #xebiconfr Un peu plus de code ? 4 17
  18. 18. @xebiconfr #xebiconfr Continuous delivery et crash reporting 5 18
  19. 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. 20. @xebiconfr #xebiconfr Conclusion 6 20
  21. 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. 22. @xebiconfr #xebiconfr Thank you! 22 6 https://github.com/pgdejardin/xebicon-reactnative-redux
  23. 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

×