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 full-size slide

  2. @ticketeaeng

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. WHAT IS REACT?

    View full-size slide

  7. 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 full-size slide

  8. Everything is a component
    9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Differences in virtual DOM
    13

    View full-size slide

  12. State changes
    14

    View full-size slide

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

    View full-size slide

  14. GETTING STARTED

    View full-size slide

  15. 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 full-size slide

  16. react-native init
    .

    ├── android

    ├── index.android.js

    ├── index.ios.js

    ├── ios

    ├── node_modules

    └── package.json

    react-native init
    18

    View full-size slide

  17. 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 full-size slide


  18. Hello

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. HELLO NSCODERS

    View full-size slide

  25. All examples will be on Android simulator emulator
    DISCLAIMER

    View full-size slide

  26. SHOW ME
    THE CODE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. ticketea
    questions?

    View full-size slide