SlideShare une entreprise Scribd logo
@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 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

Contenu connexe

Tendances

Geek Time December 2016 : Bitcoin/Blockchain
Geek Time December 2016 : Bitcoin/BlockchainGeek Time December 2016 : Bitcoin/Blockchain
Geek Time December 2016 : Bitcoin/Blockchain
OLBATI
 
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
Publicis Sapient Engineering
 
Geek Time December 2016 : Swagger II
Geek Time December 2016 : Swagger IIGeek Time December 2016 : Swagger II
Geek Time December 2016 : Swagger II
OLBATI
 
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
Publicis Sapient Engineering
 
Un site sans CMS (Teknseo 2014)
Un site sans CMS (Teknseo 2014)Un site sans CMS (Teknseo 2014)
Un site sans CMS (Teknseo 2014)
Didcode
 
Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Paris Container Day 2016 : Cloudunit v2 (Treeptik)Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Publicis Sapient Engineering
 
XebiCon'16 : Choisissez votre style avec Docker & Amazon Web Services Par Al...
XebiCon'16 : Choisissez votre style avec Docker & Amazon Web Services  Par Al...XebiCon'16 : Choisissez votre style avec Docker & Amazon Web Services  Par Al...
XebiCon'16 : Choisissez votre style avec Docker & Amazon Web Services Par Al...
Publicis Sapient Engineering
 
Ionic
IonicIonic

Tendances (8)

Geek Time December 2016 : Bitcoin/Blockchain
Geek Time December 2016 : Bitcoin/BlockchainGeek Time December 2016 : Bitcoin/Blockchain
Geek Time December 2016 : Bitcoin/Blockchain
 
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
XebiCon'18 - Comment j'ai développé un jeu vidéo avec des outils de développe...
 
Geek Time December 2016 : Swagger II
Geek Time December 2016 : Swagger IIGeek Time December 2016 : Swagger II
Geek Time December 2016 : Swagger II
 
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
XebiCon'18 - Les utilisateurs finaux, les oubliés de nos produits !
 
Un site sans CMS (Teknseo 2014)
Un site sans CMS (Teknseo 2014)Un site sans CMS (Teknseo 2014)
Un site sans CMS (Teknseo 2014)
 
Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Paris Container Day 2016 : Cloudunit v2 (Treeptik)Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Paris Container Day 2016 : Cloudunit v2 (Treeptik)
 
XebiCon'16 : Choisissez votre style avec Docker & Amazon Web Services Par Al...
XebiCon'16 : Choisissez votre style avec Docker & Amazon Web Services  Par Al...XebiCon'16 : Choisissez votre style avec Docker & Amazon Web Services  Par Al...
XebiCon'16 : Choisissez votre style avec Docker & Amazon Web Services Par Al...
 
Ionic
IonicIonic
Ionic
 

En vedette

Ti cs
Ti csTi cs
Ti cs
Alexfrank
 
Presentation1
Presentation1Presentation1
Presentation1
Kshitiz Rimal
 
XebiCon'16 : React Native et Redux, une complémentarité hors du commun. Par ...
XebiCon'16 : React Native et Redux, une complémentarité hors du commun.  Par ...XebiCon'16 : React Native et Redux, une complémentarité hors du commun.  Par ...
XebiCon'16 : React Native et Redux, une complémentarité hors du commun. Par ...
Publicis Sapient Engineering
 
Redux with React Native
Redux with React NativeRedux with React Native
Redux with React Native
Dan Jensen
 
React native redux_sharing
React native redux_sharingReact native redux_sharing
React native redux_sharing
Sam Lee
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
Gil Fink
 
React Redux React Native
React Redux React NativeReact Redux React Native
React Redux React Native
Leonardo YongUk Kim
 
Introduction to Redux
Introduction to ReduxIntroduction to Redux
Introduction to Redux
Ignacio Martín
 

En vedette (8)

Ti cs
Ti csTi cs
Ti cs
 
