Let's talk about React Native

8e7ffba92d9ca7066a2e97e089101160?s=47 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)

8e7ffba92d9ca7066a2e97e089101160?s=128

Terence Huynh

September 02, 2019
Tweet

Transcript

  1. Let’s talk about
 React Native Terence Huynh
 Software Engineer, Localz

    terencehuynh.com
 @terencehuynh
  2. We are hiring! Approach me during the conference or visit

    localz.com/jobs
  3. None
  4. You are not going to learn how to build an

    app using React Native terencehuynh.com 
 @terencehuynh Visit facebook.github.com/react-native
  5. What is React Native? terencehuynh.com
 @terencehuynh

  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
  7. React Native iOS Android Web View UIView android.view <div> Text

    NSAttributedString SpannableString <span> Alert UIAlertController DialogInterface Switch UISwitch SwitchCompat CameraRoll RCTCameraRoll MediaStore.Images terencehuynh.com
 @terencehuynh
  8. terencehuynh.com
 @terencehuynh Bridge Native JavaScript How does it work?

  9. terencehuynh.com
 @terencehuynh react-native-coreml-image by jigsawxyz
 https://github.com/jigsawxyz/react-native-coreml-image

  10. <Aside> terencehuynh.com
 @terencehuynh

  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
  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
  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
  14. </Aside> terencehuynh.com
 @terencehuynh

  15. Why should I care? terencehuynh.com
 @terencehuynh

  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…
  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)
  18. None
  19. None
  20. So, why did Localz adopt React Native? terencehuynh.com
 @terencehuynh

  21. The dream of 
 one codebase, multiple platforms terencehuynh.com
 @terencehuynh

  22. We can reuse our existing SDKs terencehuynh.com
 @terencehuynh

  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
  24. Faster development time terencehuynh.com
 @terencehuynh

  25. terencehuynh.com
 @terencehuynh Video:
 facebook.github.io/react-native

  26. terencehuynh.com
 @terencehuynh

  27. We are a startup
 We don’t have the resources terencehuynh.com


    @terencehuynh
  28. We are a startup
 We don’t have the resources terencehuynh.com


    @terencehuynh
  29. We are a startup
 We don’t have the people terencehuynh.com


    @terencehuynh
  30. Product & Engineering Team
 15 people terencehuynh.com
 @terencehuynh In 2017…

  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
  32. terencehuynh.com
 @terencehuynh

  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
  34. terencehuynh.com
 @terencehuynh In 2017… Product & Engineering Team
 15 people

    8 JavaScript developers 2 iOS developers
 3 part-time Android developers
  35. terencehuynh.com
 @terencehuynh Now… Product & Engineering Team
 ~30 people 10

    JavaScript developers
 (including 2 React Native developers) 2 iOS developers
 2 Android developers
  36. … were there any challenges? terencehuynh.com
 @terencehuynh

  37. Performance. Performance. Performance. terencehuynh.com
 @terencehuynh

  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
  39. It is not a perfect abstraction terencehuynh.com
 @terencehuynh

  40. iOS Android terencehuynh.com
 @terencehuynh

  41. terencehuynh.com
 @terencehuynh

  42. You get the flaws of JavaScript terencehuynh.com
 @terencehuynh

  43. terencehuynh.com
 @terencehuynh

  44. terencehuynh.com
 @terencehuynh

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

  46. The constantly changing nature 
 of React Native terencehuynh.com
 @terencehuynh

  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
  48. terencehuynh.com
 @terencehuynh

  49. terencehuynh.com
 @terencehuynh

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

  51. It depends… terencehuynh.com
 @terencehuynh

  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
  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
  54. Do your research 
 Everyone’s experience is different terencehuynh.com
 @terencehuynh

  55. When in doubt, 
 Do a proof of concept terencehuynh.com


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