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!

1. State

8. You’re Building a Distributed System!

9. Mike Pack
@mikepack_
@mikepack

13. State

14. State
Ephemeral State
Permanent State
…

15. Ephemeral State

16. Local to the user’s browser.
Cleared on page refresh.
Not persisted to a server.

18. Permanent State

19. Persisted to a server.
Written to disk.

21. State in Ember

22. Application

23. Memory
(Ephemeral)
Application

24. Memory
(Ephemeral)
Ember Data
Application

25. Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Ember Data
Application

26. Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
Application

27. Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
HTTP
Disk
(Permanent)
Server
Application

28. Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
HTTP
Disk
(Permanent)
Server
Application

29. State
Ephemeral State
Permanent State
…

30. State
Ephemeral State
Permanent State
Semipermanent State

31. Lives in the browser.
Transitory.
Written to disk.

33. Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
HTTP
Disk
(Permanent)
Server
Application

34. Disk
(Semipermanent)
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
IndexedDB
Ember Data
HTTP
Disk
(Permanent)
Server
Application

35. Synchronization

36. Server
HTTP
Browser

37. 2xx
Server
HTTP
Browser

38. 2xx
Server
HTTP
Browser

39. 2xx
Server
HTTP
Browser

40. 2xx
Server
HTTP
Browser

41. Disk
(Semipermanent)
IndexedDB
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
HTTP
Disk
(Permanent)
Server
1
2
3
Application

42. Browser Server

43. Computer A Computer B

44. Computer A Computer B
Computer C

45. Computer A
Computer B
Computer CComputer D
Computer N

46. CAP Theorem

47. CAP Theorem
Consistency
Availability
Partition Tolerance

48. Consistency

49. All nodes have the same data.

50. Browser Server
Consistent

51. Browser Server
Inconsistent

52. Availability

53. The software is fully functional.

54. Browser Server
Available

55. Browser Server
Unavailable

56. Browser Server
Available
IndexedDB
(Semipermanent)

57. Partition Tolerance

58. The choice between being
consistent or available.

59. Computers will fail.

60. Browser Server
Unavailable + Consistent

61. Browser Server
Available + Inconsistent
IndexedDB
(Semipermanent)

62. Going Offline

63. Disk
(Semipermanent)
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
IndexedDB
Ember Data
HTTP
Disk
(Permanent)
Server
Application

64. Back Online, Time to Sync

65. Disk
(Semipermanent)
IndexedDB
Memory (DS.Store)
(Ephemeral)
Memory
(Ephemeral)
Browser
Ember Data
HTTP
Disk
(Permanent)
Server
Application

66. CouchDB + PouchDB
Firebase
Orbit.js
CRDTs

67. Why This Matters

68. Go offline
Minimize data loss
Zero latency UIs
WIP (Work in Progress)

69. Thanks!
@mikepack_
@mikepack