Putting the Native in React Native - React Native Boston
- 1. moduscreate.com @ModusCreate Putting the Native in React Native Stan Bershadskiy @stan229 || [email protected] @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?
- 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
- 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)
- 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
- 29. moduscreate.com @ModusCreate The Great Debate OR
- 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 || [email protected] @ModusCreate