Building Stellar User Experiences with React Native

Transcript

1. Alex Kotliarskyi Building Stellar User Experiences with React Native
3. How do you know ☕ is good?
4. ☕
5. ☕
6. Expectations
7. Expectations iOS Android Desktop Web Mobile Web Windows Linux
8. Mobile apps have higher
 UX expectations level than Web apps
9. Expectations change
12. iOS Developer Web Developer React ❤ React Native Core Team (3 years) Building apps with RN (F8, Oculus) Alex Kotliarskyi @alex_frantic
13. <ScrollView> UIScrollView
 iOS android.widget.ScrollView Android
14. "React Native made me 10x more productive"
15. Android RN iOS time
16. 10% is not done
17. Building for is different
18. <ScrollView> <Text> <View> <DatePicker> <Switch> <Image> <TabBar>
19. <ScrollView> <Text> <View> <DatePicker> <Switch> <Image> <TabBar>
20. <ScrollView> <Text> <View> <DatePicker> <Switch> <Image> <TabBar> ✨
21. Text Input Direct Manipulation Animation and Spatial Awareness Loading State UI Library ....
22. It's all simple things
23. ...but not very obvious
25. Text Input Direct Manipulation Animation and Spatial Awareness Loading State UI Library
28. <TextInput
 style={styles.field} value={this.state.email} 
 onChangeText={(email) => this.setState({email})} 
 /> 

31. 10% time 100% done
32. Dismissing keyboard Autofocus Placeholders Space under keyboard Spell checking and auto-capitalization Keyboard type Custom return key
33. <TextInput style={styles.field} value={this.state.email} onChangeText={(email) => this.setState({email})} keyboardAppearance="light" placeholder="name@example.com" autoFocus={true} autoCapitalize="none" autoCorrect={false} keyboardType="email-address" returnKeyType="next" onSubmitEditing={this._focusNext} blurOnSubmit={false} /> 

34. <EmailInput value={this.state.email} 
 onChangeText={(email) => this.setState({email})} 
 /> 

35. Text Input Direct Manipulation Animation and Spatial Awareness Loading State UI Library
41. Direct
 manipulation
42. Direct Manipulation Instant Feedback Physics Touch Targets Ability to Cancel
43. ✍
44. https://webkit.org/blog/5610/more-responsive-tapping-on-ios/
45. <Touchable* />
46. Direct Manipulation Instant Feedback Physics Touch Targets Ability to Cancel
48. Animated.decay() Animated.timing() Animated.spring() https://github.com/wix/react-native-interactable
50. Animated.spring(value, { 
 ... 
 useNativeDriver: true, 
 }).start(); 

51. InteractionManager
52. Direct Manipulation Instant Feedback Physics Touch Targets Ability to Cancel
55. https://material.io/guidelines/usability/accessibility.html#accessibility-style
56. <Touchable hitSlop={...} />
58. Direct Manipulation Instant Feedback Physics Touch Targets Ability to Cancel
59. Button Cancelled
60. Text Input Direct Manipulation Animation and Spatial Awareness Loading State UI Library
67. Animation not a luxury
68. Animation a tool
69. iOS Android
71. Text Input Direct Manipulation Animation and Spatial Awareness Loading State UI Library
72. Most of web
 is about pages of content
75. class TaskDetails extends React.Component { 
 props: { id: string }; 
 state = { data: null }; 
 
 componentDidMount() { 
 fetch(`/tasks?id=${this.props.id}`) 
 .then(response => response.json()) 
 .then(data => this.setState({data})); 
 } 
 
 render() { 
 if (!this.state.data) { 
 return <ActivityIndicator /> 
 } else { 
 return ( 
 ... 
 ); 
 } 
 } 
 } 

76. Loading...
80. class TaskDetails extends React.Component { 
 props: { id: string, data: ?Object }; 
 state = { data: null }; 
 
 componentDidMount() { 
 fetch(`/tasks?id=${this.props.id}`) 
 .then(response => response.json()) 
 .then(data => this.setState({data})); 
 } 
 
 render() { 
 const data = this.state.data || this.props.data; 
 return ( 
 ... 
 ); 
 } 
 } 

81. class TaskListItem extends React.Component { 
 render() { 
 return ( 
 ... 
 <TouchableHighlight onPressIn={this._startPrefetching}> 
 ... 
 </TouchableHighlight> 
 ... 
 ); 
 } 
 } 
 500ms
82. DX → UX
83. MobX Relay
84. It Does Not Matter!
85. Go beyond what frameworks provide
86. Text Input Direct Manipulation Animation and Spatial Awareness Loading State UI Library
87. "Building with React Native is so easy,
 we don't need standard components" – Developer
88. Button
89. function Button(props) { 
 return ( 
 <TouchableOpacity onPress={props.onPress}> 
 <Text style={styles.blue}> 
 {props.caption} 
 </Text> 
 </TouchableOpacity> 
 ); 
 } 

90. 10% time 100% done
91. Cross platform Disabled state Icon Fixed height Text wrapping Accessibility Consistency
92. Build your own standard controls
93. Button ✨ ✨
94. Text Input Direct Manipulation Animation and Spatial Awareness Loading State UI Library
95. Experience it on a real device Animation and gestures are essential tools Go beyond what frameworks provide
96. Not rocket science
97. Resources?
99. But you can learn to see it
100. You have to care
101. Designers have to care
102. "Stop Drawing Dead Fish" Bret Victor
103. Little details are big
104. Quality is our responsibility
105. Quality defines perception of your business
106. Quality defines perception of React Native ecosystem
107. Build "pit of success" Talk more about User Experience Great examples
108. Thanks! http://frantic.im @alex_frantic ☕