Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Data: online and off
Search
Phil Nash
September 21, 2015
Programming
180
0
Share
Data: online and off
Phil Nash
September 21, 2015
More Decks by Phil Nash
See All by Phil Nash
Four steps from JavaScript to TypeScript
philnash
3
580
JavaScript Apps Go Intl - GIDS Live 2021
philnash
2
370
You're on Mute! WebRTC and our Lives on Screen - GIDS Live 2021
philnash
1
380
Better API DX with a CLI - APIdays Jakarta
philnash
0
450
The trouble with webhooks - at Apidays Live Hong Kong
philnash
2
290
Four steps from JavaScript to TypeScript
philnash
0
490
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.7k
The trouble with webhooks - at APIdays Singapore
philnash
0
420
What's going on with Project Fugu? at DevTalks Reimagined
philnash
0
630
Other Decks in Programming
See All in Programming
技術記事、AIに書かせるか、自分で書くか? 〜それでも私が自分の手で書く理由〜 / #QiitaConference
jnchito
2
1.3k
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
nrslib
0
250
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
minako__ph
4
1.4k
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
manfredsteyer
PRO
0
220
「エンジニアインターン、どうやって取った?」準備のリアルを語るLT会 Progate BAR
akiomatic
0
120
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
susisu
1
1.5k
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
hollycummins
0
270
LLM Plugin for Node-REDの利用方法と開発について
404background
0
160
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
yukukotani
3
2.7k
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
gawa
12
3.5k
CSC307 Lecture 17
javiergs
PRO
0
310
tsserverとは何だったのか、これからどうなるのか
nowaki28
1
440
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.2k
Designing Powerful Visuals for Engaging Learning
tmiket
1
400
Crafting Experiences
bethany
1
170
Code Review Best Practice
trishagee
74
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
960
How GitHub (no longer) Works
holman
316
150k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
230
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
190
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
720
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
23k
Transcript
DATA: ONLINE AND OFF
Phil Nash @philnash http:/ /philna.sh
[email protected]
DATA: ONLINE AND OFF
OFFLINE FIRST
Offline first An application that treats the network as an
enhancement
Not offline first • Graceful failure to network requests •
Just saving data client side
None
None
THINGS TO CONSIDER
ASSETS
SERVICE WORKER
None
USER DATA
None
DATA: ONLINE AND OFF
Data: online and off • Traditional application data storage •
Traditional vs offline first • Browser based data storage • Offline first and data
TRADITIONAL APPLICATION DATA STORAGE
GET / POST
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
OFFLINE?
TRADITIONAL VS OFFLINE FIRST
INTERACT LOCALLY
Interact locally • Save data locally • Retrieve data from
local cache
Interact locally • Crazy fast! • The network doesn't matter
THEN SYNC
Sync • People have multiple devices • Good as a
backup
Sync • Can be asychronous • Can be intentional •
Requires network
DATA STORAGE IN THE FRONT END
LOCALSTORAGE
LocalStorage • Simple key value store • Synchronous (slow)
WEBSQL
WEBSQL
INDEXEDDB
IndexedDB • Asynchronous • o_O
MAKING DATA OFFLINE FIRST
Making data offline first We need something that is: •
Easily distributed • Eventually consistent • Resolves conflicts • Web friendly
None
CouchDB Apache CouchDB™ is a database that uses JSON for
documents, JavaScript for MapReduce indexes, and regular HTTP for its API
None
PouchDB • CouchDB for the browser/Node • Wraps IndexedDB or
WebSQL • LocalStorage adapter available as a plugin
DEMO
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
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
Thanks! @philnash http:/ /philna.sh
[email protected]
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