@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