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)

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