$30 off During Our Annual Pro Sale. View details »

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


March 26, 2014

More Decks by simplereach

Other Decks in Programming


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

    Make the Seemingly Impossible Easy simplereach.com http://simplereach.com
  2. migration

  3. migration isn’t fun

  4. Already did the work for Ember Data

  5. None
  6. Oh, the places your data will go! Migration Multiple Ember

    Apps Search Caching Mobile
  7. Making Lots of Awesome Visualizations

  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
  9. D3 != Diablo 3 D3 === D3.js

  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
  11. D3 Donut Charts w/Ember Component

  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
  13. “Frameworks are designed to nudge you in the right direction.”

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

    to nudge our D3 code in the right direction” - Ember Princess @emberconf #FrameworkPride
  15. Infinitely scrolling list of video elements Janessa Det | @jandet

  16. Optimize? Janessa Det | @jandet

  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>
  18. None
  19. None
  20. Two apps in one…

  21. First thoughts: • Make a new app • Move authentication

    into the application
  22. …or just hack it…

  23. Just another small sprinkle of code…

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

  25. So what hard task can you accomplish with Ember? Reusable

    D3 charts with Ember Components
 Why we use D3 &Ember for Data Visualization
 Building Vine http://www.slideshare.net/janessadet/building-vineco Further Reading…
  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)