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. 3.
  2. 4.

    You are not going to learn how to build an

    app using React Native terencehuynh.com 
 @terencehuynh Visit facebook.github.com/react-native
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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…
  9. 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)
  10. 18.
  11. 19.
  12. 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
  13. 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
  14. 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
  15. 34.

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

    8 JavaScript developers 2 iOS developers
 3 part-time Android developers
  16. 35.

    terencehuynh.com
 @terencehuynh Now… Product & Engineering Team
 ~30 people 10

    JavaScript developers
 (including 2 React Native developers) 2 iOS developers
 2 Android developers
  17. 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
  18. 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
  19. 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
  20. 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