CodeMash 2020: Solving the Boolean Identity Crisis

While powerful in its simplicity and important to computation, the boolean can be limiting in applications. In this talk, briefly explore the history of boolean logic in computation and look at how booleans can become misused in programming languages. Explore examples where booleans obscure the meaning of code, make code harder to maintain, and hinder usability for teammates and users. Learn how to harness custom types and higher-order functions to write clearer code. More importantly, learn how to place empathy and usability at the forefront of the APIs and UIs you build.

Transcript

1. Jeremy Fairbank
   @elpapapollo
   bit.ly/cm-bool
   

   View Slide

2. @testdouble helps improves
   how the world build software.
   testdouble.com
   

   View Slide

3. Available in
   print or e-book
   programming-elm.com
   

   View Slide

4. View Slide

5. { ? }
   

   View Slide

6. {
   dog: null,
   }
   

   View Slide

7. FETCH?
   

   View Slide

8. {
   fetching: true,
   dog: null,
   }
   

   View Slide

9. SUCCESS?
   

   View Slide

10. {
    fetching: false,
    success: true,
    dog: { name: 'Tucker' },
    }
    

    View Slide

11. ERRORS?
    

    View Slide

12. {
    fetching: false,
    success: false,
    dog: null,
    error: true,
    errorMessage: 'Ruh roh!',
    }
    

    View Slide

13. {
    fetching: true,
    success: true,
    dog: { name: 'Tucker' },
    error: true,
    errorMessage: 'Uh oh!',
    }
    ¯\_(ツ)_/¯
    Invalid State
    

    View Slide

14. {
    fetching: true,
    success: true,
    dog: { name: 'Tucker' },
    error: true,
    errorMessage: 'Uh oh!',
    }
    ¯\_(ツ)_/¯
    Invalid State
    

    View Slide

15. if (props.error) {
    ...
    } else if (props.fetching) {
    ...
    } else if (props.success) {
    ...
    } else {
    ...
    }
    

    View Slide

16. STATE
    fetching
    success error
    ready
    

    View Slide

17. PRIMITIVE OBSESSION
    USING COMIC SANS IS
    KINDA LIKE PRIMITIVE
    OBSESSION
    

    View Slide

18. The Problem with Booleans…
    

    View Slide

19. – Robert Harper
    “There is no information carried
    by a Boolean beyond its value,
    and that’s the rub.”
    

    View Slide

20. binary data type with
    no inherent meaning
    boolean
    

    View Slide

21. bookFlight('CLE', true)
    ?
    

    View Slide

22. bookFlight('CLE', true)
    ?
    Offloading abstraction to our
    memory instead of the code.
    

    View Slide

23. bookFlight('CLE', true, false, true)
    ? ? ?
    

    View Slide

24. ?
    

    View Slide

25. Boolean Algebra
    George Boole
    x ∧ y
    x ∨ y
    x ∨ (y ∧ z)
    ¬x
    

    View Slide

26. Boolean Values
    true && true
    true || false
    true || (true && false)
    !true
    

    View Slide

27. Propositional
    Logic
    

    View Slide

28. Premise 1: If it’s raining then it’s cloudy.
    Premise 2: It’s raining.
    Conclusion: It’s cloudy.
    Propositional Logic
    

    View Slide

29. Premise 1: If it’s raining then it’s cloudy.
    Premise 2: It’s raining.
    Conclusion: It’s cloudy.
    PROPOSITIONS
    

    View Slide

30. prop·o·si·tion
    a statement that expresses a concept
    that can be true or false
    

    View Slide

31. Boolean ≠ Proposition
    A proposition, p, that is true is not the
    same as saying p is equal to true.
    

    View Slide

32. LOSS OF INTENT
    

    View Slide

33. LOSS OF INFORMATION
    

    View Slide

34. View Slide

35. bookFlight('CLE', true)
    ?
    

    View Slide

36. function bookFlight(airport, isPremium) {
    if (isPremium) {
    ...
    } else {
    ...
    }
    }
    

    View Slide

