Building Stellar User Experiences with React Native

Transcript

1. Alex Kotliarskyi
   Building Stellar User Experiences with
   React Native
   

   View Slide

2. View Slide

3. How do you know ☕ is good?
   

   View Slide

4. ☕
   
   
   

   View Slide

5. ☕
   
   
   

   View Slide

6. 
   Expectations
   
   

   View Slide

7. Expectations
   iOS
   Android
   Desktop Web
   Mobile Web
   Windows
   Linux
   

   View Slide

8. Mobile apps have higher

   UX expectations level than
   Web apps
   

   View Slide

9. Expectations change
   

   View Slide

10. View Slide

11. View Slide

12. iOS Developer
    Web Developer
    React ❤
    React Native Core Team (3 years)
    Building apps with RN (F8, Oculus)
    Alex Kotliarskyi
    @alex_frantic
    

    View Slide

13. 
    UIScrollView

    iOS
    android.widget.ScrollView
    Android
    

    View Slide

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

    View Slide

15. Android
    RN
    iOS
    time
    

    View Slide

16. 10% is not done
    

    View Slide

17. Building for is different
    

    View Slide

18. 
    
    
    
    
    
    
    

    View Slide

19. 
    
    
    
    
    
    
    
    

    View Slide

20. 
    
    
    
    
    
    
    ✨
    
    

    View Slide

21. Text Input
    Direct Manipulation
    Animation and Spatial Awareness
    Loading State
    UI Library
    ....
    

    View Slide

22. It's all simple things
    

    View Slide

23. ...but not very obvious
    

    View Slide

24. View Slide

25. Text Input
    Direct Manipulation
    Animation and Spatial Awareness
    Loading State
    UI Library
    

    View Slide

26. View Slide

27. View Slide

28. style={styles.field}
    value={this.state.email} 

    onChangeText={(email) => this.setState({email})} 

    /> 

    

    View Slide

29. View Slide

30. View Slide

31. 10% time 100% done
    

    View Slide

32. Dismissing
    keyboard
    Autofocus
    Placeholders
    Space under
    keyboard
    Spell checking and
    auto-capitalization
    Keyboard type
    Custom return key
    

    View Slide

33. 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}
    /> 

    

    View Slide

34. value={this.state.email} 

    onChangeText={(email) => this.setState({email})} 

    /> 

    

    View Slide

35. Text Input
    Direct Manipulation
    Animation and Spatial Awareness
    Loading State
    UI Library
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. 
    
    Direct

    manipulation
    

    View Slide

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

    View Slide

43. ✍
    

    View Slide

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

    View Slide

45. 
    

    View Slide

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

    View Slide

47. View Slide

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

    View Slide

49. View Slide

50. Animated.spring(value, { 

    ... 

    useNativeDriver: true, 

    }).start(); 

    

    View Slide

51. InteractionManager
    

    View Slide

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

    View Slide

53. View Slide

54. View Slide

55. https://material.io/guidelines/usability/accessibility.html#accessibility-style
    

    View Slide

56. 
    

    View Slide

57. View Slide

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

    View Slide

59. Button
    Cancelled
    

    View Slide

60. Text Input
    Direct Manipulation
    Animation and Spatial Awareness
    Loading State
    UI Library
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. Animation not a luxury
    

    View Slide

68. Animation a tool
    

    View Slide

69. iOS
    Android
    

    View Slide

70. View Slide

71. Text Input
    Direct Manipulation
    Animation and Spatial Awareness
    Loading State
    UI Library
    

    View Slide

72. Most of web

    is about pages of content
    

    View Slide

73. View Slide

74. View Slide

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 

    } else { 

    return ( 

    ... 

    ); 

    } 

    } 

    } 

    

    View Slide

76. Loading...
    

    View Slide

77. View Slide

78. View Slide

79. View Slide

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 ( 

    ... 

    ); 

    } 

    } 

    

    View Slide

81. class TaskListItem extends React.Component { 

    render() { 

    return ( 

    ... 

    

    ... 

    

    ... 

    ); 

    } 

    } 

    500ms
    

    View Slide

82. DX → UX
    

    View Slide

83. MobX
    Relay
    

    View Slide

84. It Does Not Matter!
    

    View Slide

85. Go beyond what
    frameworks provide
    

    View Slide

86. Text Input
    Direct Manipulation
    Animation and Spatial Awareness
    Loading State
    UI Library
    

    View Slide

87. "Building with React Native is so easy,

    we don't need standard components"
    – Developer
    

    View Slide

88. Button
    

    View Slide

89. function Button(props) { 

    return ( 

    

    

    {props.caption} 

    

    

    ); 

    } 

    

    View Slide

90. 10% time 100% done
    

    View Slide

91. Cross platform
    Disabled state
    Icon
    Fixed height
    Text wrapping
    Accessibility
    Consistency
    

    View Slide

92. Build your own standard controls
    

    View Slide

93. Button
    ✨
    ✨
    

    View Slide

94. Text Input
    Direct Manipulation
    Animation and Spatial Awareness
    Loading State
    UI Library
    

    View Slide

95. Experience it on a real device
    Animation and gestures are essential tools
    Go beyond what frameworks provide
    

    View Slide

96. Not rocket science
    

    View Slide

97. Resources?
    

    View Slide

98. View Slide

99. But you can learn to see it
    

    View Slide

100. You have to care
     

     View Slide

101. Designers have to care
     

     View Slide

102. "Stop Drawing Dead Fish"
     Bret Victor
     

     View Slide

103. Little details are big
     

     View Slide

104. Quality is our responsibility
     

     View Slide

105. Quality defines perception
     of your business
     

     View Slide

106. Quality defines perception
     of React Native ecosystem
     

     View Slide

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

     View Slide

108. Thanks!
     http://frantic.im
     @alex_frantic
     ☕
     

     View Slide