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

Data: online and off

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
September 21, 2015
Programming
0
130

Data: online and off

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

September 21, 2015
Tweet

More Decks by Phil Nash

See All by Phil Nash
Four steps from JavaScript to TypeScript
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
2
130
JavaScript Apps Go Intl - GIDS Live 2021
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
1
46
You're on Mute! WebRTC and our Lives on Screen - GIDS Live 2021
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
1
48
Better API DX with a CLI - APIdays Jakarta
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
0
140
The trouble with webhooks - at Apidays Live Hong Kong
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
2
49
Four steps from JavaScript to TypeScript
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
0
190
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.6k
The trouble with webhooks - at APIdays Singapore
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
0
93
What's going on with Project Fugu? at DevTalks Reimagined
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
0
130

Other Decks in Programming

See All in Programming
Pythonによる開発をアップデートするライブラリの紹介
4b46b5f1acab7f5a64c0036c1fc39f31?s=48 daikikatsuragawa
1
600
アジャイルで始める データ分析基盤構築
384e4d8bab8ac2a5e6f64dab1300c491?s=48 nagano
1
900
FargateとAthenaで作る、機械学習システム
2e7553bdade564572b26060b4a58b98e?s=48 nayuts
0
170
Regular expressions basics/正規表現の基本
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
6
260
「困りごと」から始める個人開発
4a0e3afe85259f2973dbc9386b6a4bb3?s=48 ikumatadokoro
4
250
SRE NEXT 2022に学ぶこれからのSREキャリア
71929a476c581dd754e4e1f355ac07d0?s=48 fukubaka0825
2
390
プロダクトの成長とSREと
5a9fb3b80c517e51e4e95a27b63c6a67?s=48 takuyatezuka
0
120
Introduction to Property-Based Testing @ COSCUP 2022
Fd9f21969cd8a0cbf0b2f48a9af0cc28?s=48 cybai
1
150
Automating Gradle benchmarks at N26
D4b7a3e2ed10f86e0b52498713ba2601?s=48 ubiratansoares
PRO
1
140
Git操作編
A3efba75cfbb0b7d5248eb74d1d29d79?s=48 smt7174
2
240
Rust on Lambda 大きめCSV生成
Bfcda4dca8fd6a07980ed8d5b21a572b?s=48 atsuyokota
1
390
Better Angular Architectures: Architectures with Standalone Components @DWX2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
410

Featured

See All Featured
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.3k
GraphQLとの向き合い方2022年版
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
16
8.4k
Designing for humans not robots
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
24k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.8k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
Learning to Love Humans: Emotional Interface Design
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
Mobile First: as difficult as doing things right
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
213
7.6k
Happy Clients
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
89
5.6k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
44
9.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
39
13k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
4k

Transcript

  1. DATA: ONLINE AND OFF

  2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com

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