37. function bookFlight(airport, isPremium) {
    if (isPremium) {
    ...
    } else {
    ...
    }
    }
    

    View Slide

38. function bookFlight(airport, isPremium) {
    if (isPremium) {
    ...
    } else {
    ...
    }
    }
    Regular customer?
    

    View Slide

39. const OpacitySlider = createSlider(true)
    const VolumeSlider = createSlider(false)
    const App = () => (
    
    
    
    
    )
    ?
    

    View Slide

40. const createSlider = isHorizontal => () => {
    if (isHorizontal) {
    ...
    } else {
    ...
    }
    }
    

    View Slide

41. const createSlider = isHorizontal => () => {
    if (isHorizontal) {
    ...
    } else {
    ...
    }
    }
    Implicit
    vertical slider
    

    View Slide

42. – Robert Martin
    “Boolean arguments loudly
    declare that the function does
    more than one thing. They are
    confusing and should be
    eliminated.”
    

    View Slide

43. rotateFuelRod(fuelRod, 30, true)
    rotateControlRod( )
    ?
    

    View Slide

44. rotateFuelRod(fuelRod, 30, true)
    rotateControlRod(controlRod, 30, true)
    

    View Slide

45. View Slide

46. function rotateFuelRod(fuelRod, amount, inDegrees) {
    ...
    }
    function rotateControlRod(controlRod, amount, inRadians) {
    ...
    }
    

    View Slide

47. function rotateFuelRod(fuelRod, amount, inDegrees) {
    ...
    }
    function rotateControlRod(controlRod, amount, inRadians) {
    ...
    }
    

    View Slide

48. function rotateFuelRod(fuelRod, amount, inDegrees) {
    ...
    }
    function rotateControlRod(controlRod, amount, inRadians) {
    ...
    }
    

    View Slide

49. bookFlight('CLE', true, false, true)
    ? ? ?
    

    View Slide

50. function bookFlight(airport, isPremium, hasCheckedLuggage, preferWindow) {
    const luggageCost = hasCheckedLuggage
    ? ...
    : ...
    if (isPremium) {
    if (hasCheckedLuggage) {
    ...
    } else {
    ...
    }
    } else if (hasCheckedLuggage) {
    ...
    } else {
    ...
    }
    }
    

    View Slide

51. View Slide

52. – Martin Fowler
    “…an API should be written to make it
    easier for the caller, so if we know
    where the caller is coming from we
    should design the API with that
    information in mind.”
    

    View Slide

53. Write code for humans
    Not computers
    

    View Slide

54. View Slide

55. bookFlight('CLE', 'Premium')
    

    View Slide

56. function bookFlight(airport, customerType) {
    switch (customerType) {
    case 'Premium':
    ...
    case 'Regular':
    ...
    default:
    ...
    }
    }
    

    View Slide

57. function bookFlight(airport, customerType) {
    switch (customerType) {
    case 'Premium':
    ...
    case 'Regular':
    ...
    default:
    ...
    }
    }
    

    View Slide

58. bookFlight('CLE', 'premium')
    bookFlight('CLE', 'economical')
    bookFlight('CLE', '')
    Primitive Obsession Revisited
    

    View Slide

59. Represent a finite
    domain
    

    View Slide

60. type CustomerType
    = Premium
    | Regular
    

    View Slide

61. bookFlight "CLE" Premium
    bookFlight "CLE" Regular
    

    View Slide

62. bookFlight city customerType =
    case customerType of
    Premium -> ...
    Regular -> ...
    

    View Slide

63. bookFlight city customerType =
    case customerType of
    Premium -> ...
    Regular -> ...
    

    View Slide

64. bookFlight city customerType =
    case customerType of
    Premium -> ...
    Regular -> ...
    

    View Slide

65. const CustomerType = {
    Premium: 'Premium',
    Regular: 'Regular',
    }
    bookFlight('CLE', CustomerType.Premium)
    bookFlight('CLE', CustomerType.Regular)
    

    View Slide

