Phil Nash
@philnash
http:/
/philna.sh
philnash@twilio.com
Slide 3
Slide 3 text
DATA: ONLINE
AND OFF
Slide 4
Slide 4 text
OFFLINE FIRST
Slide 5
Slide 5 text
Offline first
An application that treats the network as an
enhancement
Slide 6
Slide 6 text
Not offline first
• Graceful failure to network requests
• Just saving data client side
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
THINGS TO
CONSIDER
Slide 10
Slide 10 text
ASSETS
Slide 11
Slide 11 text
SERVICE
WORKER
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
USER DATA
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
DATA: ONLINE
AND OFF
Slide 16
Slide 16 text
Data: online and off
• Traditional application data storage
• Traditional vs offline first
• Browser based data storage
• Offline first and data
Slide 17
Slide 17 text
TRADITIONAL
APPLICATION
DATA STORAGE
Slide 18
Slide 18 text
GET / POST
Slide 19
Slide 19 text
Traditional application data storage
1. POST data to a server
2. Server stores data in a database
1. GET request for data
2. Server interprets request and delivers
Slide 20
Slide 20 text
OFFLINE?
Slide 21
Slide 21 text
TRADITIONAL
VS OFFLINE
FIRST
Slide 22
Slide 22 text
INTERACT
LOCALLY
Slide 23
Slide 23 text
Interact locally
• Save data locally
• Retrieve data from local cache
Slide 24
Slide 24 text
Interact locally
• Crazy fast!
• The network doesn't matter
Slide 25
Slide 25 text
THEN SYNC
Slide 26
Slide 26 text
Sync
• People have multiple devices
• Good as a backup
Slide 27
Slide 27 text
Sync
• Can be asychronous
• Can be intentional
• Requires network
Slide 28
Slide 28 text
DATA STORAGE
IN THE FRONT
END
Slide 29
Slide 29 text
LOCALSTORAGE
Slide 30
Slide 30 text
LocalStorage
• Simple key value store
• Synchronous (slow)
Slide 31
Slide 31 text
WEBSQL
Slide 32
Slide 32 text
WEBSQL
Slide 33
Slide 33 text
INDEXEDDB
Slide 34
Slide 34 text
IndexedDB
• Asynchronous
• o_O
Slide 35
Slide 35 text
MAKING DATA
OFFLINE FIRST
Slide 36
Slide 36 text
Making data offline first
We need something that is:
• Easily distributed
• Eventually consistent
• Resolves conflicts
• Web friendly
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
CouchDB
Apache CouchDB™ is a database that uses JSON
for documents, JavaScript for MapReduce
indexes, and regular HTTP for its API
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
PouchDB
• CouchDB for the browser/Node
• Wraps IndexedDB or WebSQL
• LocalStorage adapter available as a plugin
Slide 41
Slide 41 text
DEMO
Slide 42
Slide 42 text
Offline first
• The time for offline first is now
• Distributing data like this requires a change of
mindset
• Not all application data needs to be stored this
way
Slide 43
Slide 43 text
Help me!
On a scale of 0 to 10, how likely is it that you
would recommend this talk to a friend or
colleague?
0203 322 5761
Slide 44
Slide 44 text
Thanks!
@philnash
http:/
/philna.sh
philnash@twilio.com
On a scale of 0 to 10, how likely is it that you
would recommend this talk to a friend or
colleague?
0203 322 5761