Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Offline Second

Saúl Díaz
June 14, 2018
230

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.

Saúl Díaz

June 14, 2018
Tweet

Transcript

  1. HALF YOUR USERS DON’T KNOW WHAT IS “INTERNET” So why

    boring them with the unnecessary details?
  2. “ Offline is not a set of techniques to make

    your app faster. It’s a philosophy that drives how your product is experienced
  3. WE CAN OPTIMIST* BETTER! Place your screenshot here * I

    know the term “to optimist” does not exist
  4. “ Your product has to build a trust with the

    user that it will respect the latest state it was left on.
  5. UNDERSTAND YOUR CACHE Availability Speed Capacity Memory Always Instant Very

    limited Disk Not guaranteed Medium Limited Network Not guaranteed May vary Infinite
  6. 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
  7. UNDERSTAND YOUR CACHE MEM DISK MEM The local repo #YOLO

    NETWO RK DISK MEM F**k the police! DISK Never gets old
  8. 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
  9. Place your screenshot here THE STYLE SESSION A “Style Session”

    is a multi-step wizard between a Stylist and a User imitating a chat.
  10. OFFLINE STEALTH Purchase a session A session can be started

    Cheating! Retry Attempt Validation Session Start
  11. COMMIT, THEN PUSH! Create Draft Draft is Promoted Retry Attempt

    Promotion ID is updated Append N messages From draft to “real” stream
  12. 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(); } }
  13. 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 { } }
  14. ▸ Offline can be implemented gradually ▸ It is not

    necessary nor mandatory ▸ Can lead to awesome experiences!
  15. 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