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

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. 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. Why this talk
• Show you the core principles behind react-native
• Show why you might want to consider react-native
Kyiv 2018

4. Agenda
• React-Native in the context
• How it works
• Advantages
• Limitations
• How to start
• When to use
Kyiv 2018

5. MountainRoad
Hybrid
Cyclo-cross Cross-country
So I want to buy a bike…

6. Web
Web
Code
Browser
Hybrid
Native
Container
Web
Code
Native
Native
App
So I want to build an app…

7. React-Native
• HTML/CSS/JS
• Native container
• WebView
Classic Hybrid
• No HTML/CSS
• Native view defined by JS
• No WebView

8. Agenda
• React-Native in the context
• How it works
• Advantages
• Limitations
• How to start
• When to use
Kyiv 2018

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. Native Code Bridge
JS runtime
environment
How React-Native works

11. Native
event
Serialize
payload
Process
event
Call native
methods
Serialize
response
Process
commands
Native Code Bridge JS runtime environment

12. <View>
<TouchableOpacity
onPress={this.increment}
>
<Text
{this.state.count}
</Text>
</TouchableOpacity>
</View>
increment = () =>
this.setState({count: this.state.count + 1});

13. Native Code Bridge JS runtime environment
Define
animation
Serialize
Animation
definition
Execute
animation

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. Agenda
• React-Native in the context
• How it works
• Advantages
• Limitations
• How to start
• When to use
Kyiv 2018

16. Advantages
• Cross-platform native development
• Great development experience
• Prototyping and distribution without XCode or Android Studio

17. Cross-platform native development
• React-Native
• Single project – two native platforms
• React-Native-Web
• Single project – three native platforms

18. Great development experience

19. Limitations
• Leaky abstractions
• You still need to write native code

20. Leaky abstractions
AndroidiOS

21. You still need to write native code
• It still takes around 5-10% to write Swift/Java code
• Percentage may vary

22. Agenda
• React-Native in the context
• How it works
• Advantages
• Limitations
• How to start
• When to use
Kyiv 2018

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. 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. Agenda
• React-Native in the context
• How it works
• Advantages
• Limitations
• How to start
• When to use
Kyiv 2018

26. When to use

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. Absolute Mobile Fest
Kyiv 2018
Thanks
Questions?

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