$30 off During Our Annual Pro Sale. View Details »

Introduction to ember-data-partial-model

Introduction to ember-data-partial-model

karol.galanciak

March 19, 2016
Tweet

More Decks by karol.galanciak

Other Decks in Programming

Transcript

  1. Introduction to
    ember-data-partial-modal
    Karol Galanciak

    View Slide

  2. Who Am I
    • I’m from Poland
    • Full-stack developer at Ragnarson
    • Working on BookingSync
    • @Azdaroth Twitter
    • https://karolgalanciak.com

    View Slide

  3. ember-data-partial-model
    Why bother?
    • Fetching the data you actually need to display

    View Slide

  4. ember-data-partial-model
    Why bother?
    • Fetching the data you actually need to display
    • JSON may get huge

    View Slide

  5. ember-data-partial-model
    Why bother?
    • Fetching the data you actually need to display
    • JSON may get huge
    • Expensive queries on API-side to return all
    attributes

    View Slide

  6. ember-data-partial-model
    Expected payload for `index` action
    {
    "data": [
    {
    "id": "1",
    "type": "users",
    "attributes": {
    "fullname": "Lazar Angelov"
    }
    },
    {
    "id": "2",
    "type": "users",
    "attributes": {
    "fullname": "Rich Piana"
    }
    },
    ]
    };

    View Slide

  7. ember-data-partial-model
    Expected payload for `show` action
    {
    "data": {
    "id": "1",
    "type": "users",
    "attributes": {
    "fullname": "Lazar Angelov",
    "bio": "Huuuge amount of text goes here",
    "attribute1": "some value",
    "attribute101": "some value"
    }
    }
    };

    View Slide

  8. ember-data-partial-model
    Partial models
    // app/models/user.js
    import DS from 'ember-data';
    import { PartialModel, partial } from 'ember-data-
    partial-model/utils/model';
    const { attr } = DS;
    export default PartialModel.extend({
    fullname: attr(),
    extended: partial('user', 'extended', {
    bio: attr()
    })
    });

    View Slide

  9. ember-data-partial-model
    Real world usage
    let users = await store.findAll('user');
    let user = users.objectAt(1);
    user.get('extended');
    user.get('bio') === user.get('extended.bio');
    // inside template
    {{user.bio}}

    View Slide

  10. ember-data-partial-model
    How to use - adapters
    // app/adapters/application.js
    import DS from 'ember-data';
    import PartialModelAdapter from 'ember-data-
    partial-model/mixins/adapter';
    const { JSONAPIAdapter } = DS;
    export default
    JSONAPIAdapter.extend(PartialModelAdapter);

    View Slide

  11. ember-data-partial-model
    How to use - serializers
    // app/serializers/application.js
    import DS from 'ember-data';
    import PartialModelJSONAPISerializer from 'ember-data-
    partial-model/mixins/jsonapi-serializer';
    const { JSONAPISerializer } = DS;
    export default
    JSONAPISerializer.extend(PartialModelJSONAPISerializer);

    View Slide

  12. ember-data-partial-model
    How to use - serializers
    // app/serializers/application.js
    import DS from 'ember-data';
    import PartialModelRESTSerializer from 'ember-data-
    partial-model/mixins/rest-serializer';
    const { RESTSerializer } = DS;
    export default
    RESTSerializer.extend(PartialModelRESTSerializer);

    View Slide

  13. ember-data-partial-model
    How to use - custom serializer
    import Ember from 'ember';
    import baseSerializerMixin from 'ember-data-partial-model/mixins/base-
    serializer';
    const { Mixin } = Ember;
    export default Mixin.create(baseSerializerMixin, {
    _normalizePartialRelationship: function(modelClass, resourceHash,
    descriptor) {
    // add this function to handle normalization of partial extension as
    a relationship.
    },
    _copyAttributesFromPartialToParent: function(serializedHash,
    partialHash) {
    // add this function to handle copying attributes from partial
    extension to top-level hash.
    },
    });

    View Slide

  14. ember-data-partial-model
    How to use - store
    import DS from 'ember-data';
    import PartialModelStore from 'ember-data-partial-
    model/mixins/store';
    const { Store } = DS;
    export default Store.extend(PartialModelStore, {});

    View Slide

  15. ember-data-partial-model
    Gotcha: Processing partial extension
    properties
    • Use case: display uppercased Twitter handle from
    partial extension

    View Slide

  16. ember-data-partial-model
    Gotcha: Processing partial extension
    properties
    import Ember from 'ember';
    export default Ember.Component.extend({
    twitter: function() {
    return (this.get('user.twitter') || '').toUpperCase();
    }.property('user.twitter')
    });

    View Slide

  17. ember-data-partial-model
    Ensuring all properties are populated
    user.loadPartials().then(() => {
    // do something after all properties are populated
    });

    View Slide

  18. Thanks!

    View Slide