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.

Ticketea Engineering

December 02, 2015
Tweet

More Decks by Ticketea Engineering

Other Decks in Programming

Transcript

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

    View Slide

  2. @ticketeaeng

    View Slide

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

    View Slide

  4. Framework by facebook
    Using React
    Easy bridging native code
    Multiplatform apps written in JavaScript (actually ES2015)
    What is React Native?
    4

    View Slide

  5. View Slide

  6. Native modules
    JavaScript side
    Objective-C
    Java
    Bridging native code
    6

    View Slide

  7. WHAT IS REACT?

    View Slide

  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

    View Slide

  9. Everything is a component
    9

    View Slide

  10. View Slide

  11. Not a webview
    Not a 100% code reuse
    Closer to frontend development than native development
    What is not React Native?
    11

    View Slide

  12. React always re-renders
    Every component has a 2 important things
    state
    properties (props)
    Virtual DOM
    12

    View Slide

  13. Differences in virtual DOM
    13

    View Slide

  14. State changes
    14

    View Slide

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

    View Slide

  16. GETTING STARTED

    View Slide

  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

    View Slide

  18. react-native init
    .

    ├── android

    ├── index.android.js

    ├── index.ios.js

    ├── ios

    ├── node_modules

    └── package.json

    react-native init
    18

    View Slide

  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

    View Slide


  20. Hello

    this.props.propName
    this.props.children
    JSX & props
    20

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. Not storyboards (and much less autolayout) either XML layouts
    CSS + flexbox as styling language
    Design & layout
    25

    View Slide

  26. HELLO NSCODERS

    View Slide

  27. All examples will be on Android simulator emulator
    DISCLAIMER

    View Slide

  28. View Slide

  29. DEMO TIME

    View Slide

  30. View Slide

  31. View Slide

  32. SHOW ME
    THE CODE

    View Slide

  33. EVENTCARD

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. EVENTSTREAM

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. EXTRA BALL

    View Slide

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

    View Slide

  46. Single place for our state
    Predictable code flow
    Redux has been very easy to test
    Flux & Redux
    46

    View Slide

  47. CONCLUSIONS

    View Slide

  48. Blocking animations
    Some inconsistencies between iOS / Android
    We’ve hit around 12 bugs and reported some
    Early adopting on Android
    Issues
    48

    View Slide

  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

    View Slide

  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

    View Slide

  51. View Slide

  52. THANKS

    View Slide

  53. ticketea
    questions?

    View Slide