66. function bookFlight(airport, customerType) {
    switch (customerType) {
    case CustomerType.Premium:
    ...
    case CustomerType.Regular:
    ...
    default:
    ...
    }
    }
    

    View Slide

67. function bookFlight(airport, customerType) {
    switch (customerType) {
    case CustomerType.Premium:
    ...
    case CustomerType.Regular:
    ...
    default:
    ...
    }
    }
    

    View Slide

68. enum CustomerType {
    Premium = 'Premium',
    Regular = 'Regular',
    }
    bookFlight('CLE', CustomerType.Premium)
    bookFlight('CLE', CustomerType.Regular)
    

    View Slide

69. function bookFlight(
    airport: string,
    customerType: CustomerType,
    ): Promise {
    switch (customerType) {
    case CustomerType.Premium:
    ...
    case CustomerType.Regular:
    ...
    }
    }
    

    View Slide

70. function bookFlight(
    airport: string,
    customerType: CustomerType,
    ): Promise {
    switch (customerType) {
    case CustomerType.Premium:
    ...
    case CustomerType.Regular:
    ...
    }
    }
    

    View Slide

71. function bookFlight(
    airport: string,
    customerType: CustomerType,
    ): Promise {
    switch (customerType) {
    case CustomerType.Premium:
    ...
    case CustomerType.Regular:
    ...
    }
    }
    

    View Slide

72. const AngleType = {
    Degrees: 'Degrees',
    Radians: 'Radians',
    }
    const degrees = value =>
    ({ kind: AngleType.Degrees, value })
    const radians = value =>
    ({ kind: AngleType.Radians, value })
    

    View Slide

73. const AngleType = {
    Degrees: 'Degrees',
    Radians: 'Radians',
    }
    const degrees = value =>
    ({ kind: AngleType.Degrees, value })
    const radians = value =>
    ({ kind: AngleType.Radians, value })
    

    View Slide

74. const AngleType = {
    Degrees: 'Degrees',
    Radians: 'Radians',
    }
    const degrees = value =>
    ({ kind: AngleType.Degrees, value })
    const radians = value =>
    ({ kind: AngleType.Radians, value })
    

    View Slide

75. rotateFuelRod(fuelRod, degrees(30))
    rotateControlRod(controlRod, radians(Math.PI))
    

    View Slide

76. enum AngleType {
    Degrees = 'Degrees',
    Radians = 'Radians',
    }
    type Angle = {
    kind: AngleType,
    value: number,
    }
    

    View Slide

77. enum AngleType {
    Degrees = 'Degrees',
    Radians = 'Radians',
    }
    type Angle = {
    kind: AngleType,
    value: number,
    }
    

    View Slide

78. enum AngleType {
    Degrees = 'Degrees',
    Radians = 'Radians',
    }
    type Angle = {
    kind: AngleType,
    value: number,
    }
    

    View Slide

79. function rotateFuelRod(
    fuelRod: FuelRod,
    angle: Angle,
    ): FuelRod {
    switch (angle.kind) {
    case AngleType.Degrees:
    ...
    case AngleType.Radians:
    ...
    }
    }
    

    View Slide

80. function rotate(
    rod: Rod,
    angle: Angle,
    ): Rod {
    switch (angle.kind) {
    case AngleType.Degrees:
    ...
    case AngleType.Radians:
    ...
    }
    }
    

    View Slide

81. function rotate(
    rod: Rod,
    angle: Angle,
    ): Rod {
    switch (angle.kind) {
    case AngleType.Degrees:
    ...
    case AngleType.Radians:
    ...
    }
    }
    

    View Slide

82. function rotate(
    rod: Rod,
    angle: Angle,
    ): Rod {
    switch (angle.kind) {
    case AngleType.Degrees:
    ...
    case AngleType.Radians:
    ...
    }
    }
    

    View Slide

