Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

  2. migration isn’t fun

    View full-size slide

  3. Already did the work for Ember Data

    View full-size slide

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

    View full-size slide

  5. Making Lots of Awesome Visualizations

    View full-size slide

  6. 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 full-size slide

  7. D3 != Diablo 3
    D3 === D3.js

    View full-size slide

  8. 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 full-size slide

  9. D3 Donut Charts w/Ember Component

    View full-size slide

  10. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Optimize?
    Janessa Det | @jandet

    View full-size slide

  15. 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 full-size slide

  16. Two apps in one…

    View full-size slide

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

    View full-size slide

  18. …or just hack it…

    View full-size slide

  19. Just another small sprinkle of code…

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

  22. #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 full-size slide