Mobile development with React Native

Slide about React Native at RSJS 2017 talk. The main goal of this presentation was to show the difference between React Native and hybrid applications, as well, how it works under the hood.

Transcript

1. MOBILE DEVELOPMENT WITH react native
2. Rodrigo boniatti Developer at Codeminer 42 Student at Universidade Feevale Github: boniattirodrigo Twitter: @boniattirodrigo Website: rodrigoboniatti.com
4. Mobile applications using javascript and react
5. IT’S REALLY NATIVE
6. Your code
7. from React Native: Under the hood slides
8. it isn’t a web view
9. Hybrid Native
11. Developer environment
12. use your favorite editor
13. use your device or simulator
16. debug in the browser
18. Friendly error messages
20. let’s get started
21. react-native init AwesomeProject cd AwesomeProject react-native run-ios
22. __tests__ android index.android.js index.ios.js ios node_modules package.json
23. Components
24. <div> → <View> <p>, <span> → <Text> <img> → <Image> <ul>, <li> → <ListView>
25. import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; class MyComponent extends Component { render() { return ( <View> <Text>Hello World</Text> </View> ); } } AppRegistry.registerComponent( 'AwesomeProject', () => MyComponent);
26. Button ListView MapView Navigator Picker ScrollView Slider StatusBar Switch Text TextInput View
27. How to use a component?
28. import { Text, View, ListView, ScrollView, Image, // . . . } from 'react-native';
29. import { Text, ScrollView, } from 'react-native'; class Carousel extends Component { render() { return ( <ScrollView> <Text>Lorem ipsum...</Text> <Text>Lorem ipsum...</Text> <Text>Lorem ipsum...</Text> <Text>Lorem ipsum...</Text> </ScrollView> ); } }
31. <Text style={{ backgroundColor: 'red', padding: 20, fontSize: 16, }}>
33. usIng props
34. <ScrollView horizontal={true} pagingEnabled={true} >
36. using methods
38. You can use the native code too
39. also, you can have two different files for each o.s.
40. carousel.ios.js carousel.android.js
41. Style
42. class MyTextComponent extends Component { render() { return ( <Text style={styles.text}>Lorem ipsum ...</Text> ) } } const styles = StyleSheet.create({ text: { padding: 20, fontSize: 16, backgroundColor: 'red', }, });
43. it uses flex-box
44. Separation of concerns
45. Architecture
46. Shadow queue (Native UI) Main thread (Bridge) JS thread (JS Code)
47. from React Native: Under the hood slides
48. from React Native: Under the hood slides
49. from React Native: Under the hood slides
52. 60 FPS
53. 16.6 MS/FRAME
54. showcases
55. Myntra Facebook Ads Manager See more showcases: https://facebook.github.io/react-native/showcase.html
56. Checkout: //engineering.instagram.com/react-native-at-instagram- dd828a9a90c7
57. Advantages
58. If you know React, you can easily catch that
59. VIBRANT ECOSYSTEM
60. Learn once write anywhere
61. Don't Waste Time Recompiling
62. some bad points
63. it’s a new technology
64. short documentation
65. stranger bugs
66. conclusion
67. questions?
68. thanks Speaker Deck https://speakerdeck.com/boniatti/mobile-development- with-react-native