Enemy of the state

For over a decade, most of us built web UIs operating under the assumption that servers would render mostly-static HTML, and we’d boil the ocean and free all client-side memory with every page load. This was a simple world, where the server-side was aware of the user’s intent and context.

Enter the Single Page Application (SPA) - there are all sorts of usability and performance, and scalability benefits that come along with building a web app this way, but there are also some serious challenges. There are some implicit assumptions that our users make about how apps should work, and we must work a bit harder in order to keep them intact. Take the “Back” and “Refresh” buttons, for example: in order for this to work as our users expect, we must keep certain elements of state serialized in the URL in order to avoid “breaking” this as we simulate a multi-page experience in a SPA.

Add in the concept of “server-side rendering”, where our asset serving layer sometimes needs browser details (i.e. viewport dimensions) in order to render the correct content, and state decisions become even more consequential and complex.

In this talk, I’ll outline four types of state

- Navigation state
- Persisted state
- UI state
- “Will be persisted” state

and provide examples for each. Along the way, we’ll start to assemble a framework of questions that you can ask yourself when encountering new pieces of state, to lead you down the right path(s).

Transcript

1. MIKE NORTH @MICHAELLNORTH bit.ly/ef16-state
2. WHOIS MIKE-NORTH I’ve taught thousands of developers, how to win with I used to be the UI Architect for Ads & Data at I’ve consulted/trained for companies with gnarly apps, and have noticed a common challenge…
3. STATE MANAGEMENT IS IMPORTANT, EVEN FOR SIMPLE STUFF
4. IDENTIFYING STATE ITERATIVE EXAMPLE
6. IDENTIFYING STATE ITERATIVE EXAMPLE STATE IN YOUR EMBER APP
8. UI STATE ADDRESSABLE STATE PERSISTED STATE DRAFT STATE 4 FLAVORS OF STATE
13. POSTS POSTS/SHOW {{POST-TILE}} {{POST-TILE}} {{POST-TILE}} {{POST-FULL}} {{POST-COMMENT}} {{POST-COMMENT}}
14. ADDRESSABLE STATE
15. SHARABLE, HISTORICALLY ARCHIVED AND URL-DRIVEN Core Concept - Addressable State ADDRESSABLE STATE
16. ADDRESSABLE STATE EXAMPLES ‣ Sorted/filtered search results ‣ Tabs/Navigation ‣ A section of a Github Readme
17. ADDRESSABLE STATE HOW TO IDENTIFY ADDRESSABLE STATE ‣ Affects GET API calls ‣ A perspective on a record or collection of records ‣ Useful when shared ‣ Mismanaged when - back button breaks
18. ADDRESSABLE STATE CONTRACT: USERS AND THE WEB ▸ Refresh: never destructive by surprise ▸ Bookmarks: get back to where I was ▸ Back: previous major thing ▸ Back a lot: leave the app
19. keyUp refresh debounce ADDRESSABLE STATE ENHANCING OUR BASIC APP ▸ Filter by a name fragment ▸ Bookmark & Share ▸ Don’t abuse our API ▸ Data Down, Actions Up PostsController PostsRoute {{input}} queryParams: { search: { replace: true } }
20. TEMPLATE posts.hbs
22. CONTROLLER posts.js
24. ROUTE posts.js
29. 1-navigation
30. ADDRESSABLE STATE GOTCHAS AND COMMON ISSUES ▸ Trapping users ▸ Deleting useful history ▸ Unimportant history states ▸ Some Route queryParam options are mutually exclusive (right now) (replace vs refreshModel) ▸ Tricky: Add to Home Screen ⚠
31. DRAFT STATE
32. LOCALLY-STORED TEMPORARILY, WILL EVENTUALLY BE PERSISTED Core Concept - Draft State DRAFT STATE
33. DRAFT STATE EXAMPLES ‣ A reply to an email message ‣ The body of a huge GitHub comment ‣ In-flight records HOW TO IDENTIFY ‣ Will turn into persisted state ‣ High user effort ‣ Survives transitions ‣ Detrimental to UX if lost
34. DRAFT STATE CONCEPTUAL MODEL A Post
35. DRAFT STATE CONCEPTUAL MODEL A Post A Comment
36. A Post DRAFT STATE CONCEPTUAL MODEL A Comment
37. DRAFT STATE CONCEPTUAL MODEL A Comment A Post
38. DRAFT STATE CONCEPTUAL MODEL A Post A Comment
39. DRAFT STATE CONCEPTUAL MODEL - KEY CONCEPT WEAK MAP
40. DRAFT STATE CONCEPTUAL MODEL - KEY CONCEPT WEAK MAP If an object that is being used as the key of a WeakMap key/value pair is only reachable by following a chain of references that start within that WeakMap, that key/value pair is inaccessible and is automatically removed from the WeakMap. http://www.ecma-international.org/ecma-262/6.0/#sec-weakmap-objects
41. DRAFT STATE CONCEPTUAL MODEL - KEY CONCEPT WEAK MAP If an object that is being used as the key of a WeakMap key/value pair is only reachable by following a chain of references that start within that WeakMap, that key/value pair is inaccessible and is automatically removed from the WeakMap. http://www.ecma-international.org/ecma-262/6.0/#sec-weakmap-objects
42. If an object that is being used as the key of a WeakMap key/value pair is only reachable by following a chain of references that start within that WeakMap, that key/value pair is inaccessible and is automatically removed from the WeakMap. DRAFT STATE CONCEPTUAL MODEL - KEY CONCEPT WEAK MAP http://www.ecma-international.org/ecma-262/6.0/#sec-weakmap-objects
43. DRAFT STATE CONCEPTUAL MODEL - KEY CONCEPT WEAK MAP* A Post A Comment // Store the value on the key post._some_random_property_name = comment; // Access the value, given the key WeakMap.prototype.get = function(key) { return key._some_random_property_name; };
44. DRAFT STATE THE SOLUTION FOR EMBER APPS ▸ ember-state-services ▸ Built on top of WeakMap ▸ StateFactory - creates draft state objects ▸ stateFor - computed property that returns a particular state @stefanpenner @thoov
45. DRAFT STATE ENHANCING OUR APP ▸ They must “stick” with the post they’re commenting on ▸ If we delete a post, the draft must be deleted as well ▸ No leaks {{POST-FULL}} POST-INFO STATES MODELS
46. DRAFT STATE ENHANCING OUR APP ▸ They must “stick” with the post they’re commenting on ▸ If we delete a post, the draft must be deleted as well ▸ No leaks {{POST-FULL}} POST-INFO STATES MODELS
47. DRAFT STATE ENHANCING OUR APP ▸ They must “stick” with the post they’re commenting on ▸ If we delete a post, the draft must be deleted as well ▸ No leaks {{POST-FULL}} POST-INFO STATES MODELS
48. STATE FACTORY states/post-info.js
50. COMPONENT components/post-full.js
52. COMPONENT components/post-tile.js
56. 2-draft
57. DRAFT STATE MAKING DRAFTS EVEN BETTER ember-state-services/issues/64
58. 2.1-draft-confirm-unload
59. PERSISTED STATE
60. STORED IN A LONG-LIVING MEDIUM FOR A LONG TIME Core Concept - Persisted State PERSISTED STATE
61. PERSISTED STATE EXAMPLES ‣ Anything stored in/on a… ‣ Database/Disk ‣ Local storage ‣ Third party API HOW TO IDENTIFY ▸ Lives longer than a session ▸ Tracked over time ▸ Seen by many users
62. POST/SHOW PERSISTED STATE ENHANCING OUR BASIC APP ▸ POST to API for create ▸ Draft cleared if successful ▸ DELETE to API for delete ▸ Must work in high-latency {{ POST-FULL }} {{ POST-COMMENT }} {{ POST-COMMENT }}
63. POST/SHOW PERSISTED STATE ENHANCING OUR BASIC APP POST-FULL POST-COMMENT delete-comment POST-COMMENT COMMENT IS DELETED
64. POST/SHOW PERSISTED STATE ENHANCING OUR BASIC APP POST-FULL POST-COMMENT save-comment POST-COMMENT COMMENT IS SAVED
65. POST/SHOW PERSISTED STATE ENHANCING OUR BASIC APP POST-FULL POST-COMMENT save-comment POST-COMMENT COMMENT IS SAVED DRAFT IS CLEARED ⏱
67. Closure Action
75. 3-persisted-state
76. A COMMON MISTAKE IN “AFTER SAVE” LOGIC
77. DON’T DO THIS
78. DON’T DO THIS
79. DON’T DO THIS
81. PERSISTED STATE PERSISTED STATE - BEST PRACTICES ▸ Consider that things may change during async ▸ Build simple objects and then createRecord ▸ Consider in-flight records
82. PERSISTED STATE PERSISTED STATE - BEST PRACTICES ▸ Double clicking “delete” ▸ Double clicking “reply”
83. UI STATE
84. SHORT-LIVED, USEFUL ONLY “IN THE MOMENT”, AND RELEVANT ONLY TO THE UI Core Concept - UI State UI STATE
85. UI STATE EXAMPLES ‣ Accordion expansion ‣ Scroll position ‣ Text selection & Focus ‣ Matthew Beale is typing…
86. UI STATE HOW TO IDENTIFY ▸ Short lived, only meaningful in the moment ▸ Easiest to re-create ▸ Potentially harmful if persisted/restored
90. KEEP COMPONENT LIFE-CYCLE IN MIND
95. 4-ui-state
96. UI STATE ADDRESSABLE STATE PERSISTED STATE DRAFT STATE 4 FLAVORS OF STATE
97. SYSTEM IMPACT SESSION TRANSITION UI STATE ADDRESSABLE STATE PERSISTED STATE DRAFT STATE
98. SYSTEM IMPACT SESSION TRANSITION UI STATE ADDRESSABLE STATE PERSISTED STATE DRAFT STATE
99. WHO CARES? UI STATE ADDRESSABLE STATE PERSISTED STATE DRAFT STATE USER WORLD
100. UI STATE ADDRESSABLE STATE PERSISTED STATE DRAFT STATE USER EFFORT CLICK/SCROLL SOME KEYSTROKES ESSAY
101. UI STATE ADDRESSABLE STATE PERSISTED STATE DRAFT STATE LIFETIME TASK SESSION > SESSION
102. GOOD STATE MANAGEMENT MATTERS
103. IDENTIFY IT
104. TAME IT
105. DELIGHT YOUR USERS
106. THANKS! I’ve taught thousands of developers how to win with Want me to whip your team into shape? I’d love to talk to you! michael.l.north@gmail.com @MichaelLNorth bit.ly/ef16-state Slides