Building offline first apps

GDG Blrdroid DevFest 2017

Transcript

1. Building Offline First Apps Saket Narayan @saketme uncommon.is
2. Never make the user wait, • when consuming content • when producing content
3. Parts 1. Architecture 2. User Experience 3. Libraries
4. Part 1, Architecture
5. Simplifying state management is the key to offline support
6. But state management is difficult
7. Source: Jake Wharton
8. Source: Jake Wharton
9. Solution, Persistence as the Single Source of Truth
10. Some graphs to prove my point
11. Time Productivity
12. Time Productivity
13. Time Productivity
17. Usecases
18. Usecase 1, Login
19. LoginListener listener = (authToken) -> { database.saveAuthToken(authToken); startActivity(ContentFeedActivity.startIntent(this)); }; api.login(username, password, listener); The usual way
20. LoginListener listener = (authToken) -> { database.saveAuthToken(authToken); startActivity(ContentFeedActivity.startIntent(this)); }; api.login(username, password, listener); The usual way
21. LoginListener listener = (authToken) -> { database.saveAuthToken(authToken); startActivity(ContentFeedActivity.startIntent(this)); }; api.login(username, password, listener); The usual way
22. LoginListener listener = (authToken) -> { database.saveAuthToken(authToken); startActivity(ContentFeedActivity.startIntent(this)); }; api.login(username, password, listener); The usual way
23. LoginListener listener = (authToken) -> { database.saveAuthToken(authToken); startActivity(ContentFeedActivity.startIntent(this)); }; api.login(username, password, listener); The usual way
24. Call call = api.login(…); void onDestroy() { call.cancel(); } What if the Activity gets destroyed?
25. Memory leaks Lifecycle issues when using Fragments No support for orientation changes Response may come while Activity is minimized Problems
26. void onSubmitClick() { LoginListener listener = (authToken) -> { database.saveAuthToken(authToken); startActivity(ContentFeedActivity.startIntent(this)); }; authRepository.login(username, password, listener); } The PSST way
27. void onSubmitClick() { authRepository.login(username, password); } The PSST way
28. void onSubmitClick() { authRepository.login(username, password); } @Singleton public class AuthRepository { api.login(username, password) .doOnSuccess(authToken -> database.saveAuthToken(authToken)) .subscribe(); } The PSST way
29. void onSubmitClick() { authRepository.login(username, password); } @Singleton public class AuthRepository { api.login(username, password) .doOnSuccess(authToken -> database.saveAuthToken(authToken)) .subscribe(); } The PSST way
30. void onStart() { authRepository.streamUserSession() .takeUntil(lifecycle.onStop()) .subscribe(userSession -> { if (userSession.isLoggedIn()) { // Start next Activity. } else { // Show login form. } }); } The PSST way
31. void onStart() { authRepository.streamUserSession() .takeUntil(lifecycle.onStop()) .subscribe(userSession -> { if (userSession.isLoggedIn()) { // Start next Activity. } else { // Show login form. } }); } The PSST way Observable<UserSession>
32. void onStart() { authRepository.streamUserSession() .takeUntil(lifecycle.onStop()) .subscribe(userSession -> { if (userSession.isLoggedIn()) { // Start next Activity. } else { // Show login form. } }); } The PSST way
33. void onStart() { authRepository.streamUserSession() .takeUntil(lifecycle.onStop()) .subscribe(userSession -> { if (userSession.isLoggedIn()) { // Start next Activity. } else { // Show login form. } }); } The PSST way
34. Flow of data is in a single place and not scattered. Every problem can be traced to an event, action, result, or model. Advantages
35. Usecase 2, Trello
36. void onAddNewCard(String title) {
 NetworkListener listener = () -> {
 hideProgressDialog();
 
 database.saveCard(TrelloCard.create(title));
 reloadBoardFromDatabase();
 };
 
 showProgressDialog();
 api.saveNewCard(title, listener);
 } The usual way
37. void onAddNewCard(String title) {
 NetworkListener listener = () -> {
 hideProgressDialog();
 
 database.saveCard(TrelloCard.create(title));
 reloadBoardFromDatabase();
 };
 
 showProgressDialog();
 api.saveNewCard(title, listener);
 } The usual way
38. void onAddNewCard(String title) {
 NetworkListener listener = () -> {
 hideProgressDialog();
 
 database.saveCard(TrelloCard.create(title));
 reloadBoardFromDatabase();
 };
 
 showProgressDialog();
 api.saveNewCard(title, listener);
 } The usual way
39. void onAddNewCard(String title) {
 NetworkListener listener = () -> {
 hideProgressDialog();
 
 database.saveCard(TrelloCard.create(title));
 reloadBoardFromDatabase();
 };
 
 showProgressDialog();
 api.saveNewCard(title, listener);
 } The usual way
40. void onAddNewCard(String title) {
 NetworkListener listener = () -> {
 hideProgressDialog();
 
 database.saveCard(TrelloCard.create(title));
 reloadBoardFromDatabase();
 };
 
 showProgressDialog();
 api.saveNewCard(title, listener);
 } The usual way
41. The user is being blocked by a non-dismissible progress indicator
 Chances of losing user input on process death/phone restart. Problems
42. void onAddNewCard(String title) {
 NetworkListener listener = () -> {
 hideProgressDialog();
 
 database.saveCard(TrelloCard.create(title));
 reloadBoardFromDatabase();
 };
 
 showProgressDialog();
 api.saveNewCard(title, listener);
 } The usual way
43. void onAddNewCard(String title) {
 NetworkListener listener = () -> {
 hideProgressDialog();
 
 database.saveCard(TrelloCard.create(title));
 reloadBoardFromDatabase();
 };
 
 showProgressDialog();
 api.saveNewCard(title, listener);
 } The usual way
44. void onAddNewCard(String title) {
 repository.createNewCard(title);
 } PSST
45. Repository.java void createNewCard(String name) {
 database.saveCard(TrelloCard.create(name))
 .andThen(scheduleSyncWithServer())
 .subscribe();
 } PSST
46. Repository.java void createNewCard(String name) {
 database.saveCard(TrelloCard.create(name))
 .andThen(scheduleSyncWithServer())
 .subscribe();
 } PSST
47. Repository.java void createNewCard(String name) {
 database.saveCard(TrelloCard.create(name))
 .andThen(scheduleSyncWithServer())
 .subscribe();
 } PSST
48. Usecase 3, Content Details
49. void onCreate() { UserContent contentToShow = getIntent().getParcelable(KEY_CONTENT); votesCountView.setText(contentToShow.votes() + " points”); } The usual way
50. void onCreate() { UserContent contentToShow = getIntent().getParcelable(KEY_CONTENT); votesCountView.setText(contentToShow.votes() + " points”); } The usual way
51. void onCreate() { UserContent contentToShow = getIntent().getParcelable(KEY_CONTENT); votesCountView.setText(contentToShow.votes() + " points”); } The usual way
52. void onUpvoteClick() { int newVoteCount = contentToShow.votes() + 1; NetworkListener listener = () -> { hideProgressDialog(); contentToShow = contentToShow.withVotes(newVoteCount); votesCountView.setText(newVoteCount + " points"); database.updateUserContent(contentToShow); }; showProgressDialog(); api.voteOnUserContent(contentToShow.id(), newVoteCount, listener); } The usual way
53. void onUpvoteClick() { int newVoteCount = contentToShow.votes() + 1; NetworkListener listener = () -> { hideProgressDialog(); contentToShow = contentToShow.withVotes(newVoteCount); votesCountView.setText(newVoteCount + " points"); database.updateUserContent(contentToShow); }; showProgressDialog(); api.voteOnUserContent(contentToShow.id(), newVoteCount, listener); } The usual way
54. void onUpvoteClick() { int newVoteCount = contentToShow.votes() + 1; NetworkListener listener = () -> { hideProgressDialog(); contentToShow = contentToShow.withVotes(newVoteCount); votesCountView.setText(newVoteCount + " points"); database.updateUserContent(contentToShow); }; showProgressDialog(); api.voteOnUserContent(contentToShow.id(), newVoteCount, listener); } The usual way
55. void onUpvoteClick() { int newVoteCount = contentToShow.votes() + 1; NetworkListener listener = () -> { hideProgressDialog(); contentToShow = contentToShow.withVotes(newVoteCount); votesCountView.setText(newVoteCount + " points"); database.updateUserContent(contentToShow); }; showProgressDialog(); api.voteOnUserContent(contentToShow.id(), newVoteCount, listener); } The usual way
56. void onUpvoteClick() { int newVoteCount = contentToShow.votes() + 1; NetworkListener listener = () -> { hideProgressDialog(); contentToShow = contentToShow.withVotes(newVoteCount); votesCountView.setText(newVoteCount + " points"); database.updateUserContent(contentToShow); }; showProgressDialog(); api.voteOnUserContent(contentToShow.id(), newVoteCount, listener); } The usual way
57. void onUpvoteClick() { int newVoteCount = contentToShow.votes() + 1; NetworkListener listener = () -> { hideProgressDialog(); contentToShow = contentToShow.withVotes(newVoteCount); votesCountView.setText(newVoteCount + " points"); database.updateUserContent(contentToShow); }; showProgressDialog(); api.voteOnUserContent(contentToShow.id(), newVoteCount, listener); } The usual way
58. void onUpvoteClick() { int newVoteCount = contentToShow.votes() + 1; NetworkListener listener = () -> { hideProgressDialog(); contentToShow = contentToShow.withVotes(newVoteCount); votesCountView.setText(newVoteCount + " points"); database.updateUserContent(contentToShow); }; showProgressDialog(); api.voteOnUserContent(contentToShow.id(), newVoteCount, listener); } The usual way
59. Problem: UI is being driven from multiple sources void onCreate() { ... votesCountView.setText(contentToShow.votes() + " points”); } void onUpvoteClick() { ... votesCountView.setText(newVoteCount + " points"); ... }
60. String id = getIntent().getStringExtra(KEY_CONTENT_ID); contentRepository.streamUserContent(id) .takeUntil(lifecycle.onDestroy()) .subscribe(userContent -> { loadImage(userContent.imageUrl()); votesCountView.setText( userContent.votes() + " points” ); upvoteButton.setOnClickListener(o -> contentRepository.upvote(userContent) ); }); The PSST way
61. String id = getIntent().getStringExtra(KEY_CONTENT_ID); contentRepository.streamUserContent(id) .takeUntil(lifecycle.onDestroy()) .subscribe(userContent -> { loadImage(userContent.imageUrl()); votesCountView.setText( userContent.votes() + " points” ); upvoteButton.setOnClickListener(o -> contentRepository.upvote(userContent) ); }); The PSST way
62. String id = getIntent().getStringExtra(KEY_CONTENT_ID); contentRepository.streamUserContent(id) .takeUntil(lifecycle.onDestroy()) .subscribe(userContent -> { loadImage(userContent.imageUrl()); votesCountView.setText( userContent.votes() + " points” ); upvoteButton.setOnClickListener(o -> contentRepository.upvote(userContent) ); }); The PSST way
63. String id = getIntent().getStringExtra(KEY_CONTENT_ID); contentRepository.streamUserContent(id) .takeUntil(lifecycle.onDestroy()) .subscribe(userContent -> { loadImage(userContent.imageUrl()); votesCountView.setText( userContent.votes() + " points” ); upvoteButton.setOnClickListener(o -> contentRepository.upvote(userContent) ); }); The PSST way
64. String id = getIntent().getStringExtra(KEY_CONTENT_ID); contentRepository.streamUserContent(id) .takeUntil(lifecycle.onDestroy()) .subscribe(userContent -> { loadImage(userContent.imageUrl()); votesCountView.setText( userContent.votes() + " points” ); upvoteButton.setOnClickListener(o -> contentRepository.upvote(userContent) ); }); The PSST way
65. Part 2, User Experience
66. If a network call does not involve any input validation, assume that it’ll succeed. Never make the user wait
67. ContentRepository.java void onUpvoteClick(UserContent content) { // Assume success. database.upvote(content.id(), content.votes() + 1); performApiCallInBackground(); } Never make the user wait
68. ContentRepository.java void onUpvoteClick(UserContent content) { // Assume success. database.upvote(content.id(), content.votes() + 1); performApiCallInBackground(); } Never make the user wait
69. If a network call’s progress has to be communicated, consider displaying the progress state inline in UI.
 
 Totally avoid covering the screen with a progress bar. Never make the user wait
70. void postComment(UserContent parent, String comment) { api.postComment(parent.id(), comment) .map(response -> ProgressState.POSTED) .onErrorReturnItem(ProgressState.FAILED) .startWith(ProgressState.IN_FLIGHT) .subscribe(progressState -> { database.createOrUpdateComment( comment, progressState ); }); } Never make the user wait
71. void postComment(UserContent parent, String comment) { api.postComment(parent.id(), comment) .map(response -> ProgressState.POSTED) .onErrorReturnItem(ProgressState.FAILED) .startWith(ProgressState.IN_FLIGHT) .subscribe(progressState -> { database.createOrUpdateComment( comment, progressState ); }); } Never make the user wait
72. void postComment(UserContent parent, String comment) { api.postComment(parent.id(), comment) .map(response -> ProgressState.POSTED) .onErrorReturnItem(ProgressState.FAILED) .startWith(ProgressState.IN_FLIGHT) .subscribe(progressState -> { database.createOrUpdateComment( comment, progressState ); }); } Never make the user wait
73. void postComment(UserContent parent, String comment) { api.postComment(parent.id(), comment) .map(response -> ProgressState.POSTED) .onErrorReturnItem(ProgressState.FAILED) .startWith(ProgressState.IN_FLIGHT) .subscribe(progressState -> { database.createOrUpdateComment( comment, progressState ); }); } Never make the user wait
74. void postComment(UserContent parent, String comment) { api.postComment(parent.id(), comment) .map(response -> ProgressState.POSTED) .onErrorReturnItem(ProgressState.FAILED) .startWith(ProgressState.IN_FLIGHT) .subscribe(progressState -> { database.createOrUpdateComment( comment, progressState ); }); } Never make the user wait
75. contentRepository.postCommentAndStreamProgress(…) .subscribe(progressEvent -> { switch (progressEvent.state()) { case IN_FLIGHT: statusView.setText("Posting…"); break; case POSTED: statusView.setText("Posted at " + progressEvent.timestamp()); break; case FAILED: statusView.setText("Failed. Tap to retry."); break; } }); Never make the user wait
76. Instant gratification Increased perceived speed of the app Advantages
77. Notifications can also be used for communicating progress.
 Never make the user wait
78. Notifications can also be used for communicating progress.
 Never make the user wait
79. Notifications can also be used for communicating progress.
 Never make the user wait
80. Part 3, Libraries
81. Store github.com/NYTimes/Store
82. android-job github.com/evernote/android-job
83. onComplete()