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

Let's talk about React Native

Terence Huynh
September 02, 2019

Let's talk about React Native

For the past 18 months, Terence Huynh has been developing mobile apps. However, he has no knowledge of iOS or Android development. Instead he has been using React Native to build it. So what is it, what are the pros/cons, and should you use it?

This variant was presented at /dev/world/2019 on September 2, 2019.

This talk was previously presented in some form at MelbJS and GDG Melbourne (February 2019)

Terence Huynh

September 02, 2019
Tweet

More Decks by Terence Huynh

Other Decks in Technology

Transcript

  1. Let’s talk about

    React Native
    Terence Huynh

    Software Engineer, Localz
    terencehuynh.com

    @terencehuynh

    View Slide

  2. We are hiring!
    Approach me during the conference or visit localz.com/jobs

    View Slide

  3. View Slide

  4. You are not going to learn how to build an
    app using React Native
    terencehuynh.com 

    @terencehuynh
    Visit facebook.github.com/react-native

    View Slide

  5. What is React Native?
    terencehuynh.com

    @terencehuynh

    View Slide

  6. React Native lets you build mobile
    apps using only JavaScript. It uses
    the same design as React, letting you
    compose a rich mobile UI from
    declarative components.
    Quote from React Native’s website

    facebook.github.io/react-native
    ‘‘
    terencehuynh.com

    @terencehuynh

    View Slide

  7. React Native iOS Android Web
    View UIView android.view
    Text NSAttributedString SpannableString
    Alert UIAlertController DialogInterface
    Switch UISwitch SwitchCompat
    CameraRoll RCTCameraRoll MediaStore.Images
    terencehuynh.com

    @terencehuynh

    View Slide

  8. terencehuynh.com

    @terencehuynh
    Bridge Native
    JavaScript
    How does it work?

    View Slide

  9. terencehuynh.com

    @terencehuynh
    react-native-coreml-image by jigsawxyz

    https://github.com/jigsawxyz/react-native-coreml-image

    View Slide


  10. terencehuynh.com

    @terencehuynh

    View Slide

  11. React Native lets you build mobile
    apps using only JavaScript. It uses
    the same design as React, letting you
    compose a rich mobile UI from
    declarative components.
    Quote from React Native’s website

    facebook.github.io/react-native
    ‘‘
    terencehuynh.com

    @terencehuynh

    View Slide

  12. React Native lets you build mobile
    apps using only JavaScript. It uses
    the same design as React, letting you
    compose a rich mobile UI from
    declarative components.
    Quote from React Native’s website

    facebook.github.io/react-native
    ‘‘
    terencehuynh.com

    @terencehuynh

    View Slide

  13. terencehuynh.com

    @terencehuynh
    React Native for…
    Windows
    Windows 10 + Mobile

    & Xbox One
    SUPPORTED BY
    MICROSOFT
    Desktop
    Windows, Mac OS 

    & Linux
    SUPPORTED BY
    COMMUNITY
    Web
    SUPPORTED BY
    COMMUNITY
    TV
    Apple TV &

    Android TV
    SUPPORTED BY
    FACEBOOK
    Mobile
    iOS & Android
    SUPPORTED BY
    FACEBOOK

    View Slide


  14. terencehuynh.com

    @terencehuynh

    View Slide

  15. Why should I care?
    terencehuynh.com

    @terencehuynh

    View Slide

  16. State of JavaScript Results

    2018.stateofjs.com
    terencehuynh.com

    @terencehuynh
    2016
    2017
    2018
    25% 50% 75% 100%
    53%
    57%
    60%
    18.7%
    20.1%
    12.7%
    Used it, wouldn't use again Used it, would use again
    Heard, would like to learn Heard, not interested
    Never heard of it
    It’s getting
    popular…

    View Slide

  17. State of JavaScript Results

    2018.stateofjs.com
    terencehuynh.com

    @terencehuynh
    25%
    50%
    75%
    100%
    React Native Native Cordova Ionic
    23.4%
    13.8%
    28%
    2.3%
    42.6%
    44.5%
    30.4%
    22.2%
    18%
    12%
    28%
    53%
    8.3%
    10.2%
    10.6%
    18.7%
    7.8%
    19.6%
    2.8%
    3.6%
    Used it, wouldn't use again Used it, would use again
    Heard, would like to learn Heard, not interested
    Not heard of it
    React Native
    vs others
    (2018)

    View Slide

  18. View Slide

  19. View Slide

  20. So, why did Localz adopt React
    Native?
    terencehuynh.com

    @terencehuynh

    View Slide

  21. The dream of 

    one codebase, multiple platforms
    terencehuynh.com

    @terencehuynh

    View Slide

  22. We can reuse our existing SDKs
    terencehuynh.com

    @terencehuynh

    View Slide

  23. dog food (verb)

    (of a company's staff) use a product or
    service developed by that company
    so as to test it before it is made
    available to customers.
    terencehuynh.com

    @terencehuynh

    View Slide

  24. Faster development time
    terencehuynh.com

    @terencehuynh

    View Slide

  25. terencehuynh.com

    @terencehuynh
    Video:

    facebook.github.io/react-native

    View Slide

  26. terencehuynh.com

    @terencehuynh

    View Slide

  27. We are a startup

    We don’t have the resources
    terencehuynh.com

    @terencehuynh

    View Slide

  28. We are a startup

    We don’t have the resources
    terencehuynh.com

    @terencehuynh

    View Slide

  29. We are a startup

    We don’t have the people
    terencehuynh.com

    @terencehuynh

    View Slide

  30. Product & Engineering Team

    15 people
    terencehuynh.com

    @terencehuynh
    In 2017…

    View Slide

  31. Product & Engineering Team

    15 people
    terencehuynh.com

    @terencehuynh
    In 2017…
    2 iOS developers

    3 part-time Android developers
    Maintain our Attendant apps

    Maintain our Collections SDK

    Perform customer support in three timezones

    View Slide

  32. terencehuynh.com

    @terencehuynh

    View Slide

  33. Product & Engineering Team

    15 people
    terencehuynh.com

    @terencehuynh
    In 2017…
    2 iOS developers

    3 part-time Android developers
    Create new Driver SDK
    Create new Driver and Technician apps
    Maintain our Attendant apps

    Maintain our Collections SDK

    Perform customer support in three timezones

    View Slide

  34. terencehuynh.com

    @terencehuynh
    In 2017…
    Product & Engineering Team

    15 people
    8 JavaScript developers
    2 iOS developers

    3 part-time Android developers

    View Slide

  35. terencehuynh.com

    @terencehuynh
    Now…
    Product & Engineering Team

    ~30 people
    10 JavaScript developers

    (including 2 React Native developers)
    2 iOS developers

    2 Android developers

    View Slide

  36. … were there any challenges?
    terencehuynh.com

    @terencehuynh

    View Slide

  37. Performance. Performance. Performance.
    terencehuynh.com

    @terencehuynh

    View Slide

  38. terencehuynh.com

    @terencehuynh
    Potential causes for slow performance
    • Unnecessary re-rendering of components
    • Too many console.log statements
    • Animations not being handled natively
    • JS calls taking too long

    View Slide

  39. It is not a perfect abstraction
    terencehuynh.com

    @terencehuynh

    View Slide

  40. iOS
    Android
    terencehuynh.com

    @terencehuynh

    View Slide

  41. terencehuynh.com

    @terencehuynh

    View Slide

  42. You get the flaws of JavaScript
    terencehuynh.com

    @terencehuynh

    View Slide

  43. terencehuynh.com

    @terencehuynh

    View Slide

  44. terencehuynh.com

    @terencehuynh

    View Slide

  45. terencehuynh.com

    @terencehuynh
    https:/
    /github.com/react-native-community

    View Slide

  46. The constantly changing nature 

    of React Native
    terencehuynh.com

    @terencehuynh

    View Slide

  47. Version Changes
    v0.60.x
    AndroidX support

    Cocoapods by default

    Native Modules autolinked
    v0.59.x
    React Hooks support

    Upgraded JSC for Android, 64 bit support

    Inline requires
    v.0.57.x
    Android tooling update

    Breaking Metro Bundler Upgrades
    v.0.56.x
    Babel 7, Node 8 support

    Updated Android libraries

    iOS8 support dropped
    terencehuynh.com

    @terencehuynh

    View Slide

  48. terencehuynh.com

    @terencehuynh

    View Slide

  49. terencehuynh.com

    @terencehuynh

    View Slide

  50. So, should I use it?
    terencehuynh.com

    @terencehuynh

    View Slide

  51. It depends…
    terencehuynh.com

    @terencehuynh

    View Slide

  52. Every company that uses React Native
    will have an experience that is a unique
    function of their team composition,
    existing app, product requirements and
    maturity of React Native…
    Sunsetting React Native, Airbnb Engineering

    https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a
    ‘‘
    terencehuynh.com

    @terencehuynh

    View Slide

  53. terencehuynh.com

    @terencehuynh
    Sunsetting React
    Native
    Why Discord is sticking
    with React Native
    https:/
    /blog.discordapp.com/why-discord-is-sticking-with-react-
    native-ccc34be0d427
    https:/
    /medium.com/airbnb-engineering/sunsetting-react-
    native-1868ba28e30a

    View Slide

  54. Do your research 

    Everyone’s experience is different
    terencehuynh.com

    @terencehuynh

    View Slide

  55. When in doubt, 

    Do a proof of concept
    terencehuynh.com

    @terencehuynh

    View Slide

  56. FIND ME ON THE SOCIALS
    terencehuynh.com
    @terencehuynh

    View Slide