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.

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