React Native - Bringing modern web technologies to mobile

Lidan Hifi, Wix.com

Transcript

1. React Native Lidan Hifi Fullstack Developer, Wix Bringing modern web technologies to mobile Engineering
2. Native Java Objective-C Swift
3. Cross Platform PhoneGap Titanium Ionic Sencha Touch
4. Native Development Sucks*
5. Slow Development Cycle
6. Slow Development Cycle Different APIs to Code Same Things
7. Slow Development Cycle Different APIs to Code Same Things Slow Deployment Cycle
8. Slow Development Cycle Different APIs to Code Same Things Slow Deployment Cycle Separate Platform Teams
9. Slow Development Cycle Different APIs to Code Same Things Slow Deployment Cycle Separate Platform Teams
10. let [ PhoneGap, Trigger.io, Cordova, Ionic, Sencha Touch, Appcelerator Titanium, ...rest ] = stuffWeTriedBefore;
11. Native Development is more powerful
12. Stunning UX Develop Quickly
14. Everything was Native
15. No HTML
16. No WebView
17. Wix App is completely powered by JavaScript
18. React Native
19. Slow Development Cycle?
20. Instant Reload
21. Different APIs to Code Same Things?
22. 90% up to code reuse
23. Slow Deployment Cycle?
24. OTA Updates Deploy like you’re on the web
25. Native Experience
26. UX of Native Developer Experience of the web
27. Where’s the Catch?
28. Many Unsolved Problems
29. Many Unsolved Problems No Best Practices
30. Many Unsolved Problems No Best Practices Hard to Test
31. Many Unsolved Problems No Best Practices Hard to Test Instability
32. Large Community
33. How does it work?
34. Bridge Your App Code Native App React JS
35. Bridge Your App Code Native App React JS
36. Bridge Your App Code Native App React JS
37. Bridge Your App Code Native App React JS
38. Bridge Your App Code Native App React JS
39. Bridge Main Thread Background Thread Your App Code Native App React JS
40. React JS
41. Components
42. Functional UI
43. Declarative UI Imperative UI: Define Transitions (“how”) Declarative UI: Define States (“what”)
44. Declarative UI Predictable
45. Predictable Confidence
46. Predictable Confidence
47. 99+ 10
48. 99+ 10
49. 99+ 10
50. 99+ 10
51. 99+ 10 set badge to 99+! sad face! add badge! remove stars!
52. 10 Imperative UI: Define Transitions 10 99+ 10 10 99+ 10 99+ 99+ 99+ 99+ 10 3 states, 9 transitions
53. 10 Imperative UI: Define Transitions 10 99+ 10 10 99+ 10 99+ 99+ 99+ 99+ 10 3 states, 9 transitions O(n2)
54. Imperative UI: Define Transitions if (count == 0) { if (hasBadge()) { removeBadge(); } if (isSad()) { removeSadFace(); } addStars(); smile(); return; }
55. Imperative UI: Define Transitions else if (count <= 99) { if (isSmile()) { removeSmile(); } if (sad()) { removeSadFace(); } if (hasStars()) { removeStars(); } if (!hasBadge()) { addBadge(); } }
56. Imperative UI: Define Transitions else { if (hasStars()) { removeStars(); } if (!hasBadge()) { addBadge(); } if (isSmile()) { removeSmile(); } setSadFace(); } let count = count > 99 ? '99+' : count.toString(); getBadge().setText(count);
57. Imperative UI: Define Transitions
58. Declarative UI: Define States if (count === 0) { return <Bell style={styles.smile} /> }
59. Declarative UI: Define States if (count === 0) { return <Bell style={styles.smile} /> } else if (count <= 99) { return ( <Bell> <Bedge count={count} /> </Bell> ); }
60. Declarative UI: Define States if (count === 0) { return <Bell style={styles.smile} /> } else { return ( <Bell style={styles.sad}> <Badge count="99+" /> </Bell> ); } else if (count <= 99) { return ( <Bell> <Bedge count={count} /> </Bell> ); }
61. React Component render() { } } class HelloMessage extends React.Component { return <div>Hello {this.props.name}</div>;
62. React Component render() { } } class HelloMessage extends React.Component { return <div>Hello {this.props.name}</div>;
63. React Component render() { } } class HelloMessage extends React.Component { return <div>Hello {this.props.name}</div>;
64. React Component render() { } } class HelloMessage extends React.Component { return <div>Hello {this.props.name}</div>;
65. React Component render() { } } class HelloMessage extends React.Component { return <div>Hello {this.props.name}</div>; <HelloMessage name="Lidan" />
66. React Component: Adding State class Counter extends React.Component { } constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
67. React Component: Adding State class Counter extends React.Component { } constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
68. React Component: Adding State class Counter extends React.Component { } constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
69. React Component: Adding State class Counter extends React.Component { } constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
70. React Component: Adding State class Counter extends React.Component { } constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
71. React Component: Adding State class Counter extends React.Component { } constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
72. React Component: Adding State class Counter extends React.Component { } constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); } <Counter />
73. From Web to Mobile <div /> <View /> UIView <span /> <Text /> UILabel <img /> <Image /> UIImageView web react-native iOS native
74. React Native Components ActivityIndicatorIOS DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal Navigator PickerIOS Picker ProgressBarAndroid ProgressViewIOS WebView ScrollView SegmentedControlIOS Slider SliderIOS StatusBar Switch TabBarIOS TabBarIOS.Item Text TextInput ToolbarAndroid View
76. react-native-controllers https://github.com/wix/react-native-controllers
77. react-native-notifications Interactive Notifications Background Notifications Managed Notifications https://github.com/wix/react-native-controllers
78. Getting Started • Install NodeJS • Install React Native npm install -g react-native-cli • Create a new RN project react-native init MyProject • Run the application react-native run-ios react-native run-android
79. References React Native Official docs- facebook.github.io/react-native Make it Open- Building the F8 App— makeitopen.com Wix Engineering- www.wix.engineering Awesome react native- https://github.com/jondot/awesome-react-native
80. References React Native Official docs- facebook.github.io/react-native Make it Open- Building the F8 App— makeitopen.com Wix Engineering- www.wix.engineering Awesome react native- https://github.com/jondot/awesome-react-native
81. References React Native Official docs- facebook.github.io/react-native Make it Open- Building the F8 App— makeitopen.com Wix Engineering- www.wix.engineering Awesome react native- https://github.com/jondot/awesome-react-native
82. References React Native Official docs- facebook.github.io/react-native Make it Open- Building the F8 App— makeitopen.com Wix Engineering- www.wix.engineering Awesome react native- https://github.com/jondot/awesome-react-native
83. References React Native Official docs- facebook.github.io/react-native Make it Open- Building the F8 App— makeitopen.com Wix Engineering- www.wix.engineering Awesome react native- https://github.com/jondot/awesome-react-native
84. Questions? Engineering @lidanh