Download to read offline
Putting the Native in React Native - React Native NYC
- 1. moduscreate.com @ModusCreate Putting theNative in React Native Stan Bershadskiy @stan229 || stan@moduscreate.com @ModusCreate 1/25/2017
- 2. About me • Architectat 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.
- 5. React is an ecosystemof tools
- 6. moduscreate.com @ModusCreate React isan ecosystem React React Native FluxRelay FlowGraphQL Nuclide
- 7. moduscreate.com @ModusCreate React powersso many things React Web iOS Android OS XTV OS UWP VR
- 8. What is React’s newcore algorithm?
- 9. moduscreate.com @ModusCreate •A Library •Bindsyour 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’score 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 oneof the first uses of React Native in production?
- 14.
- 15.
- 16. moduscreate.com @ModusCreate React NativeiOS 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
- 18.
- 19. moduscreate.com @ModusCreate React NativeAndroid Architecture Application <ReactApplication> ReactActivity ReactActivityDelegate ReactRootView <FrameLayout>
- 20. moduscreate.com @ModusCreate Android NDK JavaScript JSX Howdoes it work? JavaScriptCore Android SDK JNI Magic Mostly Same
- 21. moduscreate.com @ModusCreate Android NDK JavaScript JSX MessageTravel JavaScriptCore Android SDK JNI topTouchStart id parameters RCTScrollView moduleId methodId params UIManagerModule measure(params)
- 22.
- 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.
- 26.
- 27.
- 28. What’s the best ReactNative resource out there? :)
- 29. moduscreate.com @ModusCreate ● ReactNative Official Documentation ● Modus Create Blog (shameless plug) ● Use React Native ● React Native GitHub issues Further Learning
- 30. moduscreate.com @ModusCreate Thank you! Anyquestions? Stan Bershadskiy @stan229 || stan@moduscreate.com @ModusCreate