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

State Of Enjoyment

State Of Enjoyment

When was the last time you had fun working with state? For many, the answer is probably never, because state management in JavaScript is an endless game of compromises. You can choose to go fully immutable and write reams of boilerplate de-structuring and then re-structuring your data. You can go mutable and deal with the consequences of long, fragile sequences of chained observers. Or you can just go roll your own and somehow deal with keeping things consistent across your application.

Unlike the view layer, where most frameworks agree on some variation of the component, none of the current crop of state management tools have settled on anything resembling a similar consensus. Components have a tiny API. They are functional, yet easy to reason about, and they give you a high degree of productivity for little knowledge. And while they are conceptually simple, that simplicity hides an underlying architecture geared for performance.

These factors are what make components so easy to work with and ultimately so fun to write. So why doesn’t a similar API exist for state? Why shouldn’t working with state be as easy and intuitive as working with components? We’ll be talking about this very reasonable question, and the vision for what the “component of state management” would look like.

Charles Lowell

October 03, 2018
Tweet

More Decks by Charles Lowell

Other Decks in Programming

Transcript

  1. @cowboyd
    State of Enjoyment

    View Slide

  2. @cowboyd
    @cowboyd

    View Slide

  3. @cowboyd
    https://frontside.io

    View Slide

  4. @cowboyd
    numbers
    can
    increment

    View Slide

  5. @cowboyd
    Redux

    View Slide

  6. @cowboyd
    MobX

    View Slide

  7. @cowboyd
    setState

    View Slide

  8. @cowboyd
    Ember Controller

    View Slide

  9. @cowboyd
    Why?

    View Slide

  10. @cowboyd
    numbers
    can
    increment

    View Slide

  11. @cowboyd
    Arrays
    can
    push

    View Slide

  12. @cowboyd
    Booleans
    can
    toggle

    View Slide

  13. @cowboyd
    What is a Boolean?

    View Slide

  14. @cowboyd
    False
    True
    toggle()
    toggle()
    set(false)
    set(true)

    View Slide

  15. @cowboyd
    False
    True
    toggle()
    toggle()
    set(false)
    set(true)

    View Slide

  16. @cowboyd
    False
    True
    toggle()
    toggle()
    set(false)
    set(true)

    View Slide

  17. @cowboyd
    False
    True
    toggle()
    toggle()
    set(false)
    set(false)

    View Slide

  18. @cowboyd
    False
    True
    toggle()
    toggle()
    set(false)
    set(true)
    set(false)
    set(true)

    View Slide

  19. @cowboyd
    False
    True
    toggle()
    toggle()
    set(false)
    set(true)
    set(false)
    set(true)
    Boolean

    View Slide

  20. @cowboyd

    View Slide

  21. @cowboyd
    False
    True
    toggle()
    toggle()
    set(false)
    set(true)
    set(false)
    set(true)

    View Slide

  22. @cowboyd

    View Slide

  23. @cowboyd
    False
    True
    toggle()
    toggle()
    set(false)
    set(true)
    set(false)
    set(true)

    View Slide

  24. @cowboyd
    False
    True
    toggle()
    toggle()
    set(false)
    set(true)
    set(false)
    set(true)

    View Slide

  25. @cowboyd
    Reinventing Very
    Small Wheels
    One very small wheel at a time

    View Slide

  26. @cowboyd
    Small Wheels: Boolean
    Controller

    View Slide

  27. @cowboyd
    Unstated

    View Slide

  28. @cowboyd
    setState

    View Slide

  29. @cowboyd
    Relax Charles
    it’s just numbers. It’s just booleans

    View Slide

  30. @cowboyd
    Booleans aren’t hard
    They just get hard very quickly with composition.

    View Slide

  31. @cowboyd
    Boolean

    View Slide

  32. @cowboyd
    Boolean
    Todo
    isCompleted

    View Slide

  33. @cowboyd
    Boolean
    Todo
    isCompleted
    Boolean
    Todo
    Array
    isCompleted

    Boolean
    Todo
    isCompleted
    TodoList
    todos

    View Slide

  34. @cowboyd
    Redux

    View Slide

  35. @cowboyd
    Numbers increment
    Booleans toggle
    Arrays push

    View Slide

  36. @cowboyd

    View Slide

  37. @cowboyd

    View Slide

  38. @cowboyd

    View Slide

  39. @cowboyd
    Bring the Type y’all!

    View Slide

  40. @cowboyd
    numbers
    can
    increment

    View Slide

  41. @cowboyd
    Redux

    View Slide

  42. @cowboyd
    What about
    TypeScript?
    (and friends)

    View Slide

  43. @cowboyd
    Helps your DX, not
    your runtime.

    View Slide

  44. @cowboyd
    Then what do we
    want?

    View Slide

  45. @cowboyd
    JavaScript*
    *JavaScript is a registered trademark of Oracle Corporation

    View Slide

  46. @cowboyd
    JavaScript*

    View Slide

  47. @cowboyd
    JavaScript*
    - Easy to learn

    View Slide

  48. @cowboyd
    JavaScript*
    - Easy to learn
    - Cross framework

    View Slide

  49. @cowboyd
    “JavaScript”

    View Slide

  50. @cowboyd
    numbers
    can
    increment

    View Slide

  51. @cowboyd
    “JavaScript”

    View Slide

  52. @cowboyd

    View Slide

  53. @cowboyd
    Mutation!

    View Slide

  54. @cowboyd
    Easy at rest

    View Slide

  55. @cowboyd
    Difficult in motion

    View Slide

  56. @cowboyd
    Immutable
    Difficult at rest
    Easy in motion

    View Slide

  57. @cowboyd
    Decisions

    View Slide

  58. @cowboyd
    Decisions

    View Slide

  59. @cowboyd
    Maybe?

    View Slide

  60. @cowboyd
    Spoiler Alert
    no

    View Slide

  61. @cowboyd

    View Slide

  62. @cowboyd

    View Slide

  63. @cowboyd

    View Slide

  64. @cowboyd

    View Slide

  65. @cowboyd

    View Slide

  66. @cowboyd

    View Slide

  67. @cowboyd
    Microstates.js
    Composable types for immutable data.
    https://github.com/microstates/microstates.js

    View Slide

  68. @cowboyd
    Tiny API

    View Slide

  69. @cowboyd

    View Slide

  70. @cowboyd

    View Slide

  71. @cowboyd

    View Slide

  72. @cowboyd

    View Slide

  73. @cowboyd
    Tiny API
    implicit knowledge

    View Slide

  74. @cowboyd
    Benefits

    View Slide

  75. @cowboyd
    Benefits
    Immutable

    View Slide

  76. @cowboyd
    Benefits: immutable
    Computed Properties

    View Slide

  77. @cowboyd
    Benefits: immutable
    Memoization

    View Slide

  78. @cowboyd
    Benefits: immutable
    Memoization

    View Slide

  79. @cowboyd
    Benefits
    Value Stability

    View Slide

  80. @cowboyd
    Benefits: Value Stability
    Key Attributes

    View Slide

  81. @cowboyd
    Benefits: Value Stability
    Key Benefits

    View Slide

  82. @cowboyd
    Benefits: Value Stability

    View Slide

  83. @cowboyd
    Benefits: Value Stability

    View Slide

  84. @cowboyd
    Benefits: Value Stability

    View Slide

  85. @cowboyd
    Benefits: Value Stability

    View Slide

  86. @cowboyd
    Benefits: Value Stability
    Developer Managed Identity

    View Slide

  87. @cowboyd
    Benefits: Value Stability
    `===` everywhere

    View Slide

  88. @cowboyd
    Benefits: Value Stability

    View Slide

  89. @cowboyd
    Benefits: Value Stability

    View Slide

  90. @cowboyd
    setState
    Benefits: Value Stability

    View Slide

  91. @cowboyd
    setState
    Benefits: Value Stability

    View Slide

  92. @cowboyd
    Redux
    Benefits: Value Stability

    View Slide

  93. @cowboyd
    Redux
    Benefits: Value Stability

    View Slide

  94. @cowboyd
    MobX
    Benefits: Value Stability

    View Slide

  95. @cowboyd
    MobX
    Benefits: Value Stability

    View Slide

  96. @cowboyd
    Microstates
    Benefits: Value Stability

    View Slide

  97. @cowboyd
    Microstates
    Benefits: Value Stability

    View Slide

  98. @cowboyd
    Performant
    Without optimization
    Benefits: Value Stability

    View Slide

  99. @cowboyd
    Conclusion
    There are a lot of tradeoffs in state management.

    View Slide

  100. @cowboyd
    jQuery

    View Slide

  101. @cowboyd

    View Slide

  102. @cowboyd
    Component
    A new primitive for rendering

    View Slide

  103. @cowboyd
    stateQuery

    View Slide

  104. @cowboyd
    Microstates
    A new primitive for state management

    View Slide

  105. @cowboyd
    Thank You.

    View Slide