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

SF Ember.js Meetup 10/30

tomdale
October 30, 2012

SF Ember.js Meetup 10/30

In this talk, Tom drops some rapid-fire knowledge bombs about Ember Data–what it is, where it's at currently, and what's coming in the pipeline.

tomdale

October 30, 2012
Tweet

More Decks by tomdale

Other Decks in Programming

Transcript

  1. View Slide

  2. Ember Data

    View Slide

  3. View Slide

  4. View Slide

  5. UPDATE customers
    SET salesperson = "Mike"
    WHERE state = "NH"

    View Slide

  6. View Slide

  7. ActiveRecord

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. $.getJSON('/posts/1',
    function(data) {
    controller.set('content',
    data);
    });

    View Slide

  12. View Slide

  13. Ember Data

    View Slide

  14. DS.Store
    Application Semantics
    Server Semantics
    translates
    DS.Adapter

    View Slide

  15. DS.Adapter
    DS.Serializer

    View Slide

  16. DS.Adapter
    DS.Serializer
    • Are relationships saved in
    the parent or the child?
    • What payloads are sent
    to what URLs?
    • What actions map to
    what HTTP verbs?
    • What is the name of the
    primary key?
    • What are the names of
    attributes?
    • Are objects embedded or
    referred to by ID?

    View Slide

  17. What's Next?

    View Slide

  18. Full Time!

    View Slide

  19. Bug Fixes!

    View Slide

  20. Per-Type
    Adapters

    View Slide

  21. Server Team

    View Slide

  22. find: function(store, type, id) {
    if (type === App.Post) {
    $.ajax('/enterprise_cms/v134uu5/
    db-legacy/posts_endpoint-v2/'+id,
    'GET', {
    success: function(json) {
    store.load(type, json);
    }
    });
    } else if (type === App.Comment) {
    $.ajax('/comments/'+id, 'GET', {
    success: function(json) {
    store.load(type, json);
    }
    });
    }
    }

    View Slide

  23. DS.Store.registerAdapter('App.Post', DS.Adapter.extend({
    find: function(store, type, id) {
    $.ajax(this.buildURL(type), 'GET', {
    success: function(json) {
    store.load(type, json);
    }
    });
    }
    }));

    View Slide

  24. Helps you
    isolate crazy.

    View Slide

  25. Read-Only
    Records

    View Slide

  26. App.Serializer = DS.Serializer.extend({
    optionsForMaterializedAttribute:
    function(type, attributeName) {
    if (attributeName === 'updatedAt') {
    return { readOnly: true };
    }
    }
    });

    View Slide

  27. App.Serializer = DS.Serializer.extend({
    materializeOptions: function(record, hash) {
    if (hash.read_only === true) {
    record.materializeOptions({ readOnly:
    true });
    }
    }
    });

    View Slide

  28. View Slide

  29. DS.RESTAdapter.map('App.Tweet', {
    updatedAt: {
    readOnly: true,
    keyName: 'last_date'
    }
    });

    View Slide

  30. DS.RESTAdapter.configure('App.Tweet', {
    readOnly: true
    });

    View Slide

  31. Embedded
    Data

    View Slide

  32. // GET /comments/789
    { "comment":
    {
    "id": 789,
    "title": "Browser question",
    "body": "the question,
    \"What browser am I using, and
    why does it matter?\"",
    "user": {
    "firstName": "Jeff",
    "lastName": "Chang"
    }
    }
    }

    View Slide

  33. View Slide

  34. // PUT /comments/789
    { "comment":
    {
    "id": 789,
    "title": "Browser questions",
    "body": "the question, \"What browser am I using,
    and why does it matter?\""
    }
    }
    // PUT /users/123
    { "user":
    {
    "id": 123,
    "firstName": "Jeffrey",
    "lastName": "Chang"
    }
    }
    Embedded Loading

    View Slide

  35. DS.RESTAdapter.map('App.Comment', {
    user: { embedded: "load" }
    });
    Embedded Loading

    View Slide

  36. // PUT /comments/789
    { "comment":
    {
    "id": 789,
    "title": "Browser questions",
    "body": "the question, \"What browser am I using,
    and why does it matter?\"",
    "user": {
    "firstName": "Jeffrey",
    "lastName": "Chang"
    }
    }
    }
    Embedded

    View Slide

  37. DS.RESTAdapter.map('App.Comment', {
    user: { embedded: "always" }
    });
    Embedded

    View Slide

  38. github.com/
    emberjs/data

    View Slide

  39. Alpha!

    View Slide

  40. Thank you.
    Questions?
    http://plus.tomdale.net
    http://emberjs.com

    View Slide