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.

JS Fest 2018. Илья Иванов. Введение в React-Native

149 views

Published on

Создание нативных мобильных приложений с помощью JavaScript? Без регистрации и WebView? Этот доклад покажет как работает React-Native и заглянет под его капот. Для решения каких задач он был реализован и какие у него существую достоинства и ограничения. Но сперва разберем чем React-Native отличается от гибридных (Hybrid Apps) и прогрессивных (Progressive Web Apps) подходов.

Published in: Education
  • Be the first to comment

JS Fest 2018. Илья Иванов. Введение в React-Native

  1. 1. From Back-end to Front-end Kiev 2018 React-Native: Introduction Ilya Ivanov Mobile Team Lead at Payoneer Team Ciklum
  2. 2. About me React-Native: Introduction • 1.5 years in react-native • 3 years in web • 3 years in C#/.NET Back-end Web front-end Mobile front-end
  3. 3. What to expect • Show React-Native in context • Explain how React-Native works • Help you avoid silly mistakes I did when started React-Native: Introduction
  4. 4. What not to expect • Complete course on building mobile apps with React-Native • I won’t tell you what state management library to use React-Native: Introduction
  5. 5. Agenda • Ways to create mobile UI • React.js in 5 minutes • React-Native key concepts • How React-Native works • Advanced concepts • React-Native pitfalls React-Native: Introduction
  6. 6. Ways to create mobile UI 1. Native application (Objective-C or Swift/Java) 2. Website running within mobile browser 3. Hybrid application (HTML/JS/CSS in WebView)
  7. 7. MountainRoad Hybrid Cyclo-cross Cross-country Types of bikes
  8. 8. Web Web Code Browser Hybrid Native Container Web Code Native Native App
  9. 9. Ways to create mobile apps summary • React-Native is a new way to create native apps • Each approach is a balance between UX and development speed
  10. 10. Agenda • Ways to create mobile UI • React.js in 5 minutes • React-Native key concepts • How React-Native works • Advanced concepts • React-Native pitfalls
  11. 11. React.js in 5 minutes • Declarative components • Virtual DOM • One-way data binding
  12. 12. Declarative components import React, {Component} from 'react'; class App extends Component { render() { return ( <div> <Title/> <form> <div> <label>Email address</label> <input type="text"/> </div> <br/> <input type="button" value="Submit"/> </form> </div> ); } }
  13. 13. Title component const Title = () => <h1>Sign me up!</h1>;
  14. 14. Virtual DOM div h1 form div label input br input div Browser DOM div h1 form div label input br input div DiffPatch react-dom react
  15. 15. One way data binding Event loop Handle Event Update state Re-render to Virtual DOM Reconcile Browser DOM
  16. 16. One way data binding class App extends Component { state = {}; render() { return ( <div> { this.state.submitted && <span>Thanks for submitting your email!</span> } <br/> <input type="button" value="Submit" onClick={() => this.setState({submitted: true})}/> </div> ); } }
  17. 17. React.js summary • Declarative components • Return virtual DOM elements • Virtual DOM • Abstracts away browser’s DOM • Change DOM via patches • One-way data binding • Unidirectional data flow • Triggered on explicit state changes (via setState call)
  18. 18. Agenda • Ways to create mobile UI • React.js in 5 minutes • React-Native key concepts • How React-Native works • Advanced concepts • React-Native pitfalls
  19. 19. React-Native key concepts • Ways to bootstrap • Primitives • Styling • Platform-specific code
  20. 20. Bootstrapping your application react-native init MyApplication Pros: • Can use custom native code • Stable in terms of dev experience create-react-native-app MyApplication Pros: • No need to install Android Studio and Xcode • Can publish your apps • You can always eject Cons: • Need to install Xcode and Android studio • Longer feedback cycle Cons: • Can’t use custom native code • Less stable
  21. 21. Initial app class App extends Component { render() { return ( <View style={styles.container}> <Text> Welcome to React Native! </Text> </View> ); } }
  22. 22. Primitives • View – fundamental component for building a UI. Supports layout with flexbox. • Similar to div • Text – all text should be wrapped into Text component. • Similar to span • TouchableOpacity – component to handle user press. • Somewhat similar to button
  23. 23. class App extends Component { state = { count: 0, }; increment = () => this.setState({count: this.state.count + 1}); render() { return ( <View> <TouchableOpacity onPress={this.increment} > <Text {this.state.count} </Text> </TouchableOpacity> </View> ); } }
  24. 24. Styling and flexbox <View style={styles.container}> <View style={styles.box}/> <View style={[styles.box, styles.red]}/> <View style={styles.box}/> </View> const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'space-around', alignItems: 'center', }, box: { height: 50, width: 50, backgroundColor: ’green', }, red: { backgroundColor: 'red', }, });
  25. 25. Flexbox native/web • flexDirection defaults • web: row • native: column • flex: • web: flex-grow, flex-shrink, flex-basis • flex: 2 2 10%; • native: flex • flex: 1;
  26. 26. Platform specific code //from Home.js import MyComponent from './MyComponent';
  27. 27. Platform specific code import {Platform} from 'react-native'; const MyComponent = () => <Text>{Platform.OS === 'android' ? 'This is Android' : 'This is iOS'} </Text>;
  28. 28. Key concepts summary • Bootstrapping • Start with Expo, eject if needed • Primitives • View => div • Text => span • TouchableOpacity => button • Styling • Flexbox almost identical to web • Syntax similar to react-style library styling • Platform-specific code • Platform-aware vs platform-agnostic components
  29. 29. Agenda • Ways to create mobile UI • React.js in 5 minutes • React-Native key concepts • How React-Native works • Advanced concepts • React-Native pitfalls
  30. 30. React-Native Virtual DOM View Text Android react-native react android.view android.text iOS UIView UILabel Reconciliation class App extends Component { render() { return ( <View style={styles.container}> <Text> Welcome to React Native! </Text> </View> ); } }
  31. 31. JS runtime environment Bridge Native Code How React-Native works
  32. 32. class App extends Component { state = { count: 0, }; increment = () => this.setState({count: this.state.count + 1}); render() { return ( <View> <TouchableOpacity onPress={this.increment} > <Text {this.state.count} </Text> </TouchableOpacity> </View> ); } }
  33. 33. Event flow Source: https://www.slideshare.net/rahatkhanna/introduction-to-react-native-rendering-charts-graphs
  34. 34. Agenda • Ways to create mobile UI • React.js in 5 minutes • React-Native key concepts • How React-Native works • Advanced concepts • React-Native pitfalls
  35. 35. Advanced React-Native • Navigation • Animation
  36. 36. Navigation • react-navigation • JavaScript-based navigation • react-native-navigation • Native implementation navigation
  37. 37. Navigation const ModalStack = StackNavigator({ Home: { screen: Home, }, ThreeBoxes: { screen: ThreeBoxes, }, });
  38. 38. Home screen class Home extends Component { static navigationOptions = { title: 'Home', }; render() { const {navigation} = this.props; return <View> <TouchableOpacity onPress={() => navigation.navigate('ThreeBoxes')} /> </View>; } }
  39. 39. Argues about smooth 60 FPS animation. But is using gif in presentation?
  40. 40. Animation class AnimatedBox extends Component { scale = new Animated.Value(1); animate = () => { const animation = Animated.timing( this.scale, { toValue: 6, duration: 2000, useNativeDriver: true, }, ); animation.start(); }; render() { const transform = [{scaleX: this.scale}, {scaleY: this.scale}]; return ( <View style={styles.container}> <TouchableOpacity onPress={this.animate}> <Animated.View style={[styles.box, {transform}]}/> </TouchableOpacity> </View> ); } }
  41. 41. Animation: summary • Runs on the native thread • Can achieve 60 FPS even on old Android devices • Doesn’t use setState (out of react.js component lifecycle)
  42. 42. Agenda • Ways to create mobile UI • React.js in 5 minutes • React-Native key concepts • How React-Native works • Advanced concepts • React-Native pitfalls
  43. 43. React-Native pitfalls • You still might need a native developer • React-Native favors performance over code readability • Be very careful with your state management • Big state updates might lead to performance degradation • Android and iOS are very different platforms
  44. 44. Summary • React-Native: no HTML/CSS, native views defined via JavaScript • Bridge - key part of js  native communication • Why React-Native? • You can write great native mobile apps having only web experience • Reuse your mental models and codebase from web
  45. 45. Thanks
  46. 46. Resources • Repository for the sample application • Getting started with React-Native • Why not Expo? • How Airnb is using React-Native • Animate React Native UI Elements

×