putting the native in react native - react native boston

33
moduscreate.com @ModusCreate Putting the Native in React Native Stan Bershadskiy @stan229 || [email protected] @ModusCreate 2/22/2017

Upload: stan229

Post on 21-Mar-2017

92 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

Putting the Native in React NativeStan Bershadskiy

@stan229 || [email protected]@ModusCreate

2/22/2017

Page 2: Putting the Native in React Native - React Native Boston

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

Page 3: Putting the Native in React Native - React Native Boston

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

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

Page 4: Putting the Native in React Native - React Native Boston

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)

Page 5: Putting the Native in React Native - React Native Boston

React Native

Page 6: Putting the Native in React Native - React Native Boston

React is an ecosystem of tools

Page 7: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

React is an ecosystem

React

React Native

FluxRelay

FlowGraphQL

Nuclide

Page 8: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

React powers so many things

React

Web

iOS

Android

OS XTV OS

UWP

VR

Page 9: Putting the Native in React Native - React Native Boston

What is React’s new core algorithm?

Page 10: Putting the Native in React Native - React Native Boston

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

Page 11: Putting the Native in React Native - React Native Boston

What is React Native’s core dependency?

Page 12: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

Deeper Look - Threads

Shadow Queue Main JavaScript

Layout Native SDK Biz Logic

Page 13: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

Deeper Look - Runtime

JavaScript Thread

Main Thread

Event Loop

JS Call

Native Call

EventEmitter

Message

App

Even

t

Page 14: Putting the Native in React Native - React Native Boston

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

Page 15: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

Page 16: Putting the Native in React Native - React Native Boston

React Native for iOS

Page 17: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

React Native iOS ArchitectureUIApplication

UIWindow

UIViewController

RCTRootView <UIView>

Page 18: Putting the Native in React Native - React Native Boston

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

Page 19: Putting the Native in React Native - React Native Boston

React Native for Android

Page 20: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

React Native Android ArchitectureApplication <ReactApplication>

ReactActivity

ReactActivityDelegate

ReactRootView <FrameLayout>

Page 21: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

Android NDKJavaScript

JSX

How does it work?

JavaScriptCore

Android SDK

JNI

Magic

Mostly Same

Page 22: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

Android NDKJavaScript

JSX

Message Travel

JavaScriptCore

Android SDK

JNI

topTouchStart id

parameters

RCTScrollView moduleId methodId params

UIManagerModule measure(params)

Page 23: Putting the Native in React Native - React Native Boston

Blending Native and React Native

Page 24: Putting the Native in React Native - React Native Boston

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

Page 25: Putting the Native in React Native - React Native Boston
Page 26: Putting the Native in React Native - React Native Boston

Demo Time

Page 27: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

How!?Application

ViewController

TextField

EmbeddedViewController

Native Module

Bridge

Event Emitter

Page 28: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

Sample Code

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

Page 29: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

The Great Debate

OR

Page 30: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

The Verdict

AND

Page 31: Putting the Native in React Native - React Native Boston

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

Page 32: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

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

Further Learning

Page 33: Putting the Native in React Native - React Native Boston

moduscreate.com @ModusCreate

Thank you!Any questions?

Stan Bershadskiy

@stan229 || [email protected]@ModusCreate