Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
State
You’re Building a Distributed System!
Mike Pack
@mikepack_
@mikepack
State
State
Ephemeral State
Permanent State
…
Ephemeral State
Local to the user’s browser.
Cleared on page refresh.
Not persisted to a server.
Permanent State
Persisted to a server.
Written to disk.
State in Ember
Application
Memory
(Ephemeral)
Application
Memory
(Ephemeral)
Ember Data
Application
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Ember Data
Application
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
Application
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
HTTP
Disk
(Permanent)
Server
Application
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
HTTP
Disk
(Permanent)
Server
Application
State
Ephemeral State
Permanent State
…
State
Ephemeral State
Permanent State
Semipermanent State
Lives in the browser.
Transitory.
Written to disk.
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
HTTP
Disk
(Permanent)
Server
Application
Disk
(Semipermanent)
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
IndexedDB
Ember Data
HTTP
Disk
(Permanent)
S...
Synchronization
Server
HTTP
Browser
2xx
Server
HTTP
Browser
2xx
Server
HTTP
Browser
2xx
Server
HTTP
Browser
2xx
Server
HTTP
Browser
Disk
(Semipermanent)
IndexedDB
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
HTTP
Disk
(Permanent)
S...
Browser Server
Computer A Computer B
Computer A Computer B
Computer C
Computer A
Computer B
Computer CComputer D
Computer N
CAP Theorem
CAP Theorem
Consistency
Availability
Partition Tolerance
Consistency
All nodes have the same data.
Browser Server
Consistent
Browser Server
Inconsistent
Availability
The software is fully functional.
Browser Server
Available
Browser Server
Unavailable
Browser Server
Available
IndexedDB
(Semipermanent)
Partition Tolerance
The choice between being
consistent or available.
Computers will fail.
Browser Server
Unavailable + Consistent
Browser Server
Available + Inconsistent
IndexedDB
(Semipermanent)
Going Offline
Disk
(Semipermanent)
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
IndexedDB
Ember Data
HTTP
Disk
(Permanent)
S...
Back Online, Time to Sync
Disk
(Semipermanent)
IndexedDB
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
HTTP
Disk
(Permanent)
S...
CouchDB + PouchDB
Firebase
Orbit.js
CRDTs
Why This Matters
Go offline
Minimize data loss
Zero latency UIs
WIP (Work in Progress)
Thanks!
@mikepack_
@mikepack
You're Building a Distributed System!
You're Building a Distributed System!
You're Building a Distributed System!
You're Building a Distributed System!
You're Building a Distributed System!
You're Building a Distributed System!
You're Building a Distributed System!
You're Building a Distributed System!
You're Building a Distributed System!
You're Building a Distributed System!
You're Building a Distributed System!
You're Building a Distributed System!
Upcoming SlideShare
Loading in …5
×

You're Building a Distributed System!

921 views

Published on

Whether you know it or not, you're building a distributed system. This becomes painfully obvious when taking Ember apps into the developing world. Flaky network connections pose real challenges for developers building stateful applications in the browser.
This talk is about my trials and tribulations taking Ember offline in Africa. We’ll look at the tools necessary to venture offline, how they apply to Ember specifically, and a little bit of theory to drive home the hard facts about how much fun you’ll have building a distributed system!

Published in: Engineering
  • Be the first to comment

You're Building a Distributed System!

  1. 1. State
  2. 2. You’re Building a Distributed System!
  3. 3. Mike Pack @mikepack_ @mikepack
  4. 4. State
  5. 5. State Ephemeral State Permanent State …
  6. 6. Ephemeral State
  7. 7. Local to the user’s browser. Cleared on page refresh. Not persisted to a server.
  8. 8. Permanent State
  9. 9. Persisted to a server. Written to disk.
  10. 10. State in Ember
  11. 11. Application
  12. 12. Memory (Ephemeral) Application
  13. 13. Memory (Ephemeral) Ember Data Application
  14. 14. Memory (DS.Store) (Ephemeral) Memory (Ephemeral) Ember Data Application
  15. 15. Memory (DS.Store) (Ephemeral) Memory (Ephemeral) Browser Ember Data Application
  16. 16. Memory (DS.Store) (Ephemeral) Memory (Ephemeral) Browser Ember Data HTTP Disk (Permanent) Server Application
  17. 17. Memory (DS.Store) (Ephemeral) Memory (Ephemeral) Browser Ember Data HTTP Disk (Permanent) Server Application
  18. 18. State Ephemeral State Permanent State …
  19. 19. State Ephemeral State Permanent State Semipermanent State
  20. 20. Lives in the browser. Transitory. Written to disk.
  21. 21. Memory (DS.Store) (Ephemeral) Memory (Ephemeral) Browser Ember Data HTTP Disk (Permanent) Server Application
  22. 22. Disk (Semipermanent) Memory (DS.Store) (Ephemeral) Memory (Ephemeral) Browser IndexedDB Ember Data HTTP Disk (Permanent) Server Application
  23. 23. Synchronization
  24. 24. Server HTTP Browser
  25. 25. 2xx Server HTTP Browser
  26. 26. 2xx Server HTTP Browser
  27. 27. 2xx Server HTTP Browser
  28. 28. 2xx Server HTTP Browser
  29. 29. Disk (Semipermanent) IndexedDB Memory (DS.Store) (Ephemeral) Memory (Ephemeral) Browser Ember Data HTTP Disk (Permanent) Server 1 2 3 Application
  30. 30. Browser Server
  31. 31. Computer A Computer B
  32. 32. Computer A Computer B Computer C
  33. 33. Computer A Computer B Computer CComputer D Computer N
  34. 34. CAP Theorem
  35. 35. CAP Theorem Consistency Availability Partition Tolerance
  36. 36. Consistency
  37. 37. All nodes have the same data.
  38. 38. Browser Server Consistent
  39. 39. Browser Server Inconsistent
  40. 40. Availability
  41. 41. The software is fully functional.
  42. 42. Browser Server Available
  43. 43. Browser Server Unavailable
  44. 44. Browser Server Available IndexedDB (Semipermanent)
  45. 45. Partition Tolerance
  46. 46. The choice between being consistent or available.
  47. 47. Computers will fail.
  48. 48. Browser Server Unavailable + Consistent
  49. 49. Browser Server Available + Inconsistent IndexedDB (Semipermanent)
  50. 50. Going Offline
  51. 51. Disk (Semipermanent) Memory (DS.Store) (Ephemeral) Memory (Ephemeral) Browser IndexedDB Ember Data HTTP Disk (Permanent) Server Application
  52. 52. Back Online, Time to Sync
  53. 53. Disk (Semipermanent) IndexedDB Memory (DS.Store) (Ephemeral) Memory (Ephemeral) Browser Ember Data HTTP Disk (Permanent) Server Application
  54. 54. CouchDB + PouchDB Firebase Orbit.js CRDTs
  55. 55. Why This Matters
  56. 56. Go offline Minimize data loss Zero latency UIs WIP (Work in Progress)
  57. 57. Thanks! @mikepack_ @mikepack

×