Building Stellar User Experiences with React Native

Building Stellar User Experiences with React Native

09f29a1cb5a7c670532ba4bb1b224758?s=128

Alexander Kotliarskyi

July 12, 2017
Tweet

Transcript

  1. Alex Kotliarskyi Building Stellar User Experiences with React Native

  2. None
  3. How do you know ☕ is good?

  4. Expectations

  5. Expectations iOS Android Desktop Web Mobile Web Windows Linux

  6. Mobile apps have higher
 UX expectations level than Web apps

  7. Expectations change

  8. None
  9. None
  10. iOS Developer Web Developer React ❤ React Native Core Team

    (3 years) Building apps with RN (F8, Oculus) Alex Kotliarskyi @alex_frantic
  11. <ScrollView> UIScrollView
 iOS android.widget.ScrollView Android

  12. "React Native made me 10x more productive"

  13. Android RN iOS time

  14. 10% is not done

  15. Building for is different

  16. <ScrollView> <Text> <View> <DatePicker> <Switch> <Image> <TabBar>

  17. <ScrollView> <Text> <View> <DatePicker> <Switch> <Image> <TabBar>

  18. <ScrollView> <Text> <View> <DatePicker> <Switch> <Image> <TabBar> ✨

  19. Text Input Direct Manipulation Animation and Spatial Awareness Loading State

    UI Library ....
  20. It's all simple things

  21. ...but not very obvious

  22. None
  23. Text Input Direct Manipulation Animation and Spatial Awareness Loading State

    UI Library
  24. None
  25. None
  26. <TextInput
 style={styles.field} value={this.state.email} 
 onChangeText={(email) => this.setState({email})} 
 /> 


  27. None
  28. None
  29. 10% time 100% done

  30. Dismissing keyboard Autofocus Placeholders Space under keyboard Spell checking and

    auto-capitalization Keyboard type Custom return key
  31. <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} /> 

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


  33. Text Input Direct Manipulation Animation and Spatial Awareness Loading State

    UI Library
  34. None
  35. None
  36. None
  37. None
  38. None
  39. Direct
 manipulation

  40. Direct Manipulation Instant Feedback Physics Touch Targets Ability to Cancel

  41. https://webkit.org/blog/5610/more-responsive-tapping-on-ios/

  42. <Touchable* />

  43. Direct Manipulation Instant Feedback Physics Touch Targets Ability to Cancel

  44. None
  45. Animated.decay() Animated.timing() Animated.spring() https://github.com/wix/react-native-interactable

  46. None
  47. Animated.spring(value, { 
 ... 
 useNativeDriver: true, 
 }).start(); 


  48. InteractionManager

  49. Direct Manipulation Instant Feedback Physics Touch Targets Ability to Cancel

  50. None
  51. None
  52. https://material.io/guidelines/usability/accessibility.html#accessibility-style

  53. <Touchable hitSlop={...} />

  54. None
  55. Direct Manipulation Instant Feedback Physics Touch Targets Ability to Cancel

  56. Button Cancelled

  57. Text Input Direct Manipulation Animation and Spatial Awareness Loading State

    UI Library
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. Animation not a luxury

  65. Animation a tool

  66. iOS Android

  67. None
  68. Text Input Direct Manipulation Animation and Spatial Awareness Loading State

    UI Library
  69. Most of web
 is about pages of content

  70. None
  71. None
  72. 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 ( 
 ... 
 ); 
 } 
 } 
 } 

  73. Loading...

  74. None
  75. None
  76. None
  77. 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 ( 
 ... 
 ); 
 } 
 } 

  78. class TaskListItem extends React.Component { 
 render() { 
 return

    ( 
 ... 
 <TouchableHighlight onPressIn={this._startPrefetching}> 
 ... 
 </TouchableHighlight> 
 ... 
 ); 
 } 
 } 
 500ms
  79. DX → UX

  80. MobX Relay

  81. It Does Not Matter!

  82. Go beyond what frameworks provide

  83. Text Input Direct Manipulation Animation and Spatial Awareness Loading State

    UI Library
  84. "Building with React Native is so easy,
 we don't need

    standard components" – Developer
  85. Button

  86. function Button(props) { 
 return ( 
 <TouchableOpacity onPress={props.onPress}> 


    <Text style={styles.blue}> 
 {props.caption} 
 </Text> 
 </TouchableOpacity> 
 ); 
 } 

  87. 10% time 100% done

  88. Cross platform Disabled state Icon Fixed height Text wrapping Accessibility

    Consistency
  89. Build your own standard controls

  90. Button ✨ ✨

  91. Text Input Direct Manipulation Animation and Spatial Awareness Loading State

    UI Library
  92. Experience it on a real device Animation and gestures are

    essential tools Go beyond what frameworks provide
  93. Not rocket science

  94. Resources?

  95. None
  96. But you can learn to see it

  97. You have to care

  98. Designers have to care

  99. "Stop Drawing Dead Fish" Bret Victor

  100. Little details are big

  101. Quality is our responsibility

  102. Quality defines perception of your business

  103. Quality defines perception of React Native ecosystem

  104. Build "pit of success" Talk more about User Experience Great

    examples
  105. Thanks! http://frantic.im @alex_frantic ☕