Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

J'ai fait une app native en React Native

3,988 views

Published on

Demo de reactnative avec avantage/inconvéniant.

Published in: Software
  • Be the first to comment

J'ai fait une app native en React Native

  1. 1. J’ai fait une application native avec React Native CocoaHeads Paris Octobre 2016
  2. 2. Danielo JEAN-LOUIS Développeur Front-end chez DigitasLBi France
  3. 3. React Native par facebook
  4. 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. 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. 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. 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. 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. 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. 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. 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. 12. Learn-once write-anywhere
  13. 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. 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. 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. 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. 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. 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. 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. 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. 21. Les composants sont partout Pokedex (ListView)
  22. 22. Les composants sont partout Pokedex (ListView) PokedexItem (View)
  23. 23. Les composants sont partout Pokedex (ListView) PokedexItem (View) Image (Fourni par RN)
  24. 24. Les composants sont partout Pokedex (ListView) PokedexItem (View) Image (Fourni par RN) Text (Fourni par RN)
  25. 25. Premier problème des développeurs mobile de facebook : Mise en page sur une application native
  26. 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. 27. Deuxième problème des développeurs mobile de facebook : Le temps de compilation
  28. 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. 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. 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. 31. Démo
  32. 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. 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/

×