#Three Simple Rules For Managing Shared State

Why Talk About This

  • Shared state sucks
  • For a stateless platform, the web has become really stateful
  • SPAs introduce and deal with state all over the place
###Rule #1 ##Don't do it
 

Write Stateless Code

  • Use functional paradigms
  • Prefer Data Transformations Over Modifications
  • Rely on your State Machine (router) for State Maintenance

What If There's Global Data?

Make a copy of the data and operate on that

...Then shoot the developer that created a global variable

###Rule #2 ##Keep state near the ui
This is a two step process: 1. Modularize state data 2. Bundle it with the UI
###Frameworks Support This! - Backbone -- Views and models are bound together - React -- JSX interacts with state tree/hierarchy - Angular -- 1.x has directives, 2.x has components - Ember -- Components
###Rule #3 ##Keep it encapsulated
###Think Object Oriented - Create state/transaction objects - Handle change through formal mutation - Keep the data out of meddling hands
###Sometimes Ceremony is a Good Thing Using getters and setters makes it obvious when things are modified - Set the data with a setter function: stateObject.set(key, value) - Get the data with a getter function: stateObject.get(key)
###Encapsulating Data Means Hiding - Use data hiding to keep operations from mucking up your work - Look to pointers and factories to help keep things under wraps
###Recap - Avoid shared state - Bind state to the UI - Use OO principles to encapsulate your data
##Questions?
###I'm Chris Stead #@cm_stead ##chrisstead.com