J'ai fait une app native en React Native

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/