putting the native in react native - react native boston

moduscreate.com @ModusCreate

Putting the Native in React NativeStan Bershadskiy

@stan229 || stan@moduscreate.com@ModusCreate

2/22/2017

About me• Architect at Modus Create• Organizer for NYC.JS

meetup• Been hacking away at RN

for >1.5 years• Frequent speaker at

Conferences & Events

• From UI to Deployment• Not just the “How”, but the

“Why” too!• >500 pages of goodness• Get your discount code :)

About Modus Create• Product Studio specializing in mobile & web apps• Globally distributed agile teams• Published Authors & Speakers• Tech Community Organizers (4500+ Member

Meetups & Conference Hosts)

React Native

React is an ecosystem of tools

moduscreate.com @ModusCreate

React is an ecosystem

React

React Native

FluxRelay

FlowGraphQL

Nuclide

moduscreate.com @ModusCreate

React powers so many things

React

Web

iOS

Android

OS XTV OS

UWP

VR

What is React’s new core algorithm?

moduscreate.com @ModusCreate

• A Library • Binds your JSX code to

• iOS Cocoa Touch• Android UI

• Custom Layout system• Comprises a suite of technologies

• Applications run at near full speed*• Architecture is scalable• Library is highly extensible• BSD Licensed

What is React Native?Native App

React Native Library

JavaScript Engine

React JS

React Native JS Library

Your App Code

*Business logic in JavaScript is fast, but still interpreted

What is React Native’s core dependency?

moduscreate.com @ModusCreate

Deeper Look - Threads

Shadow Queue Main JavaScript

Layout Native SDK Biz Logic

moduscreate.com @ModusCreate

Deeper Look - Runtime

JavaScript Thread

Main Thread

Event Loop

JS Call

Native Call

EventEmitter

Message

App

Even

t

What was one of the first uses of React Native in production?

moduscreate.com @ModusCreate

React Native for iOS

moduscreate.com @ModusCreate

React Native iOS ArchitectureUIApplication

UIWindow

UIViewController

RCTRootView <UIView>

moduscreate.com @ModusCreate

JSX <> iOS Controls binding

<View /> RCTView

<ScrollView /> RCTScrollView

<Slider /> RCTSlider

<PickerIOS /> RCTPicker

JSX Classes React Native Classes

React N

ative bridge

UIView

UIScrollView

UISlider

UIPickerView

UIKit Classes

React Native for Android

moduscreate.com @ModusCreate

React Native Android ArchitectureApplication <ReactApplication>

ReactActivity

ReactActivityDelegate

ReactRootView <FrameLayout>

moduscreate.com @ModusCreate

Android NDKJavaScript

JSX

How does it work?

JavaScriptCore

Android SDK

JNI

Magic

Mostly Same

moduscreate.com @ModusCreate

Android NDKJavaScript

JSX

Message Travel

JavaScriptCore

Android SDK

JNI

topTouchStart id

parameters

RCTScrollView moduleId methodId params

UIManagerModule measure(params)

Blending Native and React Native

moduscreate.com @ModusCreate

Native & React Native ArchitectureNative App

React Native Library

JavaScript Engine

React JS

React Native JS Library

Your App Code

Native View Controller

Demo Time

moduscreate.com @ModusCreate

How!?Application

ViewController

TextField

EmbeddedViewController

Native Module

Bridge

Event Emitter

moduscreate.com @ModusCreate

Sample Code

https://github.com/PacktPublishing/React-Native-Cookbook

moduscreate.com @ModusCreate

The Great Debate

OR

moduscreate.com @ModusCreate

The Verdict

AND

What’s the best React Native resource out there? :)

moduscreate.com @ModusCreate

● React Native Official Documentation● Modus Create Blog (shameless plug)● Use React Native● React Native GitHub issues

Further Learning

moduscreate.com @ModusCreate

Thank you!Any questions?

Stan Bershadskiy

@stan229 || stan@moduscreate.com@ModusCreate