Offline Second

We live in a connected world, or so have we been led to believe.

A world that claims that network is ubiquitous, but no-connection situations are more common than we think, and if we want to provide the best UX for our products we have to take into consideration these situations.

Handling properly the offline state of your apps, you can make the experience be like magic.

We will learn of concepts and techniques you can use to provide such experience.

Transcript

1. OFFLINE SECOND Saúl Díaz @sefford
2. Miguel Ferrando Chicisimo iOS Sexyloper https://www.urbandictionary.com/define.php?term=Sexyloper _@nandodelauni_
3. WE LIVE IN A CONNECTED WORLD
4. BUT THIS GUY CANNOT USE YOUR APP
5. Place your screenshot here WE TAKE CONNECTIVITY FOR GRANTED
6. 1. WHY OFFLINE?
7. Source: Ericcsson Reports
8. THESE GUYS ALSO DESERVE TO USE YOUR APP
9. AIR IS A LIMITED MEDIUM
10. HALF YOUR USERS DON’T KNOW WHAT IS “INTERNET” So why boring them with the unnecessary details?
11. THE MOST IMPORTANT REASON
12. 2. WHAT IS OFFLINE?
13. “ Offline is not a set of techniques to make your app faster. It’s a philosophy that drives how your product is experienced
14. OPTIMISTIC UX
15. NAIVE APPROACH Place your screenshot here Place your screenshot here Place your screenshot here
16. OPTIMISTIC APPROACH Place your screenshot here Place your screenshot here Place your screenshot here
17. WE CAN OPTIMIST* BETTER! Place your screenshot here * I know the term “to optimist” does not exist
18. SALIENCY
19. Place your screenshot here SALIENCY High level
20. Place your screenshot here SALIENCY Reduced (could be better)
21. Place your screenshot here SALIENCY Amazing experience by using very low saliency
22. GRACEFUL DEGRADATION
23. Place your screenshot here
24. PREDICTIVE OFFLINE
25. API Zero-case generic feed
26. A GREAT OFFLINE EXPERIENCE ▸ Low-to-no saliency ▸ Highly optimistical ▸ Gracefully aware of network errors
27. “ Your product has to build a trust with the user that it will respect the latest state it was left on.
28. INTERMISSION! Any questions? You can find us at @nandodelauni & @sefford
29. 3. A MORE TECHINCAL INSIGHT
30. THINGS YOU NEED TO UNDERSTAND ▸ Your feature ▸ Your platform ▸ Your cache
31. UNDERSTAND YOUR PLATFORM Single user Single device Single user Multiple devices Multiple users Multiple devices
32. UNDERSTAND YOUR CACHE Availability Speed Capacity Memory Always Instant Very limited Disk Not guaranteed Medium Limited Network Not guaranteed May vary Infinite
33. UNDERSTAND YOUR CACHE MEM DISK NETWO RK MEM DISK NETWO RK MEM NETWO RK The ol’ reliable The backup in steroids Speed, no connection, no party
34. UNDERSTAND YOUR CACHE MEM DISK MEM The local repo #YOLO NETWO RK DISK MEM F**k the police! DISK Never gets old
35. LOGIC DIFFERENTLY Random Use Case
36. API Call Cache modification UI side effects Random use case LOGIC DIFFERENTLY
37. Random use case API Call Cache modification UI side effects LOGIC DIFFERENTLY
38. API Call Cache modification “Online-only” use case Cache modification API Call Deferred use case Background Job Random use case UI side effects LOGIC DIFFERENTLY
39. 4. OFFLINE IN PRACTICE
40. _José Tojeiro_ _Chicisimo Sexyloper®_ Voy a hacer una funcionalidad offline… ...pero que eran voluntarias, ¿eh?
41. Place your screenshot here THE STYLE SESSION A “Style Session” is a multi-step wizard between a Stylist and a User imitating a chat.
42. OFFLINE STEALTH Purchase a session A session can be started Cheating! Retry Attempt Validation Session Start
43. COMMIT, THEN PUSH! Create Draft Draft is Promoted Retry Attempt Promotion ID is updated Append N messages From draft to “real” stream
44. FRAMEWORKS TO OFFLINE ▸ SyncAdapters ▸ Jetpack’s Worker library ▸ Realm Cloud or similar
45. CROSS THE STREAMS!
46. Place your screenshot here Draft Datasource Sessions Datasource
47. CROSS THE STREAMS @Override public synchronized void post(Object event) { if (event instanceof AlbumResponse || event instanceof AlbumError) { albumResponse = event; } if (event instanceof LooksResponse || event instanceof LooksError) { looksResponse = event; } if (event instanceof SaveDraftsResponse || event instanceof SaveDraftsError) { draftsResponse = event; } if (looksResponse == null || draftsResponse == null || albumResponse == null) { return; } if (draftsResponse instanceof SaveDraftsResponse && looksResponse instanceof LooksResponse) { postable.post(new CombinedAlbumResponse(getAlbum(), ((SaveDraftsResponse) draftsResponse).drafts(), (LooksResponse) looksResponse)); clear(); } else if (draftsResponse instanceof SaveDraftsResponse && looksResponse instanceof BaseError && (((BaseError) looksResponse).isReasonNoConnection() || terminationError((BaseError) looksResponse))) { postable.post(new CombinedAlbumResponse(getAlbum(), ((SaveDraftsResponse) draftsResponse).drafts(), new LooksResponse( new ArrayList<Look>(), false))); clear(); } else if (draftsResponse instanceof BaseError) { postable.post(looksResponse); clear(); } }
48. CROSS THE STREAMS fun requestSessions(paginatedParams: PaginatedParams, needsClear: Boolean) { DeferredK.applicative() .tupled( getSessions.asynK(paginatedParams), getDrafts.asynK(Unit)) .fix() .map { (sessions, drafts) -> DeferredK.invoke( UI) { sessions.fold( { showError(it) }, { response -> loadConversations(drafts.map { it.elements } .getOrElse { emptyList<StyleSession>() } .union(response.elements) . toMutableList(), needsClear) }) } } .unsafeRunAsync { } }
49. 5. FUN FACTS
50. Connection state when scheduling offline jobs worldwide
51. Time to execute from scheduling in normal conditions (~0.08% take more than 2s)
52. 6. FINAL THOUGHTS
53. ▸ Offline can be implemented gradually ▸ It is not necessary nor mandatory ▸ Can lead to awesome experiences!
54. CREDITS AND RESOURCES Special thanks to all the people who made this presentation possible: ▸ 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
55. THANKS! Any questions? You can find us at @nandodelauni & @sefford