Simple Development Offline First Web/App

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Hallo! I’m Ans I work for an IoT Aquaculture startup for rural area You can ﬁnd me at: @ans4175

Slide 3

Slide 3 text

Ponds Shrimp

Slide 4

Slide 4 text

Ponds Fish

Slide 5

Slide 5 text

Ponds Traditional Feeding

Slide 6

Slide 6 text

Ponds Overfeeding Causing Fish Death

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

“Extreme Programming” Code by the pond

Slide 9

Slide 9 text

Rapid Simple Development Oﬄine First Web/App

Slide 10

Slide 10 text

What’s on the menu ▷ Ofﬂine First ▷ Existing Approach ▷ Own Solution ▷ Others Works

Slide 11

Slide 11 text

Oﬄine First?

Slide 12

Slide 12 text

“ ofﬂineﬁrst.org

Slide 13

Slide 13 text

So Why we should care? ….

Slide 14

Slide 14 text

Why? Rural Areas

Slide 15

Slide 15 text

Rural Area Marginalised Tech

Slide 16

Slide 16 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 17

Slide 17 text

World Bank: Digital Dividends (2016)

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Why? People

Slide 20

Slide 20 text

People Population boom! “unconnected world”

Slide 21

Slide 21 text

People First internet interaction with smartphone

Slide 22

Slide 22 text

Why? Availability

Slide 23

Slide 23 text

Availability You don’t always have connectivity to sync data

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

How? Existing Approach

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Progressive Web Apps Service Worker Native ‘look like’ Network Cache

Slide 29

Slide 29 text

B….but? Data Sync & Conﬂict Resolution

Slide 30

Slide 30 text

Network Checking Network Cache Data Sync

Slide 31

Slide 31 text

Document State Sync vs Command State Sync

Slide 32

Slide 32 text

Trello Sync (Document State) “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 ofﬂine 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 33

Slide 33 text

Redux Offline (Command State) https://github.com/redux-offline/redux-offline

Slide 34

Slide 34 text

How? Create own sync mechanism

Slide 35

Slide 35 text

Realm/Firestore Backend as a Service

Slide 36

Slide 36 text

Realm/Firestore

Slide 37

Slide 37 text

▷ Distributed Database CouchDB + PouchDB

Slide 38

Slide 38 text

CouchDB + PouchDB ▷ Distributed Database ▷ HTTP Protocol for Replication

Slide 39

Slide 39 text

How? Sync Mechanism Ready

Slide 40

Slide 40 text

So What do we choose?

Slide 41

Slide 41 text

Technical Requirement ▷ Web development ready ▷ Mobile development ready ▷ Time to implement faster ○ No need to write our own sync protocol

Slide 42

Slide 42 text

Tech

Slide 43

Slide 43 text

▷ Can use CRA → Service worker ready React/RN Concerns

Slide 44

Slide 44 text

Tech Simple Development Ofﬂine First Web/App

Slide 45

Slide 45 text

▷ Can use CRA → Service worker ready ▷ Reactive Rendering Pouch+Couch? React/RN Concerns

Slide 46

Slide 46 text

▷ Can use CRA → Service worker ready ▷ Reactive Rendering Pouch+Couch? ○ Integrate reactive rendering with Pouch(+Couch) React/RN Concerns

Slide 47

Slide 47 text

▷ Can use CRA → Service worker ready ▷ Reactive Rendering Pouch+Couch? ○ Integrate reactive rendering with Pouch(+Couch) ○ State Container? React/RN Concerns

Slide 48

Slide 48 text

State Container

Slide 49

Slide 49 text

State Container

Slide 50

Slide 50 text

Remember this??? CLOUD LOCAL DATA CLIENT UI deltas

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Tech State Container Interfacing w/ Data Sync

Slide 53

Slide 53 text

Pouchy Store https://github.com/eFishery/pouchy-store-example

Slide 54

Slide 54 text

Initialize Store

Slide 55

Slide 55 text

Component

Slide 56

Slide 56 text

Component

Slide 57

Slide 57 text

Render

Slide 58

Slide 58 text

Pouchy Store

Slide 59

Slide 59 text

Interface CRUD Method Ready

Slide 60

Slide 60 text

Improvement Fewer LoC

Slide 61

Slide 61 text

Improvement Reactive Rendering w/ Data Sync

Slide 62

Slide 62 text

▷ Can use CRA → Service worker ready ▷ Reactive Rendering Pouch+Couch? ○ State Container ▷ ReactNative Support? ○ Pouch storage used IndexedDB/WebSQL, how RN? React/RN Concerns

Slide 63

Slide 63 text

WebSQL → SQLite Adapter Pouch Storage on RN?

Slide 64

Slide 64 text

SQLite Adapter

Slide 65

Slide 65 text

Tech Simple Development Ofﬂine First Web/App w/ Reactive Rendering

Slide 66

Slide 66 text

Syncing Data Online

Slide 67

Slide 67 text

Using While Oﬄine

Slide 68

Slide 68 text

Syncing Data After Oﬄine

Slide 69

Slide 69 text

Basic Features Need to implement selective ﬁltering Lesson Learned Pouch Max Connection Browser limitation up to 6 simultaneous connections

Slide 70

Slide 70 text

Conclusion Do not create own sync mechanism

Slide 71

Slide 71 text

▷ Shelf (https://sid.studio/shelf/) ○ Using React Hooks ▷ https://github.com/amark/gun (GunDB) ▷ Local First Software (Martin Kleppmann) ○ https://www.inkandswitch.com/local-ﬁrst.html Others Works

Slide 72

Slide 72 text

Thanks! Ofﬂine First? Let’s grab a coffee But yeah you can ping me ONLINE at: @ans4175 [email protected] This template is free to use under Creative Commons Attribution license. If you use the graphic assets (photos, icons and typographies) provided with this presentation you must keep the Credits slide.