Using Ember to Make the Seemingly Impossible Easy

Slide 1

Slide 1 text

Πϯϙγϒϧ! Heyjin Kim @heyjinkim André Malan @ramcio Using Ember to Make the Seemingly Impossible Easy simplereach.com http://simplereach.com

Slide 2

Slide 2 text

migration

Slide 3

Slide 3 text

migration isn’t fun

Slide 4

Slide 4 text

Already did the work for Ember Data

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Oh, the places your data will go! Migration Multiple Ember Apps Search Caching Mobile

Slide 7

Slide 7 text

Making Lots of Awesome Visualizations

Slide 8

Slide 8 text

var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); ! svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); ! svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Frequency"); ! svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") X

Slide 9

Slide 9 text

D3 != Diablo 3 D3 === D3.js

Slide 10

Slide 10 text

Template  ! rendering DOM D3 + Ember for Visualization DATA ! [82, 79, 143, 191] Ember Component    handling DATA  updating DOM  !     Style ! “make it pretty” 0 50 100 150 200 April May June July D3 code scales & domains

Slide 11

Slide 11 text

D3 Donut Charts w/Ember Component

Slide 12

Slide 12 text

D3 in Ember • Easy to add functionality to Ember Component • Encapsulation hides D3 from the rest of application and helps you create well structured D3 code • Ember Architecture helps separate concerns between DATA and DOM and allows you to focus on the story

Slide 13

Slide 13 text

“Frameworks are designed to nudge you in the right direction.” - Yehuda & Tom @fluentconf #FrameworkPride

Slide 14

Slide 14 text

“D3 is a library not a framework. We use Ember to nudge our D3 code in the right direction” - Ember Princess @emberconf #FrameworkPride

Slide 15

Slide 15 text

Inﬁnitely scrolling list of video elements Janessa Det | @jandet

Slide 16

Slide 16 text

Optimize? Janessa Det | @jandet

Slide 17

Slide 17 text

Ember solution • Switch out elements on the ﬂy How does Vine play videos? Janessa Det | @jandet Vine Controller Post View Post View Post View Post View action: play playing

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Two apps in one…

Slide 21

Slide 21 text

First thoughts: • Make a new app • Move authentication into the application

Slide 22

Slide 22 text

…or just hack it…

Slide 23

Slide 23 text

Just another small sprinkle of code…

Slide 24

Slide 24 text

Icanhaslego? manager, non-manager? freemium, paid?

Slide 25

Slide 25 text

So what hard task can you accomplish with Ember? Reusable D3 charts with Ember Components  http://heyjinjs.us/post/57158250642/reusable-d3-charts-with-ember-js-components  Why we use D3 &Ember for Data Visualization  http://www.simplereach.com/blog/why-use-d3-ember-for-data-visualization  Building Vine http://www.slideshare.net/janessadet/building-vineco Further Reading…

Slide 26

Slide 26 text

#thankyou also, we’re hiring (talk to us after!) Heyjin Kim @heyjinkim http://heyjinjs.us André Malan @ramcio http://andremalan.net http://simplereach.com #ϙγϒϧ! Special Thanks: Andrea Mignolo @pnts (for making our slides look amazing) Janessa Det @jandet (for her awesome Vine example)