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

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

    View full-size slide

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

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

    View full-size slide

  4. What is React Native?
    terencehuynh.com

    @terencehuynh

    View full-size slide

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

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

  7. terencehuynh.com

    @terencehuynh
    Bridge Native
    JavaScript
    How does it work?

    View full-size slide

  8. terencehuynh.com

    @terencehuynh
    react-native-coreml-image by jigsawxyz

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

    View full-size slide


  9. terencehuynh.com

    @terencehuynh

    View full-size slide

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

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


  13. terencehuynh.com

    @terencehuynh

    View full-size slide

  14. Why should I care?
    terencehuynh.com

    @terencehuynh

    View full-size slide

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

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

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

    @terencehuynh

    View full-size slide

  18. The dream of 

    one codebase, multiple platforms
    terencehuynh.com

    @terencehuynh

    View full-size slide

  19. We can reuse our existing SDKs
    terencehuynh.com

    @terencehuynh

    View full-size slide

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

  21. Faster development time
    terencehuynh.com

    @terencehuynh

    View full-size slide

  22. terencehuynh.com

    @terencehuynh
    Video:

    facebook.github.io/react-native

    View full-size slide

  23. terencehuynh.com

    @terencehuynh

    View full-size slide

  24. We are a startup

    We don’t have the resources
    terencehuynh.com

    @terencehuynh

    View full-size slide

  25. We are a startup

    We don’t have the resources
    terencehuynh.com

    @terencehuynh

    View full-size slide

  26. We are a startup

    We don’t have the people
    terencehuynh.com

    @terencehuynh

    View full-size slide

  27. Product & Engineering Team

    15 people
    terencehuynh.com

    @terencehuynh
    In 2017…

    View full-size slide

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

  29. terencehuynh.com

    @terencehuynh

    View full-size slide

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

  31. terencehuynh.com

    @terencehuynh
    In 2017…
    Product & Engineering Team

    15 people
    8 JavaScript developers
    2 iOS developers

    3 part-time Android developers

    View full-size slide

  32. terencehuynh.com

    @terencehuynh
    Now…
    Product & Engineering Team

    ~30 people
    10 JavaScript developers

    (including 2 React Native developers)
    2 iOS developers

    2 Android developers

    View full-size slide

  33. … were there any challenges?
    terencehuynh.com

    @terencehuynh

    View full-size slide

  34. Performance. Performance. Performance.
    terencehuynh.com

    @terencehuynh

    View full-size slide

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

  36. It is not a perfect abstraction
    terencehuynh.com

    @terencehuynh

    View full-size slide

  37. iOS
    Android
    terencehuynh.com

    @terencehuynh

    View full-size slide

  38. terencehuynh.com

    @terencehuynh

    View full-size slide

  39. You get the flaws of JavaScript
    terencehuynh.com

    @terencehuynh

    View full-size slide

  40. terencehuynh.com

    @terencehuynh

    View full-size slide

  41. terencehuynh.com

    @terencehuynh

    View full-size slide

  42. terencehuynh.com

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

    View full-size slide

  43. The constantly changing nature 

    of React Native
    terencehuynh.com

    @terencehuynh

    View full-size slide

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

  45. terencehuynh.com

    @terencehuynh

    View full-size slide

  46. terencehuynh.com

    @terencehuynh

    View full-size slide

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

    @terencehuynh

    View full-size slide

  48. It depends…
    terencehuynh.com

    @terencehuynh

    View full-size slide

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

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

  51. Do your research 

    Everyone’s experience is different
    terencehuynh.com

    @terencehuynh

    View full-size slide

  52. When in doubt, 

    Do a proof of concept
    terencehuynh.com

    @terencehuynh

    View full-size slide

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

    View full-size slide