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


  1. @cowboyd State of Enjoyment

  2. @cowboyd @cowboyd

  3. @cowboyd

  4. @cowboyd numbers can increment

  5. @cowboyd Redux

  6. @cowboyd MobX

  7. @cowboyd setState

  8. @cowboyd Ember Controller

  9. @cowboyd Why?

  10. @cowboyd numbers can increment

  11. @cowboyd Arrays can push

  12. @cowboyd Booleans can toggle

  13. @cowboyd What is a Boolean?

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

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

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

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

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

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

  20. @cowboyd

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

  22. @cowboyd

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

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

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

    a time
  26. @cowboyd Small Wheels: Boolean Controller

  27. @cowboyd Unstated

  28. @cowboyd setState

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

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

    with composition.
  31. @cowboyd Boolean

  32. @cowboyd Boolean Todo isCompleted

  33. @cowboyd Boolean Todo isCompleted Boolean Todo Array isCompleted … Boolean

    Todo isCompleted TodoList todos
  34. @cowboyd Redux

  35. @cowboyd Numbers increment Booleans toggle Arrays push

  36. @cowboyd

  37. @cowboyd

  38. @cowboyd

  39. @cowboyd Bring the Type y’all!

  40. @cowboyd numbers can increment

  41. @cowboyd Redux

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

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

  44. @cowboyd Then what do we want?

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

  46. @cowboyd JavaScript*

  47. @cowboyd JavaScript* - Easy to learn

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

  49. @cowboyd “JavaScript”

  50. @cowboyd numbers can increment

  51. @cowboyd “JavaScript”

  52. @cowboyd

  53. @cowboyd Mutation!

  54. @cowboyd Easy at rest

  55. @cowboyd Difficult in motion

  56. @cowboyd Immutable Difficult at rest Easy in motion

  57. @cowboyd Decisions

  58. @cowboyd Decisions

  59. @cowboyd Maybe?

  60. @cowboyd Spoiler Alert no

  61. @cowboyd

  62. @cowboyd

  63. @cowboyd

  64. @cowboyd

  65. @cowboyd

  66. @cowboyd

  67. @cowboyd Microstates.js Composable types for immutable data.

  68. @cowboyd Tiny API

  69. @cowboyd

  70. @cowboyd

  71. @cowboyd

  72. @cowboyd

  73. @cowboyd Tiny API implicit knowledge

  74. @cowboyd Benefits

  75. @cowboyd Benefits Immutable

  76. @cowboyd Benefits: immutable Computed Properties

  77. @cowboyd Benefits: immutable Memoization

  78. @cowboyd Benefits: immutable Memoization

  79. @cowboyd Benefits Value Stability

  80. @cowboyd Benefits: Value Stability Key Attributes

  81. @cowboyd Benefits: Value Stability Key Benefits

  82. @cowboyd Benefits: Value Stability

  83. @cowboyd Benefits: Value Stability

  84. @cowboyd Benefits: Value Stability

  85. @cowboyd Benefits: Value Stability

  86. @cowboyd Benefits: Value Stability Developer Managed Identity

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

  88. @cowboyd Benefits: Value Stability

  89. @cowboyd Benefits: Value Stability

  90. @cowboyd setState Benefits: Value Stability

  91. @cowboyd setState Benefits: Value Stability

  92. @cowboyd Redux Benefits: Value Stability

  93. @cowboyd Redux Benefits: Value Stability

  94. @cowboyd MobX Benefits: Value Stability

  95. @cowboyd MobX Benefits: Value Stability

  96. @cowboyd Microstates Benefits: Value Stability

  97. @cowboyd Microstates Benefits: Value Stability

  98. @cowboyd Performant Without optimization Benefits: Value Stability

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

  100. @cowboyd jQuery

  101. @cowboyd <OhaiComponent/>

  102. @cowboyd Component A new primitive for rendering

  103. @cowboyd stateQuery

  104. @cowboyd Microstates A new primitive for state management

  105. @cowboyd Thank You.