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

Data: online and off

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Phil Nash Phil Nash
September 21, 2015
Programming
0
170

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
550
JavaScript Apps Go Intl - GIDS Live 2021
Avatar for Phil Nash philnash
2
350
You're on Mute! WebRTC and our Lives on Screen - GIDS Live 2021
Avatar for Phil Nash philnash
1
350
Better API DX with a CLI - APIdays Jakarta
Avatar for Phil Nash philnash
0
420
The trouble with webhooks - at Apidays Live Hong Kong
Avatar for Phil Nash philnash
2
260
Four steps from JavaScript to TypeScript
Avatar for Phil Nash philnash
0
470
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
The trouble with webhooks - at APIdays Singapore
Avatar for Phil Nash philnash
0
380
What's going on with Project Fugu? at DevTalks Reimagined
Avatar for Phil Nash philnash
0
600

Other Decks in Programming

See All in Programming
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.9k
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
200
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
140
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
130
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
570
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
970
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
610

Featured

See All Featured
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
180
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
110
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k

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