J’ai fait une application native avec React NativeCocoaHeads Paris Octobre 2016
Danielo JEAN-LOUISDéveloppeur Front-end chez DigitasLBi France
React Nativepar facebook
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/
- 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 ?
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/
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/
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/
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/
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)
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
Learn-once write-anywhere
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
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
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) ...
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
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
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
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
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
Les composants sont partout
Pokedex (ListView)
Les composants sont partout
Pokedex (ListView)
PokedexItem (View)
Les composants sont partout
Pokedex (ListView)
PokedexItem (View)
Image (Fourni par RN)
Les composants sont partout
Pokedex (ListView)
PokedexItem (View)
Image (Fourni par RN)
Text (Fourni par RN)
Premier problème des développeurs mobile de facebook :Mise en page sur une application native
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/
Deuxième problème des développeurs mobile de facebook :Le temps de compilation
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
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
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
Démo
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
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/