Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CodeMash 2020: Solving the Boolean Identity Crisis

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.

Jeremy Fairbank

January 10, 2020
Tweet

More Decks by Jeremy Fairbank

Other Decks in Programming

Transcript

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

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

    error: true, errorMessage: 'Uh oh!', } ¯\_(ツ)_/¯ Invalid State
  3. if (props.error) { ... } else if (props.fetching) { ...

    } else if (props.success) { ... } else { ... }
  4. – Robert Harper “There is no information carried by a

    Boolean beyond its value, and that’s the rub.”
  5. ?

  6. Premise 1: If it’s raining then it’s cloudy. Premise 2:

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

    It’s raining. Conclusion: It’s cloudy. PROPOSITIONS
  8. Boolean ≠ Proposition A proposition, p, that is true is

    not the same as saying p is equal to true.
  9. 4

  10. const OpacitySlider = createSlider(true) const VolumeSlider = createSlider(false) const App

    = () => ( <div> <OpacitySlider /> <VolumeSlider /> </div> ) ?
  11. const createSlider = isHorizontal => () => { if (isHorizontal)

    { ... } else { ... } } Implicit vertical slider
  12. – Robert Martin “Boolean arguments loudly declare that the function

    does more than one thing. They are confusing and should be eliminated.”
  13. function bookFlight(airport, isPremium, hasCheckedLuggage, preferWindow) { const luggageCost = hasCheckedLuggage

    ? ... : ... if (isPremium) { if (hasCheckedLuggage) { ... } else { ... } } else if (hasCheckedLuggage) { ... } else { ... } }
  14. – 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.”
  15. const CustomerType = { Premium: 'Premium', Regular: 'Regular', } bookFlight('CLE',

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

    bookFlight('CLE', CustomerType.Premium) bookFlight('CLE', CustomerType.Regular)
  17. function bookFlight( airport: string, customerType: CustomerType, ): Promise<Flight> { switch

    (customerType) { case CustomerType.Premium: ... case CustomerType.Regular: ... } }
  18. function bookFlight( airport: string, customerType: CustomerType, ): Promise<Flight> { switch

    (customerType) { case CustomerType.Premium: ... case CustomerType.Regular: ... } }
  19. function bookFlight( airport: string, customerType: CustomerType, ): Promise<Flight> { switch

    (customerType) { case CustomerType.Premium: ... case CustomerType.Regular: ... } }
  20. const AngleType = { Degrees: 'Degrees', Radians: 'Radians', } const

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

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

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

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

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

    type Angle = { kind: AngleType, value: number, }
  26. function rotateFuelRod( fuelRod: FuelRod, angle: Angle, ): FuelRod { switch

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

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

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

    (angle.kind) { case AngleType.Degrees: ... case AngleType.Radians: ... } }
  30. 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) } }
  31. 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()) } })
  32. 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()) } })
  33. 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()) } })
  34. const caseInsensitive = string => string.toUpperCase() const caseSensitive = string

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

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

    => string matchingStrings( caseInsensitive, 'foo', ['FOOBAR', 'foobar'], ) matchingStrings( caseSensitive, 'foo', ['FOOBAR', 'foobar'], )
  37. const matchingStrings = ( normalize, pattern, strings ) => strings.filter(string

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

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

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

    => normalize(string).includes(normalize(pattern)) ) Higher-order Function
  41. const bookPremiumCustomer = () => { ... } const bookRegularCustomer

    = () => { ... } bookFlight('CLE', bookPremiumCustomer) bookFlight('CLE', bookRegularCustomer)
  42. – Conor McBride “To make use of a Boolean you

    have to know its provenance so that you can know what it means.”
  43. function findDogByName(name, dogs) { if (name in dogs) { return

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

    `${name} is a ${dogs[name].breed}`; } else { return `${name} is a ${dogs[name].breed}`; } }
  45. function canDivide(denominator) { return denominator != 0 } function divisionResult(numerator,

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

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

    is ${numerator / denominator}` } else { return `The result is ${numerator / denominator}` } }
  48. 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
  49. .map n => n * 2 Just 21 .map n

    => n * 2 Just 42 Nothing Nothing
  50. const divide = (numerator, denominator) => denominator === 0 ?

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

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

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

    Result.err('Divide by zero') : Result.ok(numerator / denominator)
  54. const divisionResult = (numerator, denominator) => divide(numerator, denominator) .mapOrElse( error

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

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

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

    => `Could not divide: ${error}`, quotient => `The quotient is ${quotient}`, )
  58. Back to State { fetching: false, success: true, dog: {

    name: "Tucker" }, error: False, errorMessage: "", }
  59. if (props.error) { ... } else if (props.fetching) { ...

    } else if (props.success) { ... } else { ... }
  60. { fetching: true, success: true, dog: { name: "Tucker" },

    error: true, errorMessage: "Uh oh!", }
  61. const ready = () => ({ status: RemoteDoggo.Ready }) const

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

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

    { dog: success({ name: 'Tucker' }), ... } { dog: fail('Uh oh!'), ... }
  64. function App({ dog }) { switch (dog.status) { case RemoteDoggo.Ready:

    return <FindDog /> case RemoteDoggo.Fetching: return <Spinner /> case RemoteDoggo.Success: return <Dog dog={dog.value} /> case RemoteDoggo.Fail: return <Error message={dog.message} /> } }
  65. function App({ dog }) { switch (dog.status) { case RemoteDoggo.Ready:

    return <FindDog /> case RemoteDoggo.Fetching: return <Spinner /> case RemoteDoggo.Success: return <Dog dog={dog.value} /> case RemoteDoggo.Fail: return <Error message={dog.message} /> } }
  66. 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 }
  67. function App({ dog }: AppProps): React.ReactElement { switch (dog.kind) {

    case Status.Ready: return <FindDog /> case Status.Fetching: return <Spinner /> case Status.Success: return <Dog dog={dog.value} /> // case Status.Fail: // return <Error message={dog.message} /> } }
  68. 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.