Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

A Quick Intro to React

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

A Simple ReactJS app

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

React ➡ React Native

Slide 9

Slide 9 text

✅ Virtual DOM ✅ Sync with UI thread ⭐ Native Components

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Components Platform Specific Components

Slide 12

Slide 12 text

Sample

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

A Brief History of Cross Platform Mobile Tech

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Can I just port the business logic to JavaScript ?

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Layout

Slide 24

Slide 24 text

Java:

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

message_insert.js index.android.js

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Links ● ReactJS ● Create React App ● React Fiber

Slide 30

Slide 30 text

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