Downloaded 28 times
More Related Content
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://cdn.slidesharecdn.com/ss_thumbnails/l4-react-native-layout-160911060742-thumbnail.jpg?width=640&height=640&fit=bounds)
![[React Native Tutorial] Lecture 6: Component, Props, and Network](https://cdn.slidesharecdn.com/ss_thumbnails/l6-component-prop-network-160920050452-thumbnail.jpg?width=640&height=640&fit=bounds)
![[React-Native Tutorial] Map](https://cdn.slidesharecdn.com/ss_thumbnails/l9map-161025035523-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
- 1. moduscreate.com @ModusCreate Putting theNative in React Native Stan Bershadskiy @stan229 || stan@moduscreate.com @ModusCreate 2/22/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. • From UIto 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.
- 6. React is an ecosystemof tools
- 7. moduscreate.com @ModusCreate React isan ecosystem React React Native FluxRelay FlowGraphQL Nuclide
- 8. moduscreate.com @ModusCreate React powersso many things React Web iOS Android OS XTV OS UWP VR
- 9. What is React’s newcore algorithm?
- 10. 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
- 11. What is React Native’score 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 oneof the first uses of React Native in production?
- 15.
- 16.
- 17. moduscreate.com @ModusCreate React NativeiOS 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.
- 20. moduscreate.com @ModusCreate React NativeAndroid Architecture Application <ReactApplication> ReactActivity ReactActivityDelegate ReactRootView <FrameLayout>
- 21. moduscreate.com @ModusCreate Android NDK JavaScript JSX Howdoes it work? JavaScriptCore Android SDK JNI Magic Mostly Same
- 22. moduscreate.com @ModusCreate Android NDK JavaScript JSX MessageTravel JavaScriptCore Android SDK JNI topTouchStart id parameters RCTScrollView moduleId methodId params UIManagerModule measure(params)
- 23.
- 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.
- 27.
- 28.
- 29.
- 30.
- 31. What’s the best ReactNative resource out there? :)
- 32. moduscreate.com @ModusCreate ● ReactNative Official Documentation ● Modus Create Blog (shameless plug) ● Use React Native ● React Native GitHub issues Further Learning
- 33. moduscreate.com @ModusCreate Thank you! Anyquestions? Stan Bershadskiy @stan229 || stan@moduscreate.com @ModusCreate