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
   

   View Slide

2. migration
   

   View Slide

3. migration isn’t fun
   

   View Slide

4. Already did the work for Ember Data
   

   View Slide

5. View Slide

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

   View Slide

7. Making Lots of Awesome Visualizations
   

   View Slide

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
   

   View Slide

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

   View Slide

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
    

    View Slide

11. D3 Donut Charts w/Ember Component
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

15. Infinitely scrolling list
    of video elements
    Janessa Det | @jandet
    

    View Slide

16. Optimize?
    Janessa Det | @jandet
    

    View Slide

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
    
    
    

    View Slide

18. View Slide

19. View Slide

20. Two apps in one…
    

    View Slide

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

    View Slide

22. …or just hack it…
    

    View Slide

23. Just another small sprinkle of code…
    

    View Slide

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

    View Slide

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…
    

    View Slide

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)
    

    View Slide