83. rotateInDegrees(fuelRod, 30)
    rotateInRadians(controlRod, Math.PI)
    

    View Slide

84. rotateInDegrees(fuelRod, 30)
    rotateInRadians(controlRod, Math.PI)
    Still encourages primitive obsession
    

    View Slide

85. function rotate(
    rod: Rod,
    angle: Angle,
    ): Rod {
    switch (angle.kind) {
    case AngleType.Degrees:
    return rotateInDegrees(rod, angle.value)
    case AngleType.Radians:
    return rotateInRadians(rod, angle.value)
    }
    }
    

    View Slide

86. matchingStrings(
    Case.Insensitive,
    'foo',
    ['FOOBAR', 'foobar'],
    )
    matchingStrings(
    Case.Sensitive,
    'foo',
    ['FOOBAR', 'foobar'],
    )
    

    View Slide

87. const matchingStrings = (case_, pattern, strings) =>
    strings.filter(string => {
    switch (case_) {
    case Case.CaseSensitive:
    return string.includes(pattern)
    case Case.CaseInsensitive:
    return string
    .toUpperCase()
    .includes(pattern.toUpperCase())
    }
    })
    

    View Slide

88. const matchingStrings = (case_, pattern, strings) =>
    strings.filter(string => {
    switch (case_) {
    case Case.CaseSensitive:
    return string.includes(pattern)
    case Case.CaseInsensitive:
    return string
    .toUpperCase()
    .includes(pattern.toUpperCase())
    }
    })
    

    View Slide

89. const matchingStrings = (case_, pattern, strings) =>
    strings.filter(string => {
    switch (case_) {
    case Case.CaseSensitive:
    return string.includes(pattern)
    case Case.CaseInsensitive:
    return string
    .toUpperCase()
    .includes(pattern.toUpperCase())
    }
    })
    

    View Slide

90. const caseInsensitive = string => string.toUpperCase()
    const caseSensitive = string => string
    matchingStrings(
    caseInsensitive,
    'foo',
    ['FOOBAR', 'foobar'],
    )
    matchingStrings(
    caseSensitive,
    'foo',
    ['FOOBAR', 'foobar'],
    )
    

    View Slide

91. const caseInsensitive = string => string.toUpperCase()
    const caseSensitive = string => string
    matchingStrings(
    caseInsensitive,
    'foo',
    ['FOOBAR', 'foobar'],
    )
    matchingStrings(
    caseSensitive,
    'foo',
    ['FOOBAR', 'foobar'],
    )
    

    View Slide

92. const caseInsensitive = string => string.toUpperCase()
    const caseSensitive = string => string
    matchingStrings(
    caseInsensitive,
    'foo',
    ['FOOBAR', 'foobar'],
    )
    matchingStrings(
    caseSensitive,
    'foo',
    ['FOOBAR', 'foobar'],
    )
    

    View Slide

93. const matchingStrings = (
    normalize,
    pattern,
    strings
    ) =>
    strings.filter(string =>
    normalize(string).includes(normalize(pattern))
    )
    

    View Slide

94. const matchingStrings = (
    normalize,
    pattern,
    strings
    ) =>
    strings.filter(string =>
    normalize(string).includes(normalize(pattern))
    )
    

    View Slide

95. const matchingStrings = (
    normalize,
    pattern,
    strings
    ) =>
    strings.filter(string =>
    normalize(string).includes(normalize(pattern))
    )
    

    View Slide

96. const matchingStrings = (
    normalize,
    pattern,
    strings
    ) =>
    strings.filter(string =>
    normalize(string).includes(normalize(pattern))
    )
    Higher-order
    Function
    

    View Slide

97. const bookPremiumCustomer = () => { ... }
    const bookRegularCustomer = () => { ... }
    bookFlight('CLE', bookPremiumCustomer)
    bookFlight('CLE', bookRegularCustomer)
    

    View Slide

98. Make APIs
    UNDERSTANDABLE and
    CONVENIENT
    

    View Slide

