Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Using Ember to Make the Seemingly Impossible Easy

Using Ember to Make the Seemingly Impossible Easy

Heyjin Kim and Andre Malan's talk at EmberConf 2014

simplereach

March 26, 2014
Tweet

More Decks by simplereach

Other Decks in Programming

Transcript

  1. Πϯϙγϒϧ! Heyjin Kim @heyjinkim André Malan @ramcio Using Ember to

    Make the Seemingly Impossible Easy simplereach.com http://simplereach.com
  2. 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
  3. 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
  4. 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
  5. “Frameworks are designed to nudge you in the right direction.”

    - Yehuda & Tom @fluentconf #FrameworkPride
  6. “D3 is a library not a framework. We use Ember

    to nudge our D3 code in the right direction” - Ember Princess @emberconf #FrameworkPride
  7. Ember solution • Switch out elements on the fly How

    does Vine play videos? Janessa Det | @jandet Vine Controller Post View Post View Post View Post View action: play playing <video> </video>
  8. 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…
  9. #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)