Push Patterns in Ember and Ember Data

There are few things that feel more magical and powerful in a web app than information that updates live before your eyes. In this talk, we will look at how to architect apps that push data into connected browsers using websockets or similar technology, and specifically how to model this behavior with Ember and Ember Data.

Transcript

1. Push Patterns
 with Ember & Ember Data Luke Melia Wicked Good Ember, Boston June 17th, 2014 1
2. About this Embereño 2
3. About this Embereño 3
4. Overview ★ What do we mean by “push”? ★ Introduction to push transports ★ Four patterns for using push with Ember.js ★ Wrap up 4
6. “Pull” is a typical HTTP request 6 Request: /posts/5.json Response: application/json
7. With “push,” the server decides
 what to send, and when 7 Subscribe to channel Server sends data over the channel
 as appropriate
8. 8 A Page of Push History
9. 9 “Remember the browser war between Netscape and Microsoft? Well, forget it. The Web browser itself is about to croak. And good riddance. In its place ... PUSH!” March 1997 WIRED Magazine
10. 10 “[Push] was heralded as the killer app
 of the late 90s, and there was even speculation that it might make the
 web browser obsolete.”
11. Pointcast was the poster child of “push” 11
12. PointCast’s Boom and Bust 12 ★ Rejected $450 million from NewsCorp in 1997 ★ Pulled IPO in May 1998 ★ Sold for $7 million in 1999 ★ Shut down the service in 2000
13. 13 </dotcom-history-lesson>
14. 14 Push Transports
15. Push mechanisms, or “transports” 15 ★ Polling ★ Long-Polling ★ Server-Sent Events (SSE) ★ WebSockets ★ …and more
16. 16 Polling XHR request to check for updates Wait N seconds
17. 17 Long-Polling XHR request to check for updates Update available? Server responds Server holds connection open Yes No When an update becomes available… Reconnect
18. 18 Server-Sent Events (SSE) / EventSource API Request: /stream Response: text/event-stream “\n\n”-separated data
19. 19 WebSockets Handshake (HTTP upgrade) connection opened bi-directional, full-duplex messages
20. 20 SSE vs WebSockets Server-Sent Events Web Sockets Direction Unidirectional Bidirectional Server Protocol HTTP Web Socket Data Format Simple, Text-Based &
 Defined By Spec Arbitrary Browser Support Most modern browsers
 (polyfills for IE) Modern Browsers (IE 10+)
21. 21 Push Infrastructure as a Service Pusher.com
 Also PubNub, Fanout & others Great list of commercial and OSS options: http://www.leggetter.co.uk/real-time-web-technologies-guide
22. Patterns for using push with Ember.js 22 ★ Push Channel ★ Push To Data Store ★ Find Subscribe ★ Operational Transformation
23. 23 Push Channel
24. Push Channel 24 ★ In the spirit of Ember’s architecture, PushChannel is a first-class citizen for handling pushed events conventionally ★ Well-suited for Ember apps that are using $.ajax
25. Organizing Publish-Subscribe 25 ★ Clients subscribe to
 one or more channels ★ Apps publish events to channels ★ Events have names and payloads
26. 26 Push Channel Diagram Server PushChannel Route Sets channel name Subscribes Push JS Client Subscribes
27. 27 Push Channel Diagram Server PushChannel Route Sets channel name Subscribes Push JS Client Subscribes PushChannel Route Push JS Client Pushes event for subscribed channel Triggers action
 matching event
 name
 Optionally
 delegates
 to target
28. 28 Inspiration from Ember’s built-in pattern User Controller Route Sets model Rendered
 with Template Displayed to Controller Route Template Interacts to
 trigger action Helper sends
 action Optionally
 delegates
 to target