99. Function
    True
    False
    

    View Slide

100. View Slide

101. function getTime(person) {
     if (doYouKnowTheTime(person)) {
     return tellMeTheTime(person)
     } else {
     return `
     Does anybody really know
     what time it is?
     `
     }
     }
     

     View Slide

102. function getTime(person) {
     if (doYouKnowTheTime(person)) {
     return tellMeTheTime(person)
     } else {
     return `
     Does anybody really know
     what time it is?
     `
     }
     }
     

     View Slide

103. function getTime(person) {
     if (doYouKnowTheTime(person)) {
     return tellMeTheTime(person)
     } else {
     return `
     Does anybody really know
     what time it is?
     `
     }
     }
     

     View Slide

104. function getTime(person) {
     if (doYouKnowTheTime(person)) {
     return tellMeTheTime(person)
     } else {
     return `
     Does anybody really know
     what time it is?
     `
     }
     }
     

     View Slide

105. function getTime(person) {
     if (doYouKnowTheTime(person)) {
     return tellMeTheTime(person)
     } else {
     return tellMeTheTime(person)
     }
     }
     

     View Slide

106. Boolean Blindness
     

     View Slide

107. – Conor McBride
     “To make use of a Boolean you
     have to know its provenance so
     that you can know what it
     means.”
     

     View Slide

108. Get your organic,
     homegrown
     booleans from
     Rhode Island!
     Providence, RI
     

     View Slide

109. PROVENANCE
     

     View Slide

110. function findDogByName(name, dogs) {
     if (name in dogs) {
     return `${name} is a ${dogs[name].breed}`;
     } else {
     return 'Heck! No pupper found.';
     }
     }
     

     View Slide

111. function findDogByName(name, dogs) {
     if (name in dogs) {
     return `${name} is a ${dogs[name].breed}`;
     } else {
     return `${name} is a ${dogs[name].breed}`;
     }
     }
     

     View Slide

112. function canDivide(denominator) {
     return denominator != 0
     }
     function divisionResult(numerator, denominator) {
     if (canDivide(denominator)) {
     return `The result is ${numerator / denominator}`
     } else {
     return 'Could not divide'
     }
     }
     

     View Slide

113. function canDivide(denominator) {
     return denominator != 0
     }
     function divisionResult(numerator, denominator) {
     if (canDivide(denominator)) {
     return `The result is ${numerator / denominator}`
     } else {
     return 'Could not divide'
     }
     }
     

     View Slide

114. function divisionResult(numerator, denominator) {
     if (canDivide(denominator)) {
     return `The result is ${numerator / denominator}`
     } else {
     return `The result is ${numerator / denominator}`
     }
     }
     

     View Slide

115. – Dan Licata
     “Boolean tests let you look,
     options let you see.”
     

     View Slide

116. Alternative
     Return Values
     

     View Slide

117. type Maybe a
     = Nothing
     | Just a
     

     View Slide

118. type Maybe a
     = Nothing
     | Just a
     

     View Slide

119. type Maybe a
     = Nothing
     | Just a
     

     View Slide

120. type Maybe a
     = Nothing
     | Just a
     

     View Slide

121. 42
     Just 42
     "Hi"
     Just "Hi"
     

     View Slide

122. Just 42 [42]
     Nothing [ ]
     

     View Slide

123. import { Maybe } from 'true-myth'
     Maybe.just(42) // Just 42
     Maybe.nothing() // Nothing
     Maybe.of(42) // Just 42
     Maybe.of(null) // Nothing
     Maybe.of(undefined) // Nothing
     

     View Slide

124. function findDogByName(name, dogs) {
     return Maybe.of(dogs[name])
     .map(dog => `${name} is a ${dog.breed}.`)
     .unwrapOr('Heck! No pupper found!')
     }
     

     View Slide

125. function findDogByName(name, dogs) {
     return Maybe.of(dogs[name])
     .map(dog => `${name} is a ${dog.breed}.`)
     .unwrapOr('Heck! No pupper found!')
     }
     

     View Slide

