Upload
stan229
View
99
Download
3
Embed Size (px)
Citation preview
moduscreate.com @ModusCreate
Putting the Native in React NativeStan Bershadskiy
@stan229 || [email protected]@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
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 || [email protected]@ModusCreate