Introduction to ember-data-partial-model

Transcript

1. Introduction to ember-data-partial-modal Karol Galanciak
2. Who Am I • I’m from Poland • Full-stack developer at Ragnarson • Working on BookingSync • @Azdaroth Twitter • https://karolgalanciak.com
3. ember-data-partial-model Why bother? • Fetching the data you actually need to display
4. ember-data-partial-model Why bother? • Fetching the data you actually need to display • JSON may get huge
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
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" } }, ] };
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" } } };
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() }) });
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}}
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);
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);
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);
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. }, });
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, {});
15. ember-data-partial-model Gotcha: Processing partial extension properties • Use case: display uppercased Twitter handle from partial extension
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') });
17. ember-data-partial-model Ensuring all properties are populated user.loadPartials().then(() => { // do something after all properties are populated });
18. Thanks!