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