Going (React) Native Arpit Mathur Principal Engineer, Comcast Innovation Labs Manager, Philly Google Dev. Group / Android Philly 

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 

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 

A Quick Intro to React 

Motivation ● Problem: Facebook.com’s constant mutating DOM ● Solution: ○ Don’t modify DOM, just declare state changes ○ Use well defined components with clear contracts 

A Simple ReactJS app 

ReactJS Features ● Virtual DOM ● Unidirectional data flow ○ Props ○ States ● Well defined Component Lifecycle 

React ➡ React Native 

✅ Virtual DOM ✅ Sync with UI thread ⭐ Native Components 

React Native Components Native Controls Custom Controls PolyFills View Text Alert ScrollView Networking Geolocation FlexBox 

Components Platform Specific Components 

Sample 

No content

A Brief History of Cross Platform Mobile Tech 

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) 

Xamarin Cross platform mobile apps in C# (Recently bought my Microsoft) Pros: ● C# Cons: ● C# 

Appcelerator JavaScript proxy for native UIs Pros: ● JavaScript Cons: ● Poor performance ○ (JavaScript x Native cross talk) 

Google Flutter React Native...but with Dart...and by Google Pros / Cons ¯\_(ツ)_/¯ 

No content

Can I just port the business logic to JavaScript ? 

Why not go all in with React Native? ● RecyclerView > React Native Lists ● Existing functionality ○ Formatted code support in chat stream ● UX - Maybe 

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 

Layout 

Java: 

No content

No content

message_insert.js index.android.js 

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 

Links ● ReactJS ● Create React App ● React Fiber 

Arpit Mathur http://arpitonline.com @arpit Thanks!