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).

1. MIKE NORTH @MICHAELLNORTH
bit.ly/ef16-state

2. WHOIS MIKE-NORTHI’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’TDOTHIS

78. DON’TDOTHIS

79. DON’TDOTHIS

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
STATEDRAFT
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-stateSlides