Push Patterns in Ember and Ember Data

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.

49612ba6e616ca3c4c668ad35e3e84ce?s=128

Luke Melia

June 17, 2014
Tweet

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

  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