Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Data: online and off

Avatar for Phil Nash Phil Nash
September 21, 2015
Programming
0
160

Data: online and off

Avatar for Phil Nash

Phil Nash

September 21, 2015
Tweet

More Decks by Phil Nash

See All by Phil Nash
Four steps from JavaScript to TypeScript
Avatar for Phil Nash philnash
3
490
JavaScript Apps Go Intl - GIDS Live 2021
Avatar for Phil Nash philnash
2
310
You're on Mute! WebRTC and our Lives on Screen - GIDS Live 2021
Avatar for Phil Nash philnash
1
320
Better API DX with a CLI - APIdays Jakarta
Avatar for Phil Nash philnash
0
380
The trouble with webhooks - at Apidays Live Hong Kong
Avatar for Phil Nash philnash
2
230
Four steps from JavaScript to TypeScript
Avatar for Phil Nash philnash
0
430
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.2k
The trouble with webhooks - at APIdays Singapore
Avatar for Phil Nash philnash
0
330
What's going on with Project Fugu? at DevTalks Reimagined
Avatar for Phil Nash philnash
0
520

Other Decks in Programming

See All in Programming
リアーキテクチャの現場で向き合う 既存サービスの読み解きと設計判断
Avatar for ymiyamu ymiyamu
0
130
Storybookの情報をMCPサーバー化する
Avatar for Shota Iwamatsu shota_tech
3
1.2k
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
Avatar for Ernest Chiang dwchiang
0
140
「MCPを使ってる人」が より詳しくなるための解説
Avatar for Kota-Yamaguchi yamaguchidesu
0
220
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
Avatar for Kazuya Kurihara ymbigo
14
6.4k
事業KPIを基に価値の解像度を上げる
Avatar for Nealle nealle
0
120
Rubyの!メソッドをちゃんと理解する
Avatar for Yuto Urushima alstrocrack
1
320
note の Elasticsearch 更新系を支える技術
Avatar for chov(Kohei T) tchov
9
3.6k
生成AIで知るお願いの仕方の難しさ
Avatar for uutan1108 ohmori_yusuke
1
120
2025年のz-index設計を考える
Avatar for TAK tak_dcxi
12
4.7k
最速Green Tea 🍵 Garbage Collector
Avatar for kuro kuro_kurorrr
1
130
2025-04-25 GitHub Copilot Agent ライブデモ（スクリプト）
Avatar for GOAMI Takaaki goataka
0
120

Featured

See All Featured
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
75
5.8k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
5
610
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
33
6.6k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
49k

Transcript

  1. DATA: ONLINE AND OFF

  2. Phil Nash @philnash http:/ /philna.sh [email protected]

  3. DATA: ONLINE AND OFF

  4. OFFLINE FIRST

  5. Offline first An application that treats the network as an

    enhancement

  6. Not offline first •  Graceful failure to network requests •

     Just saving data client side
  7. None
  8. None

  9. THINGS TO CONSIDER

  10. ASSETS

  11. SERVICE WORKER

  12. None

  13. USER DATA

  14. None

  15. DATA: ONLINE AND OFF

  16. Data: online and off •  Traditional application data storage •

     Traditional vs offline first •  Browser based data storage •  Offline first and data

  17. TRADITIONAL APPLICATION DATA STORAGE

  18. GET / POST

  19. 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

  20. OFFLINE?

  21. TRADITIONAL VS OFFLINE FIRST

  22. INTERACT LOCALLY

  23. Interact locally •  Save data locally •  Retrieve data from

    local cache

  24. Interact locally •  Crazy fast! •  The network doesn't matter

  25. THEN SYNC

  26. Sync •  People have multiple devices •  Good as a

    backup

  27. Sync •  Can be asychronous •  Can be intentional •

     Requires network

  28. DATA STORAGE IN THE FRONT END

  29. LOCALSTORAGE

  30. LocalStorage •  Simple key value store •  Synchronous (slow)

  31. WEBSQL

  32. WEBSQL

  33. INDEXEDDB

  34. IndexedDB •  Asynchronous •  o_O

  35. MAKING DATA OFFLINE FIRST

  36. Making data offline first We need something that is: •

     Easily distributed •  Eventually consistent •  Resolves conflicts •  Web friendly
  37. None

  38. CouchDB Apache CouchDB™ is a database that uses JSON for

    documents, JavaScript for MapReduce indexes, and regular HTTP for its API
  39. None

  40. PouchDB •  CouchDB for the browser/Node •  Wraps IndexedDB or

    WebSQL •  LocalStorage adapter available as a plugin

  41. DEMO

  42. 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

  43. 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

  44. 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