Putting the Native in React Native - React Native NYC
- 1. moduscreate.com @ModusCreate Putting the Native in React Native Stan Bershadskiy @stan229 || [email protected] @ModusCreate 1/25/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. 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)
- 4. React Native
- 5. React is an ecosystem of tools
- 6. moduscreate.com @ModusCreate React is an ecosystem React React Native FluxRelay FlowGraphQL Nuclide
- 7. moduscreate.com @ModusCreate React powers so many things React Web iOS Android OS XTV OS UWP VR
- 8. What is React’s new core algorithm?
- 9. 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
- 10. What is React Native’s core dependency?
- 11. moduscreate.com @ModusCreate Deeper Look - Threads Shadow Queue Main JavaScript Layout Native SDK Biz Logic
- 12. moduscreate.com @ModusCreate Deeper Look - Runtime JavaScript Thread Main Thread Event Loop JS Call Native Call EventEmitter M essage App Event
- 13. What was one of the first uses of React Native in production?
- 16. moduscreate.com @ModusCreate React Native iOS Architecture UIApplication UIWindow UIViewController RCTRootView <UIView>
- 17. 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. moduscreate.com @ModusCreate React Native Android Architecture Application <ReactApplication> ReactActivity ReactActivityDelegate ReactRootView <FrameLayout>
- 20. moduscreate.com @ModusCreate Android NDK JavaScript JSX How does it work? JavaScriptCore Android SDK JNI Magic Mostly Same
- 21. moduscreate.com @ModusCreate Android NDK JavaScript JSX Message Travel JavaScriptCore Android SDK JNI topTouchStart id parameters RCTScrollView moduleId methodId params UIManagerModule measure(params)
- 23. 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
- 25. Demo Time
- 28. What’s the best React Native resource out there? :)
- 29. moduscreate.com @ModusCreate ● React Native Official Documentation ● Modus Create Blog (shameless plug) ● Use React Native ● React Native GitHub issues Further Learning
- 30. moduscreate.com @ModusCreate Thank you! Any questions? Stan Bershadskiy @stan229 || [email protected] @ModusCreate