Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Absolute Mobile Fest
Kyiv 2018
How React-Native shaped
the way we think about
native apps
Ilya Ivanov
Mobile Team Lead at ...
About me
• 2 years in react-native
• 3 years in react
• 7 years in software development
Back-end
Web
front-end
Mobile
fron...
Why this talk
• Show you the core principles behind react-native
• Show why you might want to consider react-native
Kyiv 2...
Agenda
• React-Native in the context
• How it works
• Advantages
• Limitations
• How to start
• When to use
Kyiv 2018
MountainRoad
Hybrid
Cyclo-cross Cross-country
So I want to buy a bike…
Web
Web
Code
Browser
Hybrid
Native
Container
Web
Code
Native
Native
App
So I want to build an app…
React-Native
• HTML/CSS/JS
• Native container
• WebView
Classic Hybrid
• No HTML/CSS
• Native view defined by JS
• No WebV...
Agenda
• React-Native in the context
• How it works
• Advantages
• Limitations
• How to start
• When to use
Kyiv 2018
How React-Native works
View
Text
Android
react-native
react android.view
android.text
iOS
UIView
UILabel
<View style={styl...
Native Code Bridge
JS runtime
environment
How React-Native works
Native
event
Serialize
payload
Process
event
Call native
methods
Serialize
response
Process
commands
Native Code Bridge JS...
<View>
<TouchableOpacity
onPress={this.increment}
>
<Text
{this.state.count}
</Text>
</TouchableOpacity>
</View>
increment...
Native Code Bridge JS runtime environment
Define
animation
Serialize
Animation
definition
Execute
animation
Add header scroll animation
<ScrollView
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.scrollY}}}...
Agenda
• React-Native in the context
• How it works
• Advantages
• Limitations
• How to start
• When to use
Kyiv 2018
Advantages
• Cross-platform native development
• Great development experience
• Prototyping and distribution without XCode...
Cross-platform native development
• React-Native
• Single project – two native platforms
• React-Native-Web
• Single proje...
Great development experience
Limitations
• Leaky abstractions
• You still need to write native code
Leaky abstractions
AndroidiOS
You still need to write native code
• It still takes around 5-10% to write Swift/Java code
• Percentage may vary
Agenda
• React-Native in the context
• How it works
• Advantages
• Limitations
• How to start
• When to use
Kyiv 2018
Bootstrapping your application
react-native init MyApplication
Pros:
• Can use custom native code
create-react-native-app ...
Expo step-by-step guide
• Install Expo on the mobile device
• Install Expo XDE on the dev machine
• Create Expo project
• ...
Agenda
• React-Native in the context
• How it works
• Advantages
• Limitations
• How to start
• When to use
Kyiv 2018
When to use
Summary
• React-Native in an example of the new ”native” mobile solution
• React-Native converts element hierarchy written...
Absolute Mobile Fest
Kyiv 2018
Thanks
Questions?
Absolute Mobile Fest
Kyiv 2018
• https://expo.io/tools
• https://facebook.github.io/react-native/showcase.html
• https://m...
Upcoming SlideShare
Loading in …5
×

Mobile Fest 2018. Илья Иванов. Как React-Native перевернул наше представление о нативных приложениях

71 views

Published on

Как вообще возможно писать по-настоящему нативные мобильные приложения на JavaScript? Мы разберем почему React-Native отличается от гибридных и нативных методов разработки и как в результате получается нативное приложение. Работая уже два года с React-Native, я покажу не только общие концепции, но и так-же как эта технология работает изнутри.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Mobile Fest 2018. Илья Иванов. Как React-Native перевернул наше представление о нативных приложениях

  1. 1. Absolute Mobile Fest Kyiv 2018 How React-Native shaped the way we think about native apps Ilya Ivanov Mobile Team Lead at Ciklum
  2. 2. About me • 2 years in react-native • 3 years in react • 7 years in software development Back-end Web front-end Mobile front-end Ilya Ivanov Kyiv 2018
  3. 3. Why this talk • Show you the core principles behind react-native • Show why you might want to consider react-native Kyiv 2018
  4. 4. Agenda • React-Native in the context • How it works • Advantages • Limitations • How to start • When to use Kyiv 2018
  5. 5. MountainRoad Hybrid Cyclo-cross Cross-country So I want to buy a bike…
  6. 6. Web Web Code Browser Hybrid Native Container Web Code Native Native App So I want to build an app…
  7. 7. React-Native • HTML/CSS/JS • Native container • WebView Classic Hybrid • No HTML/CSS • Native view defined by JS • No WebView
  8. 8. Agenda • React-Native in the context • How it works • Advantages • Limitations • How to start • When to use Kyiv 2018
  9. 9. How React-Native works View Text Android react-native react android.view android.text iOS UIView UILabel <View style={styles.container}> <Text> Welcome to React Native! </Text> </View>
  10. 10. Native Code Bridge JS runtime environment How React-Native works
  11. 11. Native event Serialize payload Process event Call native methods Serialize response Process commands Native Code Bridge JS runtime environment
  12. 12. <View> <TouchableOpacity onPress={this.increment} > <Text {this.state.count} </Text> </TouchableOpacity> </View> increment = () => this.setState({count: this.state.count + 1});
  13. 13. Native Code Bridge JS runtime environment Define animation Serialize Animation definition Execute animation
  14. 14. Add header scroll animation <ScrollView onScroll={Animated.event( [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}] )} > <Animated.Image style={ { opacity: imageOpacity, transform: [{translateY: imageTranslate}] }, } /> ScrollView Animated.Image Animation executes only in native thread
  15. 15. Agenda • React-Native in the context • How it works • Advantages • Limitations • How to start • When to use Kyiv 2018
  16. 16. Advantages • Cross-platform native development • Great development experience • Prototyping and distribution without XCode or Android Studio
  17. 17. Cross-platform native development • React-Native • Single project – two native platforms • React-Native-Web • Single project – three native platforms
  18. 18. Great development experience
  19. 19. Limitations • Leaky abstractions • You still need to write native code
  20. 20. Leaky abstractions AndroidiOS
  21. 21. You still need to write native code • It still takes around 5-10% to write Swift/Java code • Percentage may vary
  22. 22. Agenda • React-Native in the context • How it works • Advantages • Limitations • How to start • When to use Kyiv 2018
  23. 23. Bootstrapping your application react-native init MyApplication Pros: • Can use custom native code create-react-native-app MyApplication Pros: • No need to install Android Studio and Xcode • Can publish your apps to Expo repo • You can always eject Cons: • Need to install Xcode and Android studio Cons: • Can’t use custom native code
  24. 24. Expo step-by-step guide • Install Expo on the mobile device • Install Expo XDE on the dev machine • Create Expo project • Scan QR code from the mobile device • mobile device and dev machine should be in the same network area • Open project with any IDE or Editor and start coding
  25. 25. Agenda • React-Native in the context • How it works • Advantages • Limitations • How to start • When to use Kyiv 2018
  26. 26. When to use
  27. 27. Summary • React-Native in an example of the new ”native” mobile solution • React-Native converts element hierarchy written in JavaScript into native views. No HTML/CSS involved • You can use Expo to create and distribute native solution without Android Studio or Xcode Kyiv 2018
  28. 28. Absolute Mobile Fest Kyiv 2018 Thanks Questions?
  29. 29. Absolute Mobile Fest Kyiv 2018 • https://expo.io/tools • https://facebook.github.io/react-native/showcase.html • https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e Resources

×