126. Maybe.of
     undefined
     Maybe.of
     Nothing
     dog Just dog
     

     View Slide

127. function findDogByName(name, dogs) {
     return Maybe.of(dogs[name])
     .map(dog => `${name} is a ${dog.breed}.`)
     .unwrapOr('Heck! No pupper found!')
     }
     

     View Slide

128. .map
     n => n * 2
     Just 21
     .map
     n => n * 2
     Just 42
     Nothing Nothing
     

     View Slide

129. function findDogByName(name, dogs) {
     return Maybe.of(dogs[name])
     .map(dog => `${name} is a ${dog.breed}.`)
     .unwrapOr('Heck! No pupper found!')
     }
     

     View Slide

130. function findDogByName(name, dogs) {
     return Maybe.of(dogs[name])
     .map(dog => `${name} is a ${dog.breed}.`)
     .unwrapOr('Heck! No pupper found!')
     }
     

     View Slide

131. .unwrapOr(-1)
     Just 42
     .unwrapOr(-1)
     42
     Nothing -1
     

     View Slide

132. function findDogByName(name, dogs) {
     return Maybe.of(dogs[name])
     .map(dog => `${name} is a ${dog.breed}.`)
     .unwrapOr('Heck! No pupper found!')
     }
     

     View Slide

133. whatTimeIsIt(person)
     .map(time => ...)
     .unwrapOr(...)
     

     View Slide

134. type Result error value
     = Ok value
     | Err error
     

     View Slide

135. type Result error value
     = Ok value
     | Err error
     

     View Slide

136. type Result error value
     = Ok value
     | Err error
     

     View Slide

137. import { Result } from 'true-myth'
     Result.ok(42) // Ok 42
     Result.err('Uh oh') // Err 'Uh oh'
     

     View Slide

138. const divide = (numerator, denominator) =>
     denominator === 0
     ? Result.err('Divide by zero')
     : Result.ok(numerator / denominator)
     

     View Slide

139. const divide = (numerator, denominator) =>
     denominator === 0
     ? Result.err('Divide by zero')
     : Result.ok(numerator / denominator)
     

     View Slide

140. const divide = (numerator, denominator) =>
     denominator === 0
     ? Result.err('Divide by zero')
     : Result.ok(numerator / denominator)
     

     View Slide

141. const divide = (numerator, denominator) =>
     denominator === 0
     ? Result.err('Divide by zero')
     : Result.ok(numerator / denominator)
     

     View Slide

142. const divisionResult = (numerator, denominator) =>
     divide(numerator, denominator)
     .mapOrElse(
     error => `Could not divide: ${error}`,
     quotient => `The quotient is ${quotient}`,
     )
     

     View Slide

143. const divisionResult = (numerator, denominator) =>
     divide(numerator, denominator)
     .mapOrElse(
     error => `Could not divide: ${error}`,
     quotient => `The quotient is ${quotient}`,
     )
     

     View Slide

144. const divisionResult = (numerator, denominator) =>
     divide(numerator, denominator)
     .mapOrElse(
     error => `Could not divide: ${error}`,
     quotient => `The quotient is ${quotient}`,
     )
     

     View Slide

145. const divisionResult = (numerator, denominator) =>
     divide(numerator, denominator)
     .mapOrElse(
     error => `Could not divide: ${error}`,
     quotient => `The quotient is ${quotient}`,
     )
     

     View Slide

146. See with Special Types
     

     View Slide

147. Back to State
     {
     fetching: false,
     success: true,
     dog: { name: "Tucker" },
     error: False,
     errorMessage: "",
     }
     

     View Slide

148. if (props.error) {
     ...
     } else if (props.fetching) {
     ...
     } else if (props.success) {
     ...
     } else {
     ...
     }
     

     View Slide

149. {
     fetching: true,
     success: true,
     dog: { name: "Tucker" },
     error: true,
     errorMessage: "Uh oh!",
     }
     

     View Slide

