Using Ember to Make the Seemingly Impossible Easy

Heyjin Kim and Andre Malan's talk at EmberConf 2014

Transcript

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