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

Ember and Rails

Steve Kinney
December 17, 2014
53

Ember and Rails

Steve Kinney

December 17, 2014
Tweet

Transcript

  1. Ember ♥ Rails
    DeRailed, December 2014

    View full-size slide

  2. Hi. I'm Steve.
    @stevekinney

    View full-size slide

  3. Hire our students, please: http://people.turing.io/

    View full-size slide

  4. Ember Basics

    View full-size slide

  5. Ember draws
    influence from
    Cocoa and Rails.
    It began it's life as
    SproutCore 2.0.

    View full-size slide

  6. Notable Features
    Two-way data binding
    Computed properties
    An emphasis on URLs
    Convention over configuration

    View full-size slide

  7. Let's look at some code.

    View full-size slide

  8. Public Service
    Announcement: TurboLinks
    Considered Harmful

    View full-size slide

  9. A Tale of Two MVCs

    View full-size slide

  10. Ember and Rails both
    take MVC pretty seriously.
    (That said, they both have a very different take on it.)

    View full-size slide

  11. The route fetches the
    model and sets up the
    controller.

    View full-size slide

  12. Controllers decorate the
    model and handle
    actions.

    View full-size slide

  13. Controllers are
    singletons.

    View full-size slide

  14. Let's say you visit /notes/1 and
    then you visit /notes/2. It's the
    same controller, but the route has
    switched out the model.

    View full-size slide

  15. Controllers maintain
    state.

    View full-size slide

  16. Controllers can talk to
    each other.

    View full-size slide

  17. What is Ember Data?

    View full-size slide

  18. It's kind of like
    ActiveRecord, but for
    Ember—and different.

    View full-size slide

  19. // models/post.js
    export default DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('text'),
    comments: DS.hasMany('comments')
    });
    // models/comment.js
    export default DS.Model.extend({
    comment: DS.attr('string'),
    post: DS.belongsTo('post')
    });

    View full-size slide

  20. And Now: An Example of
    the AJAX Requests
    Generated By Ember Data

    View full-size slide

  21. post.find('12').get('comments');

    View full-size slide

  22. post.get('comments');
    GET /posts
    {
    "posts": [
    {
    "id": "12",
    "content": "Super!",
    "comments": ["56", "58"]
    }
    ]
    }

    View full-size slide

  23. GET /comments?ids[]=56&ids[]=58
    {
    "comments": [
    {
    "id": "56",
    "message": "Whatever",
    "post": "12"
    },
    {
    "id": "58",
    "message": "Something",
    "post": "12"
    }
    ]
    }

    View full-size slide

  24. What just happened?
    Ember Data sent off two AJAX
    requests to Rails in order to build
    the relation in the browser.

    View full-size slide

  25. And then it cached the
    result in the Store.

    View full-size slide

  26. Let's look at some code together.

    View full-size slide

  27. Ember Tooling

    View full-size slide

  28. The Ember Inspector

    View full-size slide

  29. It's like the Rails command
    line tools, but for Ember—
    and not that different.

    View full-size slide

  30. Ember CLI allows you to
    proxy to a Rails server.

    View full-size slide

  31. Request
    If Ember can't respond to a URL, it proxies it on to Rails.

    View full-size slide

  32. Thank you.
    Questions?

    View full-size slide