Presentation1
Presentation1Presentation1
Presentation1
 
XebiCon'16 : React Native et Redux, une complémentarité hors du commun. Par ...
XebiCon'16 : React Native et Redux, une complémentarité hors du commun.  Par ...XebiCon'16 : React Native et Redux, une complémentarité hors du commun.  Par ...
XebiCon'16 : React Native et Redux, une complémentarité hors du commun. Par ...
 
Redux with React Native
Redux with React NativeRedux with React Native
Redux with React Native
 
React native redux_sharing
React native redux_sharingReact native redux_sharing
React native redux_sharing
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
 
React Redux React Native
React Redux React NativeReact Redux React Native
React Redux React Native
 
Introduction to Redux
Introduction to ReduxIntroduction to Redux
Introduction to Redux
 

Similaire à Xebicon2016 - React Native & Redux

Unikernel Xebicon 2016
Unikernel Xebicon 2016Unikernel Xebicon 2016
Unikernel Xebicon 2016
Jean-Baptiste Claramonte
 
Xebicon'16 : Introduction à Unikernel. Par Jean-Baptiste Claramonte et Tomas ...
Xebicon'16 : Introduction à Unikernel. Par Jean-Baptiste Claramonte et Tomas ...Xebicon'16 : Introduction à Unikernel. Par Jean-Baptiste Claramonte et Tomas ...
Xebicon'16 : Introduction à Unikernel. Par Jean-Baptiste Claramonte et Tomas ...
Publicis Sapient Engineering
 
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Horacio Gonzalez
 
XebiCon'16 : Parenting 2.0 : calmer son bébé avec du machine learning et un R...
XebiCon'16 : Parenting 2.0 : calmer son bébé avec du machine learning et un R...XebiCon'16 : Parenting 2.0 : calmer son bébé avec du machine learning et un R...
XebiCon'16 : Parenting 2.0 : calmer son bébé avec du machine learning et un R...
Publicis Sapient Engineering
 
FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidement
Horacio Gonzalez
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
Horacio Gonzalez
 
XebiCon'16 : A la découverte de Nomad d'Hashicorp. Par Sergio Dos Santos, Dév...
XebiCon'16 : A la découverte de Nomad d'Hashicorp. Par Sergio Dos Santos, Dév...XebiCon'16 : A la découverte de Nomad d'Hashicorp. Par Sergio Dos Santos, Dév...
XebiCon'16 : A la découverte de Nomad d'Hashicorp. Par Sergio Dos Santos, Dév...
Publicis Sapient Engineering
 
XebiCon'16 : Data Science & Craftsmanship : Je t'aime, moi non plus. Par Yoan...
XebiCon'16 : Data Science & Craftsmanship : Je t'aime, moi non plus. Par Yoan...XebiCon'16 : Data Science & Craftsmanship : Je t'aime, moi non plus. Par Yoan...
XebiCon'16 : Data Science & Craftsmanship : Je t'aime, moi non plus. Par Yoan...
Publicis Sapient Engineering
 
XebiCon'18 - La sécurité, douce illusion même en 2018
XebiCon'18 - La sécurité, douce illusion même en 2018XebiCon'18 - La sécurité, douce illusion même en 2018
XebiCon'18 - La sécurité, douce illusion même en 2018
Publicis Sapient Engineering
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtools
Christophe Villeneuve
 
[Agile Laval 2016] La relecture de code : avant tout des pratiques
[Agile Laval 2016] La relecture de code : avant tout des pratiques[Agile Laval 2016] La relecture de code : avant tout des pratiques
[Agile Laval 2016] La relecture de code : avant tout des pratiques
Eric SIBER
 
[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap
Thomas Bassetto
 
REX react native
REX react nativeREX react native
REX react native
Florent Le Gall
 
React Native - Développez vos application native en JS
React Native - Développez vos application native en JSReact Native - Développez vos application native en JS
React Native - Développez vos application native en JS
Yann Duval
 
React xp
React xpReact xp
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
Jean-Pierre Vincent
 
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveurXebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
Publicis Sapient Engineering
 
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
Publicis Sapient Engineering
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Web
ekino
 
Gulp fiction, Builder, tester, livrer, sans tomber dans les poms - breizhcam...
Gulp fiction, Builder, tester, livrer, sans tomber dans les poms  - breizhcam...Gulp fiction, Builder, tester, livrer, sans tomber dans les poms  - breizhcam...
Gulp fiction, Builder, tester, livrer, sans tomber dans les poms - breizhcam...
mbrechet
 

Similaire à Xebicon2016 - React Native & Redux (20)

Unikernel Xebicon 2016
Unikernel Xebicon 2016Unikernel Xebicon 2016
Unikernel Xebicon 2016
 
Xebicon'16 : Introduction à Unikernel. Par Jean-Baptiste Claramonte et Tomas ...
Xebicon'16 : Introduction à Unikernel. Par Jean-Baptiste Claramonte et Tomas ...Xebicon'16 : Introduction à Unikernel. Par Jean-Baptiste Claramonte et Tomas ...
Xebicon'16 : Introduction à Unikernel. Par Jean-Baptiste Claramonte et Tomas ...
 
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
 
XebiCon'16 : Parenting 2.0 : calmer son bébé avec du machine learning et un R...
XebiCon'16 : Parenting 2.0 : calmer son bébé avec du machine learning et un R...XebiCon'16 : Parenting 2.0 : calmer son bébé avec du machine learning et un R...
XebiCon'16 : Parenting 2.0 : calmer son bébé avec du machine learning et un R...
 
FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidement
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
 
XebiCon'16 : A la découverte de Nomad d'Hashicorp. Par Sergio Dos Santos, Dév...
XebiCon'16 : A la découverte de Nomad d'Hashicorp. Par Sergio Dos Santos, Dév...XebiCon'16 : A la découverte de Nomad d'Hashicorp. Par Sergio Dos Santos, Dév...
XebiCon'16 : A la découverte de Nomad d'Hashicorp. Par Sergio Dos Santos, Dév...
 
XebiCon'16 : Data Science & Craftsmanship : Je t'aime, moi non plus. Par Yoan...
XebiCon'16 : Data Science & Craftsmanship : Je t'aime, moi non plus. Par Yoan...XebiCon'16 : Data Science & Craftsmanship : Je t'aime, moi non plus. Par Yoan...
XebiCon'16 : Data Science & Craftsmanship : Je t'aime, moi non plus. Par Yoan...
 
XebiCon'18 - La sécurité, douce illusion même en 2018
XebiCon'18 - La sécurité, douce illusion même en 2018XebiCon'18 - La sécurité, douce illusion même en 2018
XebiCon'18 - La sécurité, douce illusion même en 2018
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtools
 
[Agile Laval 2016] La relecture de code : avant tout des pratiques
[Agile Laval 2016] La relecture de code : avant tout des pratiques[Agile Laval 2016] La relecture de code : avant tout des pratiques
[Agile Laval 2016] La relecture de code : avant tout des pratiques
 
[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap
 
REX react native
REX react nativeREX react native
REX react native
 
React Native - Développez vos application native en JS
React Native - Développez vos application native en JSReact Native - Développez vos application native en JS
React Native - Développez vos application native en JS
 
React xp
React xpReact xp
React xp
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveurXebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
Xebicon'18 - Spark in jail : conteneurisez vos traitements data sans serveur
 
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Web
 
Gulp fiction, Builder, tester, livrer, sans tomber dans les poms - breizhcam...
Gulp fiction, Builder, tester, livrer, sans tomber dans les poms  - breizhcam...Gulp fiction, Builder, tester, livrer, sans tomber dans les poms  - breizhcam...
Gulp fiction, Builder, tester, livrer, sans tomber dans les poms - breizhcam...
 

Xebicon2016 - React Native & Redux