Putting the Native in React Native - React Native Boston

1. moduscreate.com @ModusCreate
Putting the Native in
React Native
Stan Bershadskiy
@stan229 || stan@moduscreate.com
@ModusCreate
2/22/2017

2. 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

3. • From UI to Deployment
• Not just the “How”, but the
“Why” too!
• >500 pages of goodness
• Get your discount code :)

4. 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)

5. React Native

6. React is an
ecosystem of
tools

7. moduscreate.com @ModusCreate
React is an ecosystem
React
React
Native
FluxRelay
FlowGraphQL
Nuclide

8. moduscreate.com @ModusCreate
React powers so many things
React
Web
iOS
Android
OS XTV OS
UWP
VR

9. What is React’s
new core
algorithm?

10. 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

11. What is React
Native’s core
dependency?

12. moduscreate.com @ModusCreate
Deeper Look - Threads
Shadow Queue Main JavaScript
Layout Native SDK Biz Logic

13. moduscreate.com @ModusCreate
Deeper Look - Runtime
JavaScript Thread
Main Thread
Event Loop
JS Call
Native Call
EventEmitter
M
essage
App
Event

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

15. moduscreate.com @ModusCreate

16. React Native
for iOS

17. moduscreate.com @ModusCreate
React Native iOS Architecture
UIApplication
UIWindow
UIViewController
RCTRootView
<UIView>

18. moduscreate.com @ModusCreate
JSX <> iOS Controls binding
<View /> RCTView
<ScrollView /> RCTScrollView
<Slider /> RCTSlider
<PickerIOS /> RCTPicker
JSX Classes React Native Classes
ReactNativebridge
UIView
UIScrollView
UISlider
UIPickerView
UIKit Classes

19. React Native
for Android

20. moduscreate.com @ModusCreate
React Native Android Architecture
Application <ReactApplication>
ReactActivity
ReactActivityDelegate
ReactRootView
<FrameLayout>

21. moduscreate.com @ModusCreate
Android NDK
JavaScript
JSX
How does it work?
JavaScriptCore
Android SDK
JNI
Magic
Mostly
Same

22. moduscreate.com @ModusCreate
Android NDK
JavaScript
JSX
Message Travel
JavaScriptCore
Android SDK
JNI
topTouchStart
id
parameters
RCTScrollView
moduleId
methodId
params
UIManagerModule
measure(params)

23. Blending
Native and
React Native

24. moduscreate.com @ModusCreate
Native & React Native Architecture
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
Native View
Controller

26. Demo Time

27. moduscreate.com @ModusCreate
How!?
Application
ViewController
TextField
Embedded
ViewController
Native
Module
Bridge
Event
Emitter

28. moduscreate.com @ModusCreate
Sample Code
https://github.com/PacktPublishing/React-Native-Cookbook

29. moduscreate.com @ModusCreate
The Great Debate
OR

30. moduscreate.com @ModusCreate
The Verdict
AND

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

32. moduscreate.com @ModusCreate
● React Native Official Documentation
● Modus Create Blog (shameless plug)
● Use React Native
● React Native GitHub issues
Further Learning

33. moduscreate.com @ModusCreate
Thank you!
Any questions?
Stan Bershadskiy
@stan229 || stan@moduscreate.com
@ModusCreate