150. https://youtu.be/IcgmSRJHu_8
     

     View Slide

151. STATE
     fetching
     success error
     ready
     

     View Slide

152. const RemoteDoggo = {
     Ready: 'Ready',
     Fetching: 'Fetching',
     Success: 'Success',
     Fail: 'Fail',
     }
     

     View Slide

153. const ready = () =>
     ({ status: RemoteDoggo.Ready })
     const fetching = () =>
     ({ status: RemoteDoggo.Fetching })
     const success = value =>
     ({ status: RemoteDoggo.Success, value })
     const fail = message =>
     ({ status: RemoteDoggo.Fail, message })
     

     View Slide

154. const ready = () =>
     ({ status: RemoteDoggo.Ready })
     const fetching = () =>
     ({ status: RemoteDoggo.Fetching })
     const success = value =>
     ({ status: RemoteDoggo.Success, value })
     const fail = message =>
     ({ status: RemoteDoggo.Fail, message })
     

     View Slide

155. { dog: ready(), ... }
     { dog: fetching(), ... }
     { dog: success({ name: 'Tucker' }), ... }
     { dog: fail('Uh oh!'), ... }
     

     View Slide

156. function App({ dog }) {
     switch (dog.status) {
     case RemoteDoggo.Ready:
     return
     case RemoteDoggo.Fetching:
     return
     case RemoteDoggo.Success:
     return
     case RemoteDoggo.Fail:
     return
     }
     }
     

     View Slide

157. function App({ dog }) {
     switch (dog.status) {
     case RemoteDoggo.Ready:
     return
     case RemoteDoggo.Fetching:
     return
     case RemoteDoggo.Success:
     return
     case RemoteDoggo.Fail:
     return
     }
     }
     

     View Slide

158. enum Status {
     Ready = 'Ready',
     Fetching = 'Fetching',
     Success = 'Success',
     Fail = 'Fail',
     }
     type RemoteDoggo
     = { kind: Status.Ready }
     | { kind: Status.Fetching }
     | { kind: Status.Success, value: Dog }
     | { kind: Status.Fail, message: string }
     

     View Slide

159. function App({ dog }: AppProps): React.ReactElement {
     switch (dog.kind) {
     case Status.Ready:
     return
     case Status.Fetching:
     return
     case Status.Success:
     return
     // case Status.Fail:
     // return
     }
     }
     

     View Slide

160. app.tsx:20:34 - error TS2366:
     Function lacks ending return statement
     and return type does not include 'undefined'.
     20 function App({ dog }: AppProps): React.ReactElement {
     ~~~~~~~~~~~~~~~~~~
     Found 1 error.
     

     View Slide

161. Impossible state becomes impossible*
     Code becomes understandable
     *trademark Richard Feldman
     

     View Slide

162. But wait,
     There’s MORE!
     AS SEEN ON
     U I
     

     View Slide

163. Save to archive
     

     View Slide

164. Save to archive
     A wild checkbox appears!
     

     View Slide

165. Save to archive
     ✓
     

     View Slide

166. Save to archive
     ?
     

     View Slide

167. View Slide

168. We design APIs for callers
     So we should design UIs for users
     

     View Slide

169. View Slide

170. hu·mane
     having or showing compassion or
     benevolence
     

     View Slide

171. Save to archive
     ?
     

     View Slide

172. Save to archive
     Save to inbox
     

     View Slide

173. Save to archive
     Save to inbox
     

     View Slide

174. Save to archive
     Save to inbox
     Verb labels = when will it happen?
     

     View Slide

175. Saved to archive
     Saved to inbox
     Adjective labels = describe the final result.
     

     View Slide

176. Goodbye, boolean?
     

     View Slide

177. B A L A N C E
     

     View Slide

178. EMPATHY
     

     View Slide

179. Jeremy Fairbank
     @elpapapollo
     Slides: bit.ly/cm-bool
     

     View Slide