Tweet
Tweet

Slide 1

Slide 1 text

Offline First 101 2020

Slide 2

Slide 2 text

Anshori @ans4175 ans4175.dev ans4175@efishery.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

“Offline is a state of error” Mindset

Slide 7

Slide 7 text

World Bank: Digital Dividends (2016)

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

“ WWW = World Wide Web, Not Wealthy Western Web @brucel

Slide 10

Slide 10 text

Urban Area Network Coverage https://www.nperf.com/id/map/ID/-/5119.Telkomsel/signal/?ll=-6.873760512640671&lg=10 7.63471776619555&zoom=15

Slide 11

Slide 11 text

Rural Area Network Coverage https://www.nperf.com/en/map/ID/-/5119.Telkomsel/signal/?ll=-6.286604647733838&lg=10 7.9693228378892&zoom=14

Slide 12

Slide 12 text

“Offline is expected and not an error” Reframe Mindset

Slide 13

Slide 13 text

Common Approach (PWA)

Slide 14

Slide 14 text

Missed Approach (PWA) Network Checking Network Cache Data Sync

Slide 15

Slide 15 text

http://offlinefirst.org/ (circa 2013) First Movement

Slide 16

Slide 16 text

First Movement

Slide 17

Slide 17 text

Booming

Slide 18

Slide 18 text

Design & Tech Patterns

Slide 19

Slide 19 text

Design Patterns 1. Optimistic UI 2. Graceful Degradation

Slide 20

Slide 20 text

Optimistic UI (Left) Non Optimistic vs Optimistic (Right)

Slide 21

Slide 21 text

Graceful Degradation 1. Aggressive Caching Is A Better User Experience 2. Let People Interact With Their Content. Always. 3. Make Error Messages Informative And Consistent 4. Don’t Let People Start Something They Can’t Finish 5. Design Your Empty States Well 6. Never Show The Raw Error Message

Slide 22

Slide 22 text

Tech Patterns Offline First is Distributed System

Slide 23

Slide 23 text

Tech Patterns 1. Stack 2. Conflict Resolution

Slide 24

Slide 24 text

Stack (Data Driven UI) “Any code that depended on server logic before now has to implement it itself” “The basic idea behind our sync is to store changes made offline as a series of deltas that are later uploaded to the server” • https://tech.trello.com/sync-architecture/ • https://tech.trello.com/syncing-changes/ CLOUD LOCAL DATA CLIENT UI deltas

Slide 25

Slide 25 text

Stack https://github.com/redux-offline/redux-offline

Slide 26

Slide 26 text

Stack

Slide 27

Slide 27 text

Conflict Resolution: Sync Paradox

Slide 28

Slide 28 text

Conflict Resolution: Event Sourcing

Slide 29

Slide 29 text

Conflict Resolution: Event Sourcing

Slide 30

Slide 30 text

Conflict Resolution: Existing Solution

Slide 31

Slide 31 text

Don’t Re-Invent The Wheel

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Syncing Data Online

Slide 35

Slide 35 text

Using While Offline

Slide 36

Slide 36 text

Syncing Data After Offline

Slide 37

Slide 37 text

1. https://design.google/library/offline-design/ 2. https://developers.google.com/web/fundamentals/in stant-and-offline/offline-ux 3. https://uxdesign.cc/offline-93c2f8396124 4. https://github.com/pazguille/offline-first 5. https://uxplanet.org/optimistic-1000-34d9eefe4c05 6. https://flpvsk.com/blog/2019-07-20-offline-first-apps- event-sourcing/ 7. https://github.com/eFishery/pouchy-store-example References

Slide 38

Slide 38 text

Anshori @ans4175 ans4175.dev ans4175@efishery.com Thank You