29. 29 PushChannel Implementation, using Pusher app/push-channels/base.js
30. 30 PushChannel Implementation, using Pusher app/push-channels/base.js
31. 31 PushChannel Implementation, using Pusher app/push-channels/base.js
32. 32 PushChannel Implementation, continued app/initializers/pusher-injections.js
33. 33 PushChannel Implementation, continued app/initializers/pusher-injections.js
34. 34 PushChannel Implementation, continued app/initializers/pusher-injections.js
35. 35 PushChannel Implementation, continued app/ext/route.js
36. 36 PushChannel Implementation, continued app/push-channel/post.js
37. PushChannel Notes 37 ★ This version converts pushes to actions; I have also implemented this pattern with Ember.Evented and converting to events
38. 38 Push To Data Store
39. Push To Data Store 39 ★ Leverage Ember Data’s store and data binding by pushing fresh data directly into the store and letting everything else update automatically ★ Simple, pragmatic and powerful
40. 40 Push To Data Store Diagram Data Store (Identity Map) Model Model Model Controller Template Controller is given a reference to a model Template is data-bound to controller which proxies to a model. Standard Ember app with data library (e.g. Ember Data)
41. 41 Push To Data Store Diagram Data Store (Identity Map) Model Model Model Controller Template Controller is given a reference to a model Template is data-bound to controller which proxies to a model. Server Push JS Client Pushes JSON payload for subscribed channel Triggers handler Store Updater Pushes payload
 into store, which updates models
42. 42 Push To Data Store Implementation app/initializers/sse-updates.js
43. Push To Data Store Notes 43 ★ Ember Data’s `pushPayload` expects the same format that it expects API responses in, which means you can and should leverage your server-side JSON serialization code for both API responses and push updates.
44. Push To Data Store Notes 44 ★ Calling `pushPayload` with no type works for certain JSON formats, where the type can be gleaned from the JSON, but not for others, such as Django’s REST format. ★ We may see Ember Data API changes in this area as a result.
45. Push To Data Store Notes 45 ★ Animating some data changes can be a very nice touch when using this approach.
 See Edward Faulkner’s EmberConf talk and demo for an example and code:
 http://ef4.github.io/ember-animation-demo/#/simple-animated-bind
46. 46 Find Subscribe
47. Find Subscribe 47 ★ Expand Ember Data’s vocabulary to include the concept of “fetch a remote resource and subscribe to remote changes to that resource”
48. 48 Find Subscribe Diagram Adapter Subscribe-capable transport findSubscribe Route, e.g. Store 1) find or findQuery 2) subscribe Subscribe-capable server
49. 49 Find Subscribe Diagram Adapter Subscribe-capable transport findSubscribe Route, e.g. Store 1) find or findQuery 2) subscribe Subscribe-capable server Push updated payload Push payload
50. 50 Find Subscribe Example Usage app/routes/post.js
51. Find Subscribe Notes 51 ★ Implementation is complex because Ember Data does not currently have the right hooks. ★ Yapp has implemented the Ember Data layer of this approach via brute force, but has not yet tackled the push & server layers. ★ It’s a nice API though!
52. 52 Operational Transformation
53. Operational Transformation 53 ★ Embrace most robust-to-date approach to distributed editing: operational transformation (OT) ★ Use the proxy pattern to bring OT into an Ember paradigm
54. Operational Transformation Context 54 ★ Research began 25 years ago ★ Great solution for collaborative editing (e.g. Google Docs) ★ Complex topic
55. 55 “Unfortunately, implementing OT sucks. There’s a million algorithms with different tradeoffs, mostly trapped in academic papers. The algorithms are really hard and time consuming to implement correctly. ... Wave took 2 years to write and if we rewrote it today, it would take almost as long to write a second time.” Joseph Gentle, Google Wave Engineer
56. Operational Transformation Context 56 ★ Joseph Gentle wrote Share.js, an OSS implementation of OT for Node ★ Lime Apps sponsored Kris Selden to write EmberShare, an OSS Ember layer on top of Share.js’ JSON support
 http://embershare.com
57. 57 EmberShare Diagram EmberShare Store ShareJS Client Library ShareProxy Wraps a ShareJS JSON document
 and allows you to interact with regular get/set operations ShareJS Node Server ShareArray Web Socket connection Initializes document and returns wrapped version Bi-directional updates
58. Wrap up 58 ★ Because of data-binding, Ember is a fabulous environment to work with dynamically updating content. ★ Ember support has conceptual support for “push” but not much baked in yet.
59. Wrap up 59 ★ By experimenting with these patterns and similar ones, we will create the cowpaths that we can later pave and incorporate into Ember Data or another community-embraced library.
60. Q&A Creative Commons photo credits: https://flic.kr/p/8sQfE, Cropped, https://flic.kr/p/cVnu93 Cropped, reduced exposure; https://flic.kr/p/c6mrPJ Cropped, reduced exposure; https://flic.kr/p/nxtvGK Cropped; https://flic.kr/p/6M3YRd Cropped; https://flic.kr/p/nQrALa Cropped; https://flic.kr/p/dYX129 Cropped 60 @lukemelia @yapplabs, @embernyc