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