Introduction to ember-data-partial-model

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