Slide 1

Slide 1 text

OFFLINE SECOND Saúl Díaz @sefford

Slide 2

Slide 2 text

Miguel Ferrando Chicisimo iOS Sexyloper https://www.urbandictionary.com/define.php?term=Sexyloper _@nandodelauni_

Slide 3

Slide 3 text

WE LIVE IN A CONNECTED WORLD

Slide 4

Slide 4 text

BUT THIS GUY CANNOT USE YOUR APP

Slide 5

Slide 5 text

Place your screenshot here WE TAKE CONNECTIVITY FOR GRANTED

Slide 6

Slide 6 text

1. WHY OFFLINE?

Slide 7

Slide 7 text

Source: Ericcsson Reports

Slide 8

Slide 8 text

THESE GUYS ALSO DESERVE TO USE YOUR APP

Slide 9

Slide 9 text

AIR IS A LIMITED MEDIUM

Slide 10

Slide 10 text

HALF YOUR USERS DON’T KNOW WHAT IS “INTERNET” So why boring them with the unnecessary details?

Slide 11

Slide 11 text

THE MOST IMPORTANT REASON

Slide 12

Slide 12 text

2. WHAT IS OFFLINE?

Slide 13

Slide 13 text

“ Offline is not a set of techniques to make your app faster. It’s a philosophy that drives how your product is experienced

Slide 14

Slide 14 text

OPTIMISTIC UX

Slide 15

Slide 15 text

NAIVE APPROACH Place your screenshot here Place your screenshot here Place your screenshot here

Slide 16

Slide 16 text

OPTIMISTIC APPROACH Place your screenshot here Place your screenshot here Place your screenshot here

Slide 17

Slide 17 text

WE CAN OPTIMIST* BETTER! Place your screenshot here * I know the term “to optimist” does not exist

Slide 18

Slide 18 text

SALIENCY

Slide 19

Slide 19 text

Place your screenshot here SALIENCY High level

Slide 20

Slide 20 text

Place your screenshot here SALIENCY Reduced (could be better)

Slide 21

Slide 21 text

Place your screenshot here SALIENCY Amazing experience by using very low saliency

Slide 22

Slide 22 text

GRACEFUL DEGRADATION

Slide 23

Slide 23 text

Place your screenshot here

Slide 24

Slide 24 text

PREDICTIVE OFFLINE

Slide 25

Slide 25 text

API Zero-case generic feed

Slide 26

Slide 26 text

A GREAT OFFLINE EXPERIENCE ▸ Low-to-no saliency ▸ Highly optimistical ▸ Gracefully aware of network errors

Slide 27

Slide 27 text

“ Your product has to build a trust with the user that it will respect the latest state it was left on.

Slide 28

Slide 28 text

INTERMISSION! Any questions? You can find us at @nandodelauni & @sefford

Slide 29

Slide 29 text

3. A MORE TECHINCAL INSIGHT

Slide 30

Slide 30 text

THINGS YOU NEED TO UNDERSTAND ▸ Your feature ▸ Your platform ▸ Your cache

Slide 31

Slide 31 text

UNDERSTAND YOUR PLATFORM Single user Single device Single user Multiple devices Multiple users Multiple devices

Slide 32

Slide 32 text

UNDERSTAND YOUR CACHE Availability Speed Capacity Memory Always Instant Very limited Disk Not guaranteed Medium Limited Network Not guaranteed May vary Infinite

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

UNDERSTAND YOUR CACHE MEM DISK MEM The local repo #YOLO NETWO RK DISK MEM F**k the police! DISK Never gets old

Slide 35

Slide 35 text

LOGIC DIFFERENTLY Random Use Case

Slide 36

Slide 36 text

API Call Cache modification UI side effects Random use case LOGIC DIFFERENTLY

Slide 37

Slide 37 text

Random use case API Call Cache modification UI side effects LOGIC DIFFERENTLY

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

4. OFFLINE IN PRACTICE

Slide 40

Slide 40 text

_José Tojeiro_ _Chicisimo Sexyloper®_ Voy a hacer una funcionalidad offline… ...pero que eran voluntarias, ¿eh?

Slide 41

Slide 41 text

Place your screenshot here THE STYLE SESSION A “Style Session” is a multi-step wizard between a Stylist and a User imitating a chat.

Slide 42

Slide 42 text

OFFLINE STEALTH Purchase a session A session can be started Cheating! Retry Attempt Validation Session Start

Slide 43

Slide 43 text

COMMIT, THEN PUSH! Create Draft Draft is Promoted Retry Attempt Promotion ID is updated Append N messages From draft to “real” stream

Slide 44

Slide 44 text

FRAMEWORKS TO OFFLINE ▸ SyncAdapters ▸ Jetpack’s Worker library ▸ Realm Cloud or similar

Slide 45

Slide 45 text

CROSS THE STREAMS!

Slide 46

Slide 46 text

Place your screenshot here Draft Datasource Sessions Datasource

Slide 47

Slide 47 text

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(), false))); clear(); } else if (draftsResponse instanceof BaseError) { postable.post(looksResponse); clear(); } }

Slide 48

Slide 48 text

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() } .union(response.elements) . toMutableList(), needsClear) }) } } .unsafeRunAsync { } }

Slide 49

Slide 49 text

5. FUN FACTS

Slide 50

Slide 50 text

Connection state when scheduling offline jobs worldwide

Slide 51

Slide 51 text

Time to execute from scheduling in normal conditions (~0.08% take more than 2s)

Slide 52

Slide 52 text

6. FINAL THOUGHTS

Slide 53

Slide 53 text

▸ Offline can be implemented gradually ▸ It is not necessary nor mandatory ▸ Can lead to awesome experiences!

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

THANKS! Any questions? You can find us at @nandodelauni & @sefford