Slides from my talk at SF Front End Developers meetup on Jan 22, 2015

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?