Going (React) Native

In this talk (given originailly at Modev DC), I talk about building native modules for ReactNative apps

Transcript

1. Going (React) Native Arpit Mathur Principal Engineer, Comcast Innovation Labs Manager, Philly Google Dev. Group / Android Philly
2. About Me • Developer: ◦ Flash, JavaScript, iOS, Android, Rails ◦ Shipped the first Comcast iOS app ◦ Research: Wearables, VR/AR, Blockchains ◦ Manager: Google Developer Group / Android Philly • Design ◦ Comcast UX (2 years) @arpit
3. Next up • Quick Intro to ReactJS • Moving from ReactJS to React Native • My secret awesome app called #insert-app-name# • Using React Native in #insert-app-name# • Final thoughts
4. A Quick Intro to React
5. Motivation • Problem: Facebook.com’s constant mutating DOM • Solution: ◦ Don’t modify DOM, just declare state changes ◦ Use well defined components with clear contracts
6. A Simple ReactJS app
7. ReactJS Features • Virtual DOM • Unidirectional data flow ◦ Props ◦ States • Well defined Component Lifecycle
8. React ➡ React Native
9. ✅ Virtual DOM ✅ Sync with UI thread ⭐ Native Components
10. React Native Components Native Controls Custom Controls PolyFills View Text Alert ScrollView Networking Geolocation FlexBox
11. Components Platform Specific Components
12. Sample
14. A Brief History of Cross Platform Mobile Tech
15. Apache Cordova / PhoneGap / Ionic Build native apps with JavaScript and HTML Pros: • HTML, CSS, JS Cons: • Poor performance, esp on Android (HTML doesn’t take advantage of multi-core)
16. Xamarin Cross platform mobile apps in C# (Recently bought my Microsoft) Pros: • C# Cons: • C#
17. Appcelerator JavaScript proxy for native UIs Pros: • JavaScript Cons: • Poor performance ◦ (JavaScript x Native cross talk)
18. Google Flutter React Native...but with Dart...and by Google Pros / Cons ¯\_(ツ)_/¯
20. Can I just port the business logic to JavaScript ?
21. Why not go all in with React Native? • RecyclerView > React Native Lists • Existing functionality ◦ Formatted code support in chat stream • UX - Maybe
22. Building Native Modules (No UI) • Build / take a native component in Android / iOS • Write the a native wrapper to expose it to javascript ◦ Expose methods by annotating with @ReactMethod ◦ Visual component? Implement createViewInstance (ThemedReactContext context) • Create a ReactPackage that describes all your components • Write a javascript component shim file • Use javascript component as you would any other React component
23. Layout
24. Java:
27. message_insert.js index.android.js
28. Parting thoughts: • ReactJS is actually pretty awesome • Some React Native components are not as performant out of the box ◦ List controls don’t implement item recycling • React Native setup was a little painful but worth it (maybe) ◦ Currently chatscript code is shared between web and native app ◦ Development time is much faster: Hot reload of JS vs native compile
29. Links • ReactJS • Create React App • React Fiber
30. Arpit Mathur http://arpitonline.com @arpit Thanks!