xebicon2016 - react native & redux
Post on 11-Apr-2017
244 Views
Preview:
TRANSCRIPT
@xebiconfr #xebiconfr
React Native &
ReduxPaul-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 autour de React Native
3
@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 HTML" (Netflix, Paypal)
8
2
@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 : 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
@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 pour la couche native
● Déploiement possible avec Fastlane
● Tests avec Jest
19
5
@xebiconfr #xebiconfr
Conclusion
6
20
@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
@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● 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
top related