The document discusses using the Ember.js framework together with the D3.js library for data visualization. It outlines two main approaches - using Ember's templating and component structure to manage the DOM while using D3 for scales, functions etc, or letting D3 handle all DOM manipulation. The author argues the Ember approach is better for testability while D3 allows more animation capabilities. They combine aspects of both in their own work, favoring Ember's structure for testability.

1. Ember
+
D3
(and
maybe
a
framework
rant?)

2. Ben
Lesh
• Twi<er:
@benlesh
• Email:
ben@benlesh.com
• GitHub:
h<p://github.com/blesh

3. Ben
Lesh
Edge
Insights
@
Other
UI
developers:
@jeff3dx
@_jayphelps
@kevinlew15

4. Argus
RealTme
Streaming
Data
VisualizaTon
of
events
in
the
NeYlix
cloud
(Redacted
Screenshot!
So
covert!)

5. Ember.JS
• Home:
h<p://emberjs.com
• Docs:
h<p://emberjs.com/api
• Source:
h<p://github.com/emberjs/ember.js

6. Ember.JS
• Opinionated
structure
• Uniform
declaraTons
• Components
and
Helpers
vs
DirecTves
• Observes
changes
rather
than
dirty
checking
• Computed
ProperTes

7. Ember-­‐CLI
• Home:
h<p://ember-­‐cli.com
• Install:
npm
install
-­‐g
ember-­‐cli

8. Ember-­‐CLI
• ApplicaTon
scaffolding
• ES6
transpilaTon
• JS
concatenaTon
• MinificaTon
• JSHint
• Unit
Tests
• Development
mode
(watching)
• Much,
much
more

9. Ember
+
D3:
Mostly
Ember
Method
• Create
a
component
• Create
a
template
• Add
properTes
• Use
D3
scales,
line
funcTons,
etc
as
“helpers”,
but
let
Ember
manage
creaTng
DOM
• For
animaTons,
observe
property
changes,
then
trigger
animaTons
with
D3

10. Ember
+
D3:
Mostly
Ember
Method
PROS
• Highly
testable
• Easier
to
maintain
a
template
• Only
one
library
responsible
for
inserTng
DOM
CONS
• AnimaTon
capability
is
limited

11. Ember
+
D3:
Mostly
Ember
Method
Code
example
h<p://github.com/blesh/ember-­‐d3-­‐example

12. Ember
+
D3:
Mostly
D3
Method
• Use
very
li<le
of
Ember’s
templaTng
• Observe
changes
to
incoming
data
• use
D3’s
.data().enter().exit()
pa<ern
for
DOM
creaTon
instead
• D3
does
all
of
the
work
of
adding
to
the
DOM
• Most
of
the
a<r()
handlers
can
be
members
of
the
component
for
easier
tesTng

13. Ember
+
D3:
Mostly
D3
Method
PROS
• More
animaTon
possibiliTes
• Be<er
control
for
D3
specialists,
perhaps?
CONS
• Harder
to
test
• Easier
to
mess
up
• No
templaTng
used

14. What
we’re
doing
A
combinaTon
of
both
approaches,
heavily
favoring
the
mostly
Ember
approach
for
testability
and
templaTng

15. What
we’re
doing
Code
example
(animaTon
branch)

16. …
and
that’s
it.

17. • QuesTons?
• Comments?
• Want
to
hear
me
rant
about
Frameworks
in
general?