Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to React Native

Intro to React Native

Picnic Code workshop about React Native (https://www.gui.uva.es/taller-introduccion-a-react-native/)

Demo and guide available in https://github.com/patoroco/react-native-workshop

Jorge Maroto

May 20, 2016
Tweet

More Decks by Jorge Maroto

Other Decks in Programming

Transcript

  1. mobile Jorge Maroto García
 @patoroco

  2. Mobile in ticketea 2

  3. Technologies 3 Swift + JavaScript + [Obj-C]

  4. 4 Checkpoint

  5. ‣ From 2012 ‣ QR-Scanner for iOS & Android ‣

    Several entrances to the same venue ‣ Recurrent events vs. big festivals ‣ Bad lighting conditions ‣ Battery issues Checkpoint :: Product 5
  6. ‣ Obj-C / Java ‣ iOS 6 / Android 1.5

    ‣ Core Data / SQLite ‣ ZXing / ZBar ‣ Captuvo SDK Checkpoint :: Tech 6
  7. 7 Box Office

  8. ‣ From 2013 ‣ Ad-hoc installations ‣ Numbered and not

    numbered venues ‣ Printers Box Office :: Product 8
  9. 9 ticketea

  10. ‣ Geolocated events ‣ Push notifications ‣ Bridging with some

    parts in current frontend Purchase app :: Product 10
  11. Purchase app :: Tech 11 vs.

  12. Purchase app :: Tech II 12 React Native

  13. ‣ Framework by facebook ‣ Using React ‣ Easy bridging

    native code ‣ Multiplatform apps written in JavaScript (actually ES2015) What is React Native? 13
  14. ‣ Not a webview ‣ Not a 100% code reuse

    ‣ Closer to frontend development than native development What is not React Native? 14
  15. ‣ It's a pattern supported by a library ‣ Different

    implementations: ReactJS / React Native ‣ Everything in React is a component ‣ Data flow is unidirectional What is React? 15
  16. Everything is a component 16

  17. Everything is a component 17

  18. ‣ React always re-renders ‣ Every component has two important

    things ‣ state ‣ properties (props) Virtual DOM 18
  19. Differences in Virtual DOM 19

  20. State changes 20

  21. ‣ Support for iOS / Android index.ios.js / index.android.js ‣

    ToastAndroid / ActivityIndicatorIOS Differences iOS <—> Android 21
  22. ‣ Native modules ‣ JavaScript side ‣ Objective-C ‣ Java

    Bridging native code 22
  23. ‣ There is a great getting started tutorial from facebook

    ‣ Better on OS X ‣ XCode > 7.0 / Android 6.0 (API 23) ‣ node 4.0 + watchman + flow npm install -g react-native-cli react-native init <project_name> Getting started 23
  24. 24 Demo 1

  25. JSX & props 25 <Component propName=“propValue”> <Text>Hello</Text> </Component> this.props.propName this.props.children

  26. Components lifecycle 26 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/

  27. Components lifecycle 27 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/

  28. Components lifecycle 28 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/

  29. Components lifecycle 29 http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/

  30. 30 Demo 2

  31. 31 Demo 3

  32. 32 Do you like it?

  33. Next chapters… 33 ‣ React Native Playgrounds (https://rnplay.org/) ‣ rnpm

    (React Native Package Manager) ‣ Redux ‣ Reactotron ‣ Hybrid apps (old native app + parts in React Native) ‣ RealmJS ‣ Testing ‣ Microsoft Code Push ‣ …
  34. 34 Knowledgements

  35. Issues 35 ‣ Blocking animations ‣ Some inconsistencies between iOS

    / Android ‣ We’ve hit around 12 bugs and reported some ‣ Early adopting on Android
  36. Advantages 36 ‣ Sharing code between platforms (including tests) ‣

    Testing in JS-way (no simulator needed) ‣ Web developers can easily jump into react-native ‣ Some things are done faster (less boilerplate) ‣ React and redux are a killer combo ‣ Learning curve ‣ Introduce new people to the project
  37. Disadvantages 37 ‣ Missing more best practices ‣ Storyboards vs.

    (JSX + flexbox) ‣ (Swift / Obj-C / Java / Kotlin) vs. JS ‣ Mature ecosystem with less WTF/min ‣ More libraries available
  38. questions? mobile questions?