Saket Narayan - Persistence as the single source of truth

Transcript

1. Persistence as the single source of truth uncommon.is Saket Narayan
2. Persistence as the single source of truth uncommon.is Saket Narayan
4. Offline first apps are the best kind of apps
5. The best kind of apps • never make the user wait • avoid blocking progress indicators • forgive bad data connectivity
6. Fyi, offline first != apps designed for cities with bad connectivity
7. Fyi, offline first != apps designed for cities with bad connectivity
8. Bad connectivity is everywhere Source: Unsplash
9. Simplifying state management is the key to designing offline first apps
10. Simplifying state management is the key to designing offline first apps
11. But state management is difficult
13. Source: Jake Wharton
14. Source: Jake Wharton
15. @saketme Persistence as the single source of truth
16. @saketme Or, PSST
17. Some graphs to prove my point
18. Time Productivity
19. Time Productivity
20. Time Productivity
24. @saketme Usecases T minus 6
25. @saketme Usecase: Login screen T minus 5
26. The usual way fun onSubmit() { api.login(username, password) .subscribe { authToken -> database.save(authToken) startActivity(HomeScreen.intent()) } }
27. The usual way fun onSubmit() { api.login(username, password) .subscribe { authToken -> database.save(authToken) startActivity(HomeScreen.intent()) } }
28. The usual way fun onSubmit() { api.login(username, password) .subscribe { authToken -> database.save(authToken) startActivity(HomeScreen.intent()) } }
29. The usual way fun onSubmit() { api.login(username, password) .subscribe { authToken -> database.save(authToken) startActivity(HomeScreen.intent()) } }
30. What if the Activity gets destroyed? fun onSubmit() { api.login(username, password) .subscribe { authToken -> database.save(authToken) startActivity(HomeScreen.intent()) } }
31. What if the Activity gets destroyed? fun onSubmit() { api.login(username, password) .takeUntil(lifecycle.onDestroy) .subscribe { authToken -> database.save(authToken) startActivity(HomeScreen.intent()) } }
32. Problems • No support for orientation changes
33. AndroidManifest.xml <activity android:name=".LoginScreen" />
34. AndroidManifest.xml <activity android:name=".LoginScreen" android:screenOrientation="portrait" />
35. Problems • No support for orientation changes • Response may be received while minimized
36. The PSST way fun onSubmit() { api.login(username, password) .subscribe { authToken -> database.save(authToken) startActivity(HomeScreen.intent()) } }
37. The PSST way fun onSubmit() { api.login(username, password) .subscribe { authToken -> database.save(authToken) startActivity(HomeScreen.intent()) } }
38. The PSST way fun onSubmit() { authRepo.login(username, password) }
39. The PSST way class AuthRepo { fun login(name: String, pass: String) { api.login(name, pass) .subscribe { authToken -> database.save(authToken) } } }
40. The PSST way class AuthRepo { fun login(name: String, pass: String) { api.login(name, pass) .subscribe { authToken -> database.save(authToken) } } }
41. The PSST way fun onSubmit() { authRepo.login(username, password) } fun onStart() { authRepo.userSession() .takeUntil(lifecycle.onStop) .subscribe { -> when (it) -> { is Absent -> showLoginForm() is InFlight -> showProgress() is Present -> openNextActivity()
42. fun onSubmit() { authRepo.login(username, password) } fun onStart() { authRepo.userSession() .takeUntil(lifecycle.onStop) .subscribe { -> when (it) -> { is Absent -> showLoginForm() is InFlight -> showProgress() is Present -> openNextActivity() } } }
43. fun onSubmit() { authRepo.login(username, password) } fun onStart() { authRepo.userSession() .takeUntil(lifecycle.onStop) .subscribe { -> when (it) -> { is Absent -> showLoginForm() is InFlight -> showProgress() is Present -> openNextActivity() } } } Observable<UserSession>
44. fun onSubmit() { authRepo.login(username, password) } fun onStart() { authRepo.userSession() .takeUntil(lifecycle.onStop) .subscribe { -> when (it) -> { is Absent -> showLoginForm() is InFlight -> showProgress() is Present -> openNextActivity() } } }
45. fun onSubmit() { authRepo.login(username, password) } fun onStart() { authRepo.userSession() .takeUntil(lifecycle.onStop) .subscribe { -> when (it) -> { is Absent -> showLoginForm() is InFlight -> showProgress() is Present -> openNextActivity() } } }
46. fun onSubmit() { authRepo.login(username, password) } fun onStart() { authRepo.userSession() .takeUntil(lifecycle.onStop) .subscribe { -> when (it) -> { is Absent -> showLoginForm() is InFlight -> showProgress() is Present -> openNextActivity() } } }
47. fun onSubmit() { authRepo.login(username, password) } fun onStart() { authRepo.userSession() .takeUntil(lifecycle.onStop) .subscribe { -> when (it) -> { is Absent -> showLoginForm() is InFlight -> showProgress() is Present -> openNextActivity() } } }
48. @saketme Usecase: Content details screen T minus 4
50. The usual way val onClick: { submission -> startActivity( CommentsScreen.intent(this, submission) ) }
51. The usual way class CommentsScreen : Activity { fun onCreate() { val submission = intent.getParcelable("submission") nameView.text = submission.name votesView.text = "${submission.likes} votes" } }
52. The usual way class CommentsScreen : Activity { fun onCreate() { val submission = intent.getParcelable("submission") nameView.text = submission.name votesView.text = "${submission.likes} votes” } }
53. The usual way class CommentsScreen : Activity { fun onCreate() { val submission = intent.getParcelable("submission") nameView.text = submission.name votesView.text = "${submission.likes} votes" } }
54. The usual way class CommentsScreen : Activity { fun onVoteClick() { showProgressDialog() api.upvote(submission.id) .subscribe { newVoteCount -> hideProgressDialog() votesView.text = "$newVoteCount votes” database.save(newVoteCount) } } }
55. The usual way class CommentsScreen : Activity { fun onVoteClick() { showProgressDialog() api.upvote(submission.id) .subscribe { newVoteCount -> hideProgressDialog() votesView.text = "$newVoteCount votes” database.save(newVoteCount) } } }
56. The usual way class CommentsScreen : Activity { fun onVoteClick() { showProgressDialog() api.upvote(submission.id) .subscribe { newVoteCount -> hideProgressDialog() votesView.text = "$newVoteCount votes” database.save(newVoteCount) } } }
57. The usual way class CommentsScreen : Activity { fun onVoteClick() { showProgressDialog() api.upvote(submission.id) .subscribe { newVoteCount -> hideProgressDialog() votesView.text = "$newVoteCount votes” database.save(newVoteCount) } } }
58. The usual way class CommentsScreen : Activity { fun onVoteClick() { showProgressDialog() api.upvote(submission.id) .subscribe { newVoteCount -> hideProgressDialog() votesView.text = "$newVoteCount votes” database.save(newVoteCount) } } }
59. The usual way class CommentsScreen : Activity { fun onVoteClick() { showProgressDialog() api.upvote(submission.id) .subscribe { newVoteCount -> hideProgressDialog() votesView.text = "$newVoteCount votes” database.save(newVoteCount) } } }
60. Problems • UI is being updated in an ad-hoc manner
61. Problems • UI is being updated in an ad-hoc manner fun onCreate() { votesView.text = “${submission.votes} votes" } fun onVoteClick() { votesView.text = "$newVoteCount votes" }
62. Problems • UI is being updated in an ad-hoc manner • Needs synchronisation • Complexity compounds over time
63. Problems • UI is being updated in an ad-hoc manner • Saving state manually is a pain
64. Saving state? fun onSaveState(outState: Bundle) { outState.putParcelable("submission", submission) } fun onCreate(savedState: Bundle) { val submission = when { savedState == null —> intent.getParcelableExtra("submission") else —> savedState.getParcelable(“submission") } }
65. Saving state? fun onSaveState(outState: Bundle) { outState.putParcelable("submission", submission) } fun onCreate(savedState: Bundle) { val submission = when { savedState == null —> intent.getParcelableExtra("submission") else —> savedState.getParcelable(“submission") } }
66. Saving state? fun onSaveState(outState: Bundle) { outState.putParcelable("submission", submission) } fun onCreate(savedState: Bundle) { val submission = when { savedState == null —> intent.getParcelableExtra("submission") else —> savedState.getParcelable(“submission") } }
67. Problems • UI is being updated in an ad-hoc manner • Saving state manually is a pain
68. The PSST way val onClick: { movie -> startActivity( CommentsScreen.intent(this, submission) ) }
69. The PSST way val onClick: { movie -> startActivity( CommentsScreen.intent(this, submission.id) ) }
70. The PSST way val onClick: { movie -> startActivity( CommentsScreen.intent(this, submission.id) ) }
71. The PSST way fun onCreate() { val submission = intent.getParcelable(“submission”) nameView.text = submission.name votesView.text = "${submission.likes} votes" }
72. The PSST way fun onCreate() { val submission = intent.getParcelable(“submission”) nameView.text = submission.name votesView.text = "${submission.likes} votes" }
73. The PSST way fun onCreate() { val submissionId = intent.getString(“submission_id”) }
74. The PSST way fun onCreate() { val submissionId = intent.getString(“submission_id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { submission -> votesView.text = “${submission.votes} votes” } }
75. The PSST way fun onCreate() { val submissionId = intent.getString(“submission_id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { submission -> votesView.text = “${submission.votes} votes” } } Observable<Submission>
76. The PSST way fun onCreate() { val submissionId = intent.getString(“submission_id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { submission -> votesView.text = “${submission.votes} votes” } }
77. The PSST way fun onCreate() { val submissionId = intent.getString(“submission_id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { submission -> votesView.text = “${submission.votes} votes” } } fun onVoteClick() { showProgressDialog()
78. fun onVoteClick() { showProgressDialog() api.vote(submission.id) .subscribe { newVoteCount -> hideProgressDialog() votesView.text = "$newVoteCount votes” } }
79. fun onVoteClick() { showProgressDialog() api.vote(submission.id) .subscribe { newVoteCount -> hideProgressDialog() votesView.text = "$newVoteCount votes” } }
80. fun onVoteClick() { submissionRepo.vote(submission.id) }
81. fun onCreate() { val submissionId = intent.getString(“submission_id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { submission -> votesView.text = “${submission.votes} votes” } } fun onVoteClick() { submissionRepo.vote(submission.id) }
82. fun onCreate() { val submissionId = intent.getString(“submission_id") submissionRepo.comments(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { submission -> votesView.text = “${submission.votes} votes” } } fun onVoteClick() { submissionRepo.vote(submission.id) }
83. fun onCreate() { val submissionId = intent.getString(“submission_id") submissionRepo.comments(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { submission -> votesView.text = “${submission.votes} votes” } } fun onVoteClick() { submissionRepo.vote(submission.id) }
84. class SubmissionRepo { fun submission(id: String): Observable<Submission> { return database.comments(id) } fun vote(id: String) { api.vote(id) .subscribe { updatedSubmission -> database.save(updatedSubmission) } } }
85. class SubmissionRepo { fun submission(id: String): Observable<Submission> { return database.comments(id) } fun vote(id: String) { api.vote(id) .subscribe { updatedSubmission -> database.save(updatedSubmission) } } }
86. class SubmissionRepo { fun submission(id: String): Observable<Submission> { return database.comments(id) } fun vote(id: String) { api.vote(id) .subscribe { updatedSubmission -> database.save(updatedSubmission) } } }
87. Obvious wins • UI is driven from a single source of truth • Passing serialized data is not required • UI automatically receives updates
88. Obvious wins • UI is driven from a single source of truth • Passing serialized data is not required • UI automatically receives updates • Even when changes happen outside the screen. E.g., from a notification
89. Improving the UX
90. class SubmissionRepo { fun vote(id: String) { api.vote(id) .subscribe { updatedSubmission -> database.save(updatedSubmission) } } }
91. class SubmissionRepo { fun vote(id: String) { // Assume that the network call will succeed. api.vote(id) .subscribe { updatedSubmission -> database.save(updatedSubmission) } } }
92. class SubmissionRepo { fun vote(id: String) { // Assume that the network call will succeed. val update = database.submission(id) .take(1) .map { it.incrementVotesBy(1) } .andThen { save(it) } val call = api.vote(id) .andThen { save(it) } update .andThen(call) .subscribe() } }
93. class SubmissionRepo { fun vote(id: String) { // Assume that the network call will succeed. val update = database.submission(id) .take(1) .map { it.incrementVotesBy(1) } .andThen { save(it) } val call = api.vote(id) .andThen { save(it) } update .andThen(call) .subscribe() } }
94. class SubmissionRepo { fun vote(id: String) { // Assume that the network call will succeed. val update = database.submission(id) .take(1) .map { it.incrementVotesBy(1) } .andThen { save(it) } val call = api.vote(id) .andThen { save(it) } update .andThen(call) .subscribe() } }
95. Obvious wins • UI is driven from a single source of truth • Passing serialized data is not required • UI automatically receives updates
96. Obvious wins • UI is driven from a single source of truth • Passing serialized data is not required • UI automatically receives updates • Ui receives immediate feedback
97. If a network call does not involve any extra server validation, assume that it’ll succeed.
98. @saketme Usecase: Comments screen T minus 3
99. Relay Sync Flamingo
100. Relay Sync Flamingo
102. Relay Sync Flamingo
104. Relay Sync Flamingo
106. A better experience, is to remove the notion of network from the user’s perspective
108. class CommentsScreen { fun onCreate() { val submissionId = intent.getString("id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { populateUi(it) } } }
109. class CommentsScreen { fun onCreate() { val submissionId = intent.getString("id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { populateUi(it) } } }
110. class CommentsScreen { fun onCreate() { val submissionId = intent.getString("id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { populateUi(it) } } }
111. class CommentsScreen { fun onCreate() { val submissionId = intent.getString("id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { populateUi(it) } } }
112. class CommentsScreen { fun onCreate() { val submissionId = intent.getString("id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { populateUi(it) } } fun onSendReplyClick(parent: Comment, body: String) { submissionRepo.reply(parent, body) } }
113. class CommentsScreen { fun onCreate() { val submissionId = intent.getString("id") submissionRepo.submission(submissionId) .takeUntil(lifecycle.onDestroy) .subscribe { populateUi(it) } } fun onSendReplyClick(parent: Comment, body: String) { submissionRepo.reply(parent, body) } }
114. class SubmissionRepo { fun reply(parent: Comment, body: String) { api.reply(parent, body) .map { SyncStatus.Synced() } .onError(SyncStatus.Failed()) .startWith(SyncStatus.InFlight()) .subscribe { status -> database.save(Comment(parent, body, status)) } } }
115. class SubmissionRepo { fun reply(parent: Comment, body: String) { api.reply(parent, body) .map { SyncStatus.Synced() } .onError(SyncStatus.Failed()) .startWith(SyncStatus.InFlight()) .subscribe { status -> database.save(Comment(parent, body, status)) } } }
116. class SubmissionRepo { fun reply(parent: Comment, body: String) { api.reply(parent, body) .map { SyncStatus.Synced() } .onError(SyncStatus.Failed()) .startWith(SyncStatus.InFlight()) .subscribe { status -> database.save(Comment(parent, body, status)) } } }
117. class SubmissionRepo { fun reply(parent: Comment, body: String) { api.reply(parent, body) .map { SyncStatus.Synced() } .onError(SyncStatus.Failed()) .startWith(SyncStatus.InFlight()) .subscribe { status -> database.save(Comment(parent, body, status)) } } }
118. class SubmissionRepo { fun reply(parent: Comment, body: String) { api.reply(parent, body) .map { SyncStatus.Synced() } .onError(SyncStatus.Failed()) .startWith(SyncStatus.InFlight()) .subscribe { status -> database.save(Comment(parent, body, status)) } } }
119. class CommentViewHolder { fun onBind(comment: Comment) { bylineView.text = when(comment.syncStatus) { is InFlight -> “Posting..." is Synced -> "Posted at ${comment.sentTime}" is Failed -> "Failed. Tap to retry" } } }
120. class CommentViewHolder { fun onBind(comment: Comment) { bylineView.text = when(comment.syncStatus) { is InFlight -> “Posting..." is Synced -> "Posted at ${comment.sentTime}" is Failed -> "Failed. Tap to retry" } } }
121. class CommentViewHolder { fun onBind(comment: Comment) { bylineView.text = when(comment.syncStatus) { is InFlight -> “Posting..." is Synced -> "Posted at ${comment.sentTime}" is Failed -> "Failed. Tap to retry" } } }
122. class CommentViewHolder { fun onBind(comment: Comment) { bylineView.text = when(comment.syncStatus) { is InFlight -> “Posting..." is Synced -> "Posted at ${comment.sentTime}" is Failed -> "Failed. Tap to retry" } } }
123. Re-sending failed comments class BootCompleteReceiver : Receiver() { fun onReceive() { submissionRepo.sendUnsyncedComments() } }
124. Re-sending failed comments class RedditApp : Application() { fun onCreate() { submissionRepo.sendUnsyncedComments() } }
125. Re-sending failed comments class ReplyWorker : Worker() { fun doWork() { submissionRepo.sendUnsyncedComments() } }
126. @saketme Common excuses for avoiding Persistence T minus 2
127. 1) SQLite is time consuming
128. 1) SQLite is time consuming • True, plain SQLite requires a lot of boilerplate
130. 1) SQLite is time consuming • True, plain SQLite requires a lot of boilerplate
131. 1) SQLite is time consuming • True, plain SQLite requires a lot of boilerplate • Use Room instead
132. Room is easy data class Comment(body: String, status: SyncStatus)
133. Room is easy @Entity data class Comment(body: String, status: SyncStatus)
134. Room is easy @Entity data class Comment(body: String, status: SyncStatus) @Dao interface CommentDao { @Query("SELECT * FROM comment") fun comments(): Flowable<List<Comment>> }
135. Room is easy @Entity data class Comment(body: String, status: SyncStatus) @Dao interface CommentDao { @Query("SELECT * FROM comment") fun comments(): Flowable<List<Comment>> }
136. 2) Reading from disk is slow
137. 2) Reading from disk is slow • No
138. 2) Reading from disk is slow • No • Activities take ~250ms to animate in
139. Persistence != SharedPreferences
140. @saketme PSST: Wrap up T minus 1
141. With PSST, State = representation of persisted data
142. With PSST, UI reacts to a single source of data changes
143. With PSST, Support for config changes and app deaths for free
144. With PSST, Offline first design out of the box
145. With PSST, Increased perceived speed of the app
146. @saketme Store github.com/NYTimes/Store T minus 0
147. @saketme onComplete() saket@uncommon.is