Demo de reactnative avec avantage/inconvéniant.

1. J’ai fait une application native avec React
Native
CocoaHeads Paris Octobre 2016

2. Danielo JEAN-LOUIS
Développeur Front-end chez DigitasLBi France

3. React Native
par facebook

4. Pourquoi React Native ?
- La mise en page sur mobile peut devenir
(rapidement) difficile et problématique
Sources
https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/

5. - 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)
Sources
https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/
Pourquoi React Native ?

6. 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
Sources
https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/

7. Qu’est-ce que React Native ?
Ça ne fait pas une web app
Ça ne fait pas une application hybride
Sources
https://facebook.github.io/react-native/
https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/

8. 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
Sources
https://facebook.github.io/react-native/
https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/

9. 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 utilisateur
C’est ReactJS appliqué pour faire une application native
Sources
https://facebook.github.io/react-native/
https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/

10. 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)

11. 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)*
Sources
https://github.com/ReactWindows/react-native-windows
https://github.com/ptmt/react-native-macos

12. Learn-once write-anywhere

13. 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

14. 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

15. 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)
...

16. Concurrents de React Native
React native
JS
Oui
React
Oui
Oui
Non
Oui
Langage
Multiple
déploiement
Moteur de
template
Déployable
sur le web
Bridge natif
Utilise une
webview
Mise en page
facile*
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

17. Pré-requis
Node js (brew install node)
Watchman (brew install watchman)
react-native-cli (npm install -g react-native-cli)
Sources
https://facebook.github.io/react-native/docs/getting-started.html

18. 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 myProject
cd myProject
react-native run-ios / run-android
Sources
https://facebook.github.io/react-native/docs/getting-started.html

19. Exemple de projet
index.android.js : Point d’entée Android
index.ios.js : Point d’entée iOS
/ios/ : Un projet xcode
/android/ : Un projet android
package.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
Sources
https://facebook.github.io/react-native/docs/platform-specific-code.html

20. React Native pense composant (comme ReactJS)
React gère uniquement la vue
React ne fournit pas de contrôleur
React ne fournit pas d’écouteur global ou de système de délégation
Le 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

21. Les composants sont partout
Pokedex (ListView)

22. Les composants sont partout
Pokedex (ListView)
PokedexItem (View)

23. Les composants sont partout
Pokedex (ListView)
PokedexItem (View)
Image (Fourni par RN)

24. Les composants sont partout
Pokedex (ListView)
PokedexItem (View)
Image (Fourni par RN)
Text (Fourni par RN)

25. Premier problème des développeurs mobile
de facebook :
Mise en page sur une application native

26. 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)
Sources
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

27. Deuxième problème des développeurs mobile
de facebook :
Le temps de compilation

28. Hot reload à la rescousse
Sources
https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html#implementation-in-a-nutshell
https://facebook.github.io/watchman/
Utilisation du Hot Module Replacement (HMR) de Webpack couplé à
watchman pour recharger l’application
Permet le live reload

29. Sources
https://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 UNNotificationRequest
Native UI Components : Permet de définir une vue native en tant
que composant React

30. 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
Sources
https://facebook.github.io/react-native/docs/debugging.html

31. Démo

32. 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

33. Merci
Questions ?
For further
https://github.com/jondot/awesome-react-native
http://browniefed.com/blog/react-native-layout-examples/
https://js.coach/react-native
https://rnplay.org/
https://github.com/facebook/react-native/tree/master/Examples/