Indiana Jones and the Offline Apps - Droidcon Edition

Indiana Jones and the Offline Apps

Archaeology professor Indiana Jones, has been betrayed in its latest adventure.

Looking for the Grail he’s been led to believe that he lives on a connected world. However, when he is about to face the trials, he bitterly founds that he is unable because the data he needs is not available in the middle of the desert.

But then he hears of mythical legend of Offline First, and ancient magic that allowed developers to build apps impervious to connectivity errors.

Follow Dr. Jones in the thrilling quest to uncover the secrets and techniques that will allow him to build network independent apps!

Transcript

1. INDIANA JONES AND THE OFFLINE APPS
6. “ Offline is not a set of techniques to make your app faster. It is a philosophy that drives how your product is experienced. 6
7. 1. THE REASONS
8. Source: Ericsson Reports 8
9. People who deserve to use your apps 9
10. AIR IS A LIMITED MEDIUM 10
11. THE INTERNET 11
13. 2. PIECES OF THE PUZZLE
14. OPTIMISTIC UX 14
15. NAIVE APPROACH 15 Place your screenshot here Place your screenshot here Place your screenshot here
16. OPTIMISTIC APPROACH 16 Place your screenshot here Place your screenshot here Place your screenshot here
17. OPTIMISTING* BETTER Place your screenshot here 17 *I know the term “optimist” does not exist
18. SALIENCY 18
19. HIGH SALIENCY Place your screenshot here 19
20. REDUCED SALIENCY Place your screenshot here 20
21. VERY LOW SALIENCY Place your screenshot here 21
22. GRACEFUL DEGRADATION 22
23. Place your screenshot here 23
24. PREFETCHING 24
25. Place your screenshot here 25 Place your screenshot here API ZERO CASE FEED
26. A GREAT OFFLINE EXPERIENCE RECIPE ➢ Highly optimistical ➢ Low to no saliency ➢ Gracefully aware of errors 26
27. 3. A LITTLE MORE TECHNICAL INSIGHT
28. LOCAL SERVICE
29. REMOTE SERVICE
30. SERVER CLUSTERING
31. PLATFORM SYNCING
32. COLLABORATIVE
33. OFFLINE ALL THE THINGS!
35. SIT AND THINK ➢ Understand your platform ➢ Understand your feature ➢ Understand your limitations 35
36. 36 CACHE
37. 37 CACHE DEV CLEAN ARCHITECTURE UPDATES FROM THE REAL WORLD USER WAITING TO PRESS “FOLLOW” BUTTON A THOUSAND TIMES A SECOND
38. THE GIT WAY 38 PULL MERGE PUSH
39. TRACKING MODIFICATIONS VIA METADATA 39 { "id": "sefford", "rev": "1a2b3c", "draft": "true", "deleted": "false", "data": "..." } ➢ Vector Clocks ➢ Lamport timestamps
40. LOGIC DIFFERENTLY 40 class ChangeAvatarUseCase() { fun execute(userId: String, newAvatar: String, callback : () -> Unit) { api.changeUserId(userId, newAvatar) cache.saveUser(cache.getUser(userId) .copy(avatar = newAvatar)) callback(newAvatar) } } // On View fun onUpdateAvatarClicked() { changeAvatar.execute(currentUserId, newAvatar)) { avatar -> updateUI(avatar) } }
41. LOGIC DIFFERENTLY 41 // On View fun onUpdateAvatarClicked() { changeAvatar.execute(currentUserId, newAvatar)) { avatar -> updateUI(avatar) } } class CommitAvatarChange() { fun execute(userId: String, newAvatar: String) { cache.saveUser(cache.getUser(userId) .copy(avatar = newAvatar)) } } class PushAvatarChange() { fun execute(userId: String, newAvatar: String) { api.changeUserId(userId, newAvatar) } }
42. LOGIC DIFFERENTLY 42 // On View fun onUpdateAvatarClicked() { updateUI(avatar) changeAvatar.execute(currentUserId, newAvatar)) } class OfflineAvatarChange() { fun execute(userId: String, newAvatar: String) { commitAvatarChange.execute(userId, newAvatar) // Executes a Job when Network is available workerManager.enqueueAvatarChange(userId, newAvatar) } } class ClassicAvatarChange() { fun execute(userId: String, newAvatar: String) { commitAvatarChange.execute(userId, newAvatar) pushAvatarChange.execute(userId, newAvatar) callback(newAvatar) } }
43. HANDLING ERRORS? 43 Error Solution SocketTimeout, IOException, 503, 401... Retry/Defer 404 Ignore* Other 4XX errors Fix before sending
44. EFFICIENT PLACEHOLDER PRODUCTION 44 <!-- layouts.xml file --> <resources> <!-- Random Grid Item --> <item name="item_grid_placeholder" type="layout">@layout/item_grid_base</item> <item name="item_grid_renderable" type="layout">@layout/item_grid_base</item> </resources> item_grid_base.xml User #1984 Likes Droidcon, Madrid & Cocido
45. SYNCING BETWEEN DEVICES 45
46. “ Conflicts are not an error condition, the are the result of your infrastructure allowing the same data set to be modified across disconnected systems. The introduction of such conflicts in such a topology is the expected behaviour and their programmatic resolution is a core piece of the application logic. 46 https://developer.ibm.com/dwblog/2015/cloudant-document-conflicts-two/
47. OFFLINE TECHNOLOGIES 47 Web App Polymer App Toolbox Ionic Hoodie WorkManager SyncAdapters CouchDB Realm Firebase
49. EPILOGUE
50. FINAL TIPS ➢ Offline can be implemented à la carte ➢ Introspection over the playing field is critical ➢ Strive to build apps that work like magic! 50
51. CREDITS AND RESOURCES Special thanks to all the people who made and released these awesome resources for free: ➢ Offline first resource website ➢ Miguel Quiñones awesome presentation about offline ➢ Nice list of resources about offline topics ➢ What’s graceful degradation? ➢ Cesar Valiente’s Wunderlist Sync Architecture presentation ➢ Presentation template by SlidesCarnival ➢ Maps in slides from David Rumsey Map Collection 51
53. 53 THANKS! Any questions for me? You can find me at @sefford & sefford@gmail.com