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

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.

Luke Melia

June 17, 2014

More Decks by Luke Melia

Other Decks in Technology


  1. Push Patterns
 with Ember & Ember Data Luke Melia Wicked

    Good Ember, Boston June 17th, 2014 1
  2. Overview ★ What do we mean by “push”? ★ Introduction

    to push transports ★ Four patterns for using push with Ember.js ★ Wrap up 4
  3. 5

  4. With “push,” the server decides
 what to send, and when

    7 Subscribe to channel Server sends data over the channel
 as appropriate
  5. 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
  6. 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.”
  7. 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
  8. Push mechanisms, or “transports” 15 ★ Polling ★ Long-Polling ★

    Server-Sent Events (SSE) ★ WebSockets ★ …and more
  9. 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
  10. 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+)
  11. 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
  12. Patterns for using push with Ember.js 22 ★ Push Channel

    ★ Push To Data Store ★ Find Subscribe ★ Operational Transformation
  13. 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
  14. Organizing Publish-Subscribe 25 ★ Clients subscribe to
 one or more

    channels ★ Apps publish events to channels ★ Events have names and payloads
  15. 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
 to target
  16. 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
 to target
  17. PushChannel Notes 37 ★ This version converts pushes to actions;

    I have also implemented this pattern with Ember.Evented and converting to events
  18. 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
  19. 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)
  20. 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
  21. 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.
  22. 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.
  23. 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:
  24. 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”
  25. 48 Find Subscribe Diagram Adapter Subscribe-capable transport findSubscribe Route, e.g.

    Store 1) find or findQuery 2) subscribe Subscribe-capable server
  26. 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
  27. 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!
  28. 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
  29. Operational Transformation Context 54 ★ Research began 25 years ago

    ★ Great solution for collaborative editing (e.g. Google Docs) ★ Complex topic
  30. 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
  31. 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
  32. 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
  33. 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.
  34. 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.
  35. 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