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
   

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