$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Luke Melia

Other Decks in Technology

Transcript

  1. Push Patterns

    with Ember & Ember Data
    Luke Melia
    Wicked Good Ember, Boston
    June 17th, 2014
    1

    View Slide

  2. About this Embereño
    2

    View Slide

  3. About this Embereño
    3

    View Slide

  4. Overview
    ★ What do we mean by “push”?
    ★ Introduction to push transports
    ★ Four patterns for using push with Ember.js
    ★ Wrap up
    4

    View Slide

  5. 5

    View Slide

  6. “Pull” is a typical HTTP request 6
    Request: /posts/5.json
    Response: application/json

    View Slide

  7. With “push,” the server decides

    what to send, and when 7
    Subscribe to channel
    Server sends data over the channel

    as appropriate

    View Slide

  8. 8
    A Page of Push History

    View Slide

  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

    View Slide

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

    View Slide

  11. Pointcast was the poster child of “push” 11

    View Slide

  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

    View Slide

  13. 13

    View Slide

  14. 14
    Push Transports

    View Slide

  15. Push mechanisms, or “transports” 15
    ★ Polling
    ★ Long-Polling
    ★ Server-Sent Events (SSE)
    ★ WebSockets
    ★ …and more

    View Slide

  16. 16
    Polling
    XHR request to
    check for updates
    Wait N seconds

    View Slide

  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

    View Slide

  18. 18
    Server-Sent Events (SSE) / EventSource API
    Request: /stream
    Response: text/event-stream
    “\n\n”-separated data

    View Slide

  19. 19
    WebSockets
    Handshake (HTTP upgrade)
    connection opened
    bi-directional, full-duplex messages

    View Slide

  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+)

    View Slide

  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

    View Slide

  22. Patterns for using push with Ember.js 22
    ★ Push Channel
    ★ Push To Data Store
    ★ Find Subscribe
    ★ Operational Transformation

    View Slide

  23. 23
    Push Channel

    View Slide

  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

    View Slide

  25. Organizing Publish-Subscribe 25
    ★ Clients subscribe to

    one or more channels
    ★ Apps publish events to channels
    ★ Events have names and payloads

    View Slide

  26. 26
    Push Channel Diagram
    Server
    PushChannel
    Route Sets channel name Subscribes Push JS Client
    Subscribes

    View Slide

  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

    View Slide

  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

    View Slide

  29. 29
    PushChannel Implementation, using Pusher
    app/push-channels/base.js

    View Slide

  30. 30
    PushChannel Implementation, using Pusher
    app/push-channels/base.js

    View Slide

  31. 31
    PushChannel Implementation, using Pusher
    app/push-channels/base.js

    View Slide

  32. 32
    PushChannel Implementation, continued
    app/initializers/pusher-injections.js

    View Slide

  33. 33
    PushChannel Implementation, continued
    app/initializers/pusher-injections.js

    View Slide

  34. 34
    PushChannel Implementation, continued
    app/initializers/pusher-injections.js

    View Slide

  35. 35
    PushChannel Implementation, continued
    app/ext/route.js

    View Slide

  36. 36
    PushChannel Implementation, continued
    app/push-channel/post.js

    View Slide

  37. PushChannel Notes 37
    ★ This version converts pushes to actions;
    I have also implemented this pattern
    with Ember.Evented and converting to
    events

    View Slide

  38. 38
    Push To Data Store

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  42. 42
    Push To Data Store Implementation
    app/initializers/sse-updates.js

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

  46. 46
    Find Subscribe

    View Slide

  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”

    View Slide

  48. 48
    Find Subscribe Diagram
    Adapter
    Subscribe-capable
    transport
    findSubscribe
    Route, e.g.
    Store
    1) find or findQuery
    2) subscribe
    Subscribe-capable
    server

    View Slide

  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

    View Slide

  50. 50
    Find Subscribe Example Usage
    app/routes/post.js

    View Slide

  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!

    View Slide

  52. 52
    Operational Transformation

    View Slide

  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

    View Slide

  54. Operational Transformation Context 54
    ★ Research began 25 years ago
    ★ Great solution for collaborative editing
    (e.g. Google Docs)
    ★ Complex topic

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide