Download - J'ai fait une app native en React Native
![Page 1: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/1.jpg)
J’ai fait une application native avec React NativeCocoaHeads Paris Octobre 2016
![Page 2: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/2.jpg)
Danielo JEAN-LOUISDéveloppeur Front-end chez DigitasLBi France
![Page 3: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/3.jpg)
React Nativepar facebook
![Page 4: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/4.jpg)
Pourquoi React Native ?
- La mise en page sur mobile peut devenir (rapidement) difficile et problématique
Sourceshttps://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/
![Page 5: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/5.jpg)
- La mise en page sur mobile peut devenir (rapidement) difficile et problématique- Faible productivité des développeurs mobile chez facebook (notamment lié à la compilation)
Sourceshttps://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/
Pourquoi React Native ?
![Page 6: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/6.jpg)
Pourquoi React Native ?
- La mise en page sur mobile peut devenir (rapidement) difficile et problématique- Faible productivité des développeurs mobile chez facebook (notamment lié à la compilation)
facebook avait besoin, pour du développement natif, de la vitesse de développement web
Sourceshttps://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/
![Page 7: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/7.jpg)
Qu’est-ce que React Native ?
Ça ne fait pas une web appÇa ne fait pas une application hybride
Sourceshttps://facebook.github.io/react-native/https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/
![Page 8: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/8.jpg)
Qu’est-ce que React Native ?
Ça ne fait pas une web appÇa ne fait pas une application hybride
Ça fait une application native
Sourceshttps://facebook.github.io/react-native/https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/
![Page 9: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/9.jpg)
Qu’est-ce que React Native ?
Ça ne fait pas une web appÇa ne fait pas une application hybride
Ça fait une application native
React native utilise le javascript pour la logique et le natif pour l’interface utilisateurC’est ReactJS appliqué pour faire une application native
Sourceshttps://facebook.github.io/react-native/https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/
![Page 10: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/10.jpg)
Pour information, ReactJS, c’est :
- Une bibliothèque javascript créée et maintenue par facebook- ReactJS est disponible depuis 2013- ReactJS possède 49 050 étoiles sur github (Swift n’a “que” 33 000 étoiles)
![Page 11: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/11.jpg)
React Native permet d’utiliser tout ce que vous avez appris avec React pour le web, pour créer une application native pour iOS, MacOS*, Android et Windows (UWP)*
Sourceshttps://github.com/ReactWindows/react-native-windowshttps://github.com/ptmt/react-native-macos
![Page 12: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/12.jpg)
Learn-once write-anywhere
![Page 13: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/13.jpg)
Le javascript, c’est cool maintenant
- Possibilité de créer de vraies classes- Le spread opérateur- Possibilité de scoper les variables (mot-clé let)- Et plein d’autres choses
![Page 14: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/14.jpg)
Le javascript, c’est cool maintenant
- Possibilité de créer de vraies classes- Le spread opérateur- Possibilité de scoper les variables (mot-clé let)- Et plein d’autres choses
- Et entre-nous, Swift copie un peu l’ecmascript
![Page 15: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/15.jpg)
Que fait React-native ?
- Expose les API Native pour y accéder en javascript- Par exemple : UIScrollView (iOS) / ScrollView (Android) -> ScrollView (RN) UITableView (iOS) / ListView (Android) -> ListView (RN) UIView (iOS) / View (Android) -> View (RN) ...
![Page 16: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/16.jpg)
Concurrents de React Native
React native
JS
Oui
React
Oui
Oui
Non
Oui
Langage
Multiple déploiement
Moteur detemplate
Déployablesur le web
Bridge natif
Utilise unewebview
Mise en pagefacile*
NativeScript
JS
Oui
Angular
Oui
Oui
Non
Oui
PhoneGap
HTML/CSS/JS
Oui
Au choix
Oui
Non
Oui
Oui
ionic
HTML/CSS/JS
Oui
Angular
Oui
Non
Oui
Oui
Xamarin
C#
Non
Au choix
Non
Oui
Non
Non
Natif
Obj-C/Swift/Java
Non
Au choix
Non
Oui
Oui
Non
* Appréciation de l’auteur
![Page 17: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/17.jpg)
Pré-requis
Node js (brew install node)Watchman (brew install watchman)react-native-cli (npm install -g react-native-cli)
Sourceshttps://facebook.github.io/react-native/docs/getting-started.html
![Page 18: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/18.jpg)
Pré-requis
Node js (brew install node)Watchman (brew install watchman)react-native-cli (npm install -g react-native-cli)
Ouvrir la console et entrer :react-native init myProjectcd myProjectreact-native run-ios / run-android
Sourceshttps://facebook.github.io/react-native/docs/getting-started.html
![Page 19: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/19.jpg)
Exemple de projet
index.android.js : Point d’entée Androidindex.ios.js : Point d’entée iOS/ios/ : Un projet xcode/android/ : Un projet androidpackage.json : un fichier de dépendances (comme .podspec/composer.json)
L’application a un point d’entrée propre à l’OS de destination. Il est possible de faire de même avec des composants en les suffixant leur fichier par android.js ou ios.js
Sourceshttps://facebook.github.io/react-native/docs/platform-specific-code.html
![Page 20: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/20.jpg)
React Native pense composant (comme ReactJS)
React gère uniquement la vueReact ne fournit pas de contrôleurReact ne fournit pas d’écouteur global ou de système de délégationLe flux de données se veut unidirectionnel. Seul le parent communique avec son enfant et vice-versa
React, c’est simplement des composants, ils sont le coeur de sa philosophie Avantages : - Réutilisables - Testables - Maintenables
![Page 21: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/21.jpg)
Les composants sont partout
Pokedex (ListView)
![Page 22: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/22.jpg)
Les composants sont partout
Pokedex (ListView)
PokedexItem (View)
![Page 23: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/23.jpg)
Les composants sont partout
Pokedex (ListView)
PokedexItem (View)
Image (Fourni par RN)
![Page 24: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/24.jpg)
Les composants sont partout
Pokedex (ListView)
PokedexItem (View)
Image (Fourni par RN)
Text (Fourni par RN)
![Page 25: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/25.jpg)
Premier problème des développeurs mobile de facebook :Mise en page sur une application native
![Page 26: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/26.jpg)
Flexbox à la rescousse
- React Native se base sur la mise en page flexbox de HTML5 (dans une version simplifiée)- React Native utilise le même principe de mise en page de HTML (les éléments sont empliés par défaut)- Beaucoup plus simple qu’autolayout / Interface builder / NSLayoutConstraint
<View> <Text>My text</Text></View>
(oui mon texte fait entièrement la largeur de mon conteneur, et ce, sans code supplémentaire. Je rajoute juste flex:1 et je remplis la hauteur)
Sourceshttps://css-tricks.com/snippets/css/a-guide-to-flexbox/
![Page 27: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/27.jpg)
Deuxième problème des développeurs mobile de facebook :Le temps de compilation
![Page 28: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/28.jpg)
Hot reload à la rescousse
Sourceshttps://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html#implementation-in-a-nutshellhttps://facebook.github.io/watchman/
Utilisation du Hot Module Replacement (HMR) de Webpack couplé à watchman pour recharger l’applicationPermet le live reload
![Page 29: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/29.jpg)
Sourceshttps://github.com/DanYellow/ReactNativePokedex/tree/master
Deux façons de communiquer avec le natif
Native Modules : Permet d’accéder aux API native ou une vue native qui n’a pas besoin d’être consciente de React.ex : EventKit ou UNNotificationRequestNative UI Components : Permet de définir une vue native en tant que composant React
![Page 30: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/30.jpg)
Logs / Debug
- L’application console de MacOS- La commande : react-native log-ios / log-android- La console de Xcode / Android studio- L’application elle-même (nécessite un debug scheme)- La console du navigateur Chrome
Sourceshttps://facebook.github.io/react-native/docs/debugging.html
![Page 31: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/31.jpg)
Démo
![Page 32: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/32.jpg)
Mon avis sur React Native
- Superbe transfomation de ReactJS pour l’environnement mobile- Excellente option pour du prototypage- Plaisir de développement ; facebook a développé un outil de qualité- Peut s’avérer inutile si on ne vise qu’iOS et qu’on connait ComponentKit- Nécessité d’utiliser des plugins pour des fonctionnalités basiques (orientation de l’appareil, version du système)- Enfin possible de faire de la mise en page sur mobile facilement
![Page 33: J'ai fait une app native en React Native](https://reader034.vdocument.in/reader034/viewer/2022042611/586e85a31a28aba0038b642d/html5/thumbnails/33.jpg)
MerciQuestions ?
For furtherhttps://github.com/jondot/awesome-react-nativehttp://browniefed.com/blog/react-native-layout-examples/https://js.coach/react-nativehttps://rnplay.org/https://github.com/facebook/react-native/tree/master/Examples/