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

Cf6bf9ccf0e6602f915a9db78480cc92?s=128

simplereach

March 26, 2014
Tweet

Transcript

  1. 1.

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

    Make the Seemingly Impossible Easy simplereach.com http://simplereach.com
  2. 5.
  3. 8.

    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
  4. 10.

    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
  5. 12.

    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
  6. 13.

    “Frameworks are designed to nudge you in the right direction.”

    - Yehuda & Tom @fluentconf #FrameworkPride
  7. 14.

    “D3 is a library not a framework. We use Ember

    to nudge our D3 code in the right direction” - Ember Princess @emberconf #FrameworkPride
  8. 17.

    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>
  9. 18.
  10. 19.
  11. 25.

    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…
  12. 26.

    #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)