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

Introducción a React Native

Introducción a React Native

Charla presentada en el meetup local NSCoders Night Madrid introduciendo react-native y algunos de los motivos por los que en ticketea hemos comenzado una nueva aplicación con esta tecnología.

Presentada por Jorge Maroto @patoroco y Miguel Araujo @maraujop.

00927a856336d961bdc7028722fe5897?s=128

Ticketea Engineering

December 02, 2015
Tweet

Transcript

  1. a new approach Miguel Araujo (@maraujop) Jorge Maroto (@patoroco)

  2. @ticketeaeng

  3. We tried several options (including native) Why React Native at

    ticketea? 3
  4. Framework by facebook Using React Easy bridging native code Multiplatform

    apps written in JavaScript (actually ES2015) What is React Native? 4
  5. None
  6. Native modules JavaScript side Objective-C Java Bridging native code 6

  7. WHAT IS REACT?

  8. 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? 8
  9. Everything is a component 9

  10. None
  11. Not a webview Not a 100% code reuse Closer to

    frontend development than native development What is not React Native? 11
  12. React always re-renders Every component has a 2 important things

    state properties (props) Virtual DOM 12
  13. Differences in virtual DOM 13

  14. State changes 14

  15. Support for iOS / Android index.ios.js / index.android.js ToastAndroid /

    ActivityIndicatorIOS Differences between Android / iOS 15
  16. GETTING STARTED

  17. 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 Getting started 17
  18. react-native init <project_name> . ├── android ├── index.android.js ├── index.ios.js

    ├── ios ├── node_modules └── package.json react-native init 18
  19. Only compile when native code added react-native run-android compile on

    XCode facebook packager react-native start Autoreload on JavaScript changes Development process 19
  20. <Component propName=“propValue”> <Text>Hello</Text> </Component> this.props.propName this.props.children JSX & props 20

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

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

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

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

  25. Not storyboards (and much less autolayout) either XML layouts CSS

    + flexbox as styling language Design & layout 25
  26. HELLO NSCODERS

  27. All examples will be on Android simulator emulator DISCLAIMER

  28. None
  29. DEMO TIME

  30. None
  31. None
  32. SHOW ME THE CODE

  33. EVENTCARD

  34. None
  35. None
  36. None
  37. EVENTSTREAM

  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. EXTRA BALL

  45. react-native bundle Crashlytics (ɑ) iTunes Connect (β / prod.) Google

    Play (ɑ / β / prod.) Deploy 45
  46. Single place for our state Predictable code flow Redux has

    been very easy to test Flux & Redux 46
  47. CONCLUSIONS

  48. Blocking animations Some inconsistencies between iOS / Android We’ve hit

    around 12 bugs and reported some Early adopting on Android Issues 48
  49. 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 Advantages 49
  50. Missing more best practices Storyboards vs. (JSX + flexbox) (Swift

    / Obj-C / Java / Kotlin) vs. JS Mature ecosystem with less WTF/min More libraries available Disadvantages 50
  51. None
  52. THANKS

  53. ticketea questions?