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
2. We are hiring! Approach me during the conference or visit localz.com/jobs
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)
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