Slide 1
Slide 1 text
Push Patterns
with Ember & Ember Data
Luke Melia
Wicked Good Ember, Boston
June 17th, 2014
1
Slide 2
Slide 2 text
About this Embereño
2
Slide 3
Slide 3 text
About this Embereño
3
Slide 4
Slide 4 text
Overview
★ What do we mean by “push”?
★ Introduction to push transports
★ Four patterns for using push with Ember.js
★ Wrap up
4
Slide 5
Slide 5 text
5
Slide 6
Slide 6 text
“Pull” is a typical HTTP request 6
Request: /posts/5.json
Response: application/json
Slide 7
Slide 7 text
With “push,” the server decides
what to send, and when 7
Subscribe to channel
Server sends data over the channel
as appropriate
Slide 8
Slide 8 text
8
A Page of Push History
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
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.”
Slide 11
Slide 11 text
Pointcast was the poster child of “push” 11
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
13
Slide 14
Slide 14 text
14
Push Transports
Slide 15
Slide 15 text
Push mechanisms, or “transports” 15
★ Polling
★ Long-Polling
★ Server-Sent Events (SSE)
★ WebSockets
★ …and more
Slide 16
Slide 16 text
16
Polling
XHR request to
check for updates
Wait N seconds
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
18
Server-Sent Events (SSE) / EventSource API
Request: /stream
Response: text/event-stream
“\n\n”-separated data
Slide 19
Slide 19 text
19
WebSockets
Handshake (HTTP upgrade)
connection opened
bi-directional, full-duplex messages
Slide 20
Slide 20 text
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+)
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Patterns for using push with Ember.js 22
★ Push Channel
★ Push To Data Store
★ Find Subscribe
★ Operational Transformation
Slide 23
Slide 23 text
23
Push Channel
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
Organizing Publish-Subscribe 25
★ Clients subscribe to
one or more channels
★ Apps publish events to channels
★ Events have names and payloads
Slide 26
Slide 26 text
26
Push Channel Diagram
Server
PushChannel
Route Sets channel name Subscribes Push JS Client
Subscribes
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
29
PushChannel Implementation, using Pusher
app/push-channels/base.js
Slide 30
Slide 30 text
30
PushChannel Implementation, using Pusher
app/push-channels/base.js
Slide 31
Slide 31 text
31
PushChannel Implementation, using Pusher
app/push-channels/base.js
Slide 32
Slide 32 text
32
PushChannel Implementation, continued
app/initializers/pusher-injections.js
Slide 33
Slide 33 text
33
PushChannel Implementation, continued
app/initializers/pusher-injections.js
Slide 34
Slide 34 text
34
PushChannel Implementation, continued
app/initializers/pusher-injections.js
Slide 35
Slide 35 text
35
PushChannel Implementation, continued
app/ext/route.js
Slide 36
Slide 36 text
36
PushChannel Implementation, continued
app/push-channel/post.js
Slide 37
Slide 37 text
PushChannel Notes 37
★ This version converts pushes to actions;
I have also implemented this pattern
with Ember.Evented and converting to
events
Slide 38
Slide 38 text
38
Push To Data Store
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
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)
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
42
Push To Data Store Implementation
app/initializers/sse-updates.js
Slide 43
Slide 43 text
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.
Slide 44
Slide 44 text
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.
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
46
Find Subscribe
Slide 47
Slide 47 text
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”
Slide 48
Slide 48 text
48
Find Subscribe Diagram
Adapter
Subscribe-capable
transport
findSubscribe
Route, e.g.
Store
1) find or findQuery
2) subscribe
Subscribe-capable
server
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
50
Find Subscribe Example Usage
app/routes/post.js
Slide 51
Slide 51 text
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!
Slide 52
Slide 52 text
52
Operational Transformation
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
Operational Transformation Context 54
★ Research began 25 years ago
★ Great solution for collaborative editing
(e.g. Google Docs)
★ Complex topic
Slide 55
Slide 55 text
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
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
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.
Slide 59
Slide 59 text
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.
Slide 60
Slide 60 text
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