Introduction to Ember Data 2.0

A basic introduction to Ember Data 2.0 with a couple of deep dives in customizing adapters and serializers.

Transcript

1. INTRODUCTION TO EMBER DATA 2.0
2. INTRODUCTION TO EMBER DATA 2.1
3. I'M CHRISTOFFER PERSSON DEVELOPER @ GLESYS.COM, PHP, JS, EMBER DATA CORE TEAM
4. A BASIC INTRODUCTION WITH A COUPLE OF DEEP DIVES
5. EMBER DATA
6. 1. Models 2. Transforms 3. Store 4. Adapters 5. Serializers
7. MODELS
8. REPRESENT THE DATA OF YOUR APPLICATION
9. DEFINING MODELS export default DS.Model.extend({ // models/user.js firstName: DS.attr(), lastName: DS.attr(), age: DS.attr(), isAdmin: DS.attr(), company: DS.belongsTo() }); export default DS.Model.extend({ // models/company.js name: DS.attr(), users: DS.hasMany() });
10. DEFINING MODELS export default DS.Model.extend({ // models/user.js firstName: DS.attr(), lastName: DS.attr(), age: DS.attr(), isAdmin: DS.attr(), company: DS.belongsTo('company') }); export default DS.Model.extend({ // models/company.js name: DS.attr(), users: DS.hasMany('user') });
11. DEFINING MODELS export default DS.Model.extend({ // models/regular-user.js firstName: DS.attr(), lastName: DS.attr(), age: DS.attr(), isAdmin: DS.attr(), company: DS.belongsTo('company') }); export default DS.Model.extend({ // models/company.js name: DS.attr(), users: DS.hasMany('regular-user') });
12. BEST PRACTICES ▸ Use camelCase for model properties ▸ Use dash-case when referencing a model
13. DEFINING MODELS export default DS.Model.extend({ // models/regular-user.js firstName: DS.attr(), lastName: DS.attr(), age: DS.attr(), isAdmin: DS.attr(), company: DS.belongsTo('company') }); export default DS.Model.extend({ // models/company.js name: DS.attr(), users: DS.hasMany('regular-user') });
14. DEFINING MODELS export default DS.Model.extend({ // models/regular-user.js firstName: DS.attr(), lastName: DS.attr(), age: DS.attr(), isAdmin: DS.attr({ defaultValue: false }), company: DS.belongsTo('company') }); export default DS.Model.extend({ // models/company.js name: DS.attr(), users: DS.hasMany('regular-user') });
15. DEFINING MODELS export default DS.Model.extend({ // models/regular-user.js firstName: DS.attr('string'), lastName: DS.attr('string'), age: DS.attr('number'), isAdmin: DS.attr('boolean', { defaultValue: false }), company: DS.belongsTo('company') }); export default DS.Model.extend({ // models/company.js name: DS.attr('string'), users: DS.hasMany('regular-user') });
16. TRANSFORMS
17. DESERIALIZE ATTRIBUTES RECEIVED FROM YOUR SERVER AND SERIALIZE ATTRIBUTES SENT TO YOUR SERVER
18. BUILT-IN TRANSFORMS ▸ boolean ▸ date ▸ number ▸ string
19. CUSTOM TRANSFORM // transforms/temperature.js export default DS.Transform.extend({ deserialize(value) { return (value * 1.8) + 32; }, serialize(value) { return (value - 32) / 1.8; } });
20. CUSTOM TRANSFORM // models/weather-forecast.js export default DS.Model.extend({ date: DS.attr('date'), highest: DS.attr('temperature'), lowest: DS.attr('temperature') });
21. IF YOU DON'T DEFINE A TRANSFORM, THE VALUE IS PASSED THROUGH
22. TRANSFORMS ARE NOT APPLIED CONTINUOUSLY
23. STORE
24. A SINGLE SOURCE OF TRUTH FOR RECORDS AND RELATIONSHIPS
25. CREATING RECORDS USING THE STORE let post = store.createRecord('post'); post.set('title', 'Ember is Fantastic'); post.save();
26. CREATING RECORDS USING THE STORE let post = store.createRecord('post', { title: 'Ember is Fantastic' }); post.save();
27. FINDING DATA USING THE STORE // GET /posts store.findAll('post').then((posts) => { // ... }); // GET /posts/1 store.findRecord('post', 1).then((post) => { // ... });
28. DEFAULT RELOADING IN EMBER DATA 2.0 findAll(type) ▸ If no records with matching type are present in the store, fetch and wait for promise to resolve. ▸ If there's at least one record already in the store, resolve immediately and schedule a background reload.
29. DEFAULT RELOADING IN EMBER DATA 2.0 findRecord(type, id) ▸ If no record with matching type and id is present in the store, fetch and wait for promise to resolve. ▸ If a record is already in the store, return immediately and schedule a background reload.
30. FORCE FRESH DATA // GET /posts store.findAll('post', { reload: true }).then((posts) => { // ... }); // GET /posts/1 store.findRecord('post', 1, { reload: true }).then((post) => { // ... });
31. DEFAULT RELOAD BEHAVIOR CAN BE CHANGED IN THE ADAPTER
32. QUERYING DATA USING THE STORE // GET /posts?published=true store.query('post', { published: true }).then((posts) => { // ... }); // GET /posts?slug=fantastic-ember store.queryRecord('post', { slug: 'fantastic-ember' }).then((post) => { // ... });
33. PEEKING INTO THE STORE store.peekAll('post'); store.peekRecord('post', 1);
34. PUSHING DATA INTO THE STORE You can push a JSON API Document to the store. store.push({ data: { type: 'post', id: '1', attributes: { title: 'Ember is Fantastic' } } });
35. EMBER DATA INTERNAL JSON API FORMAT ▸ Use camelCase for attributes and relationships ▸ Use singular dash-case types
36. ADAPTERS
37. RESPONSIBLE OF TALKING TO YOUR PERSISTENCE LAYER
38. BUILT-IN ADAPTERS ▸ JSONAPIAdapter (default) ▸ RESTAdapter
39. APPLICATION ADAPTER // adapters/application.js export default DS.JSONAPIAdapter.extend({ // ... });
40. MODEL SPECIFIC ADAPTER // adapters/user.js import ApplicationAdapter from './application'; export default ApplicationAdapter.extend({ // ... });
41. AVAILABLE ADAPTER METHODS ▸ createRecord(store, type, snapshot) ▸ updateRecord(store, type, snapshot) ▸ deleteRecord(store, type, snapshot)
42. AVAILABLE ADAPTER METHODS ▸ findAll(store, type, sinceToken) ▸ findBelongsTo(store, snapshot, url) ▸ findHasMany(store, snapshot, url) ▸ findRecord(store, type, id, snapshot)
43. AVAILABLE ADAPTER METHODS ▸ findMany(store, type, ids, snapshots) export default DS.JSONAPIAdapter.extend({ coalesceFindRequests: true });
44. AVAILABLE ADAPTER METHODS ▸ query(store, type, query) ▸ queryRecord(store, type, query)
45. CUSTOM URLS ▸ buildURL(modelName, id, snapshot, requestType, query)
46. CUSTOM URLS ▸ urlForCreateRecord(modelName, snapshot) ▸ urlForUpdateRecord(id, modelName, snapshot) ▸ urlForDeleteRecord(id, modelName, snapshot)
47. CUSTOM URLS ▸ urlForFindAll(modelName) ▸ urlForFindBelongTo(id, modelName) ▸ urlForFindHasMany(id, modelName) ▸ urlForFindMany(ids, modelName, snapshots) ▸ urlForFindRecord(id, modelName, snapshot)
48. CUSTOM URLS ▸ urlForQuery(query, modelName) ▸ urlForQueryRecord(query, modelName)
49. CUSTOM URLS ▸ pathForType(modelName) // adapters/application.js export default DS.JSONAPIAdapter.extend({ pathForType(modelName) { // Change the default `/line-items` to `/LINE-ITEMS` return this._super(modelName).toUpperCase(); } });
50. "Default reload behavior can be changed in the adapter"
51. CHANGE THE RELOAD BEHAVIOR ▸ shouldReloadAll(store, snapshotArray) ▸ shouldReloadRecord(store, snapshot) ▸ shouldBackgroundReloadAll(store, snapshotArray) ▸ shouldBackgroundReloadRecord(store, snapshot)
52. SERIALIZERS
53. NORMALIZE DATA RECEIVED FROM YOUR SERVER AND SERIALIZE DATA SENT TO YOUR SERVER
54. BUILT-IN SERIALIZERS ▸ JSONAPISerializer (default) ▸ RESTSerializer ▸ JSONSerializer
55. APPLICATION SERIALIZER // serializers/application.js export default DS.JSONAPISerializer.extend({ // ... });
56. MODEL SPECIFIC SERIALIZER // serializers/user.js import ApplicationSerializer from './application'; export default ApplicationSerializer.extend({ // ... });
57. NORMALIZE DATA Ember data provides two primary entry points to normalize your data: ▸ normalizeResponse(store, primaryModelClass, payload, id, requestType) ▸ normalize(modelClass, resourceHash)
58. EMBER DATA EXPECTS A JSON API DOCUMENT If you inherit from any of the built-in serializers, make sure you always call _super().
59. NORMALIZE A FULL RESPONSE PAYLOAD normalizeResponse(store, primaryModelClass, payload, id, requestType) { // { // status: 'ok', // response: { // ... // } // } payload = payload.response; return this._super(payload); }
60. NORMALIZE A SINGLE RESOURCE normalize(modelClass, resourceHash) { // { // _id: 1, // _title: 'This is my title' // } resourceHash.id = resourceHash._id; resourceHash.title = resourceHash._title; delete resourceHash._id; delete resourceHash._title; return this._super(modelClass, resourceHash); }
61. NORMALIZE A SINGLE RESOURCE ▸ extractId(modelClass, resourceHash) ▸ extractAttributes(modelClass, resourceHash) ▸ extractRelationships(modelClass, resourceHash)
62. THE SERIALIZER NORMALIZATION FLOW !" normalizeFindAllResponse() """""# $" normalizeFindHasManyResponse() "%" normalizeArrayResponse() """""""""""""""""""""""""""""""# $" normalizeFindManyResponse() """"& ' $" normalizeQueryResponse() """""""( ' ' ' $" normalizeFindRecordResponse() """""""""""""""""""""""""""""""# ' normalizeResponse() "%" normalizeFindBelongsToResponse() """"""""""""""""""""""""""""& ' $" normalizeQueryRecordResponse() """"""""""""""""""""""""""""""& ' ' ' ' $" normalizeCreateRecordResponse() "# ' ' $" normalizeDeleteRecordResponse() "%" normalizeSaveResponse() ")" normalizeSingleResponse() ")" normalize() *" normalizeUpdateRecordResponse() "(
63. NORMALIZE A SINGLE RESOURCE normalize(modelClass, resourceHash) { // { // _id: 1, // _title: 'This is my title', // _author: 1 // } resourceHash.id = resourceHash._id; resourceHash.title = resourceHash._title; delete resourceHash._id; delete resourceHash._title; return this._super(modelClass, resourceHash); }
64. NORMALIZE A SINGLE RESOURCE ALTERNATIVE primaryKey: '_id'
65. NORMALIZE A SINGLE RESOURCE ALTERNATIVE attrs: { title: '_title' // or title: { key: '_title' } }
66. NORMALIZE A SINGLE RESOURCE ALTERNATIVES keyForAttribute(key, method) { key = this._super(key, method); return `_${key}`; } keyForRelationship(key, modelClass, method) { key = this._super(key, method); return `_${key}`; }
67. ADDITIONAL METHODS ▸ modelNameFromPayloadKey(key) ▸ payloadKeyFromModelName(modelName) JSONAPISerializer only
68. SERIALIZE DATA One main entry point to serialize your data: ▸ serialize(snapshot, options)
69. WHAT'S A SNAPSHOT?
70. REPRESENTS A RECORD THAT YOU CAN INSPECT WITHOUT CAUSING SIDE-EFFECTS
71. ACCESSING INFORMATION IN A SNAPSHOT Getting unloaded relationships will not trigger a fetch. snapshot.id; snapshot.modelName; snapshot.attr('title'); snapshot.belongsTo('author'); snapshot.hasMany('comments');
72. SERIALIZE DATA One main entry point to serialize your data: ▸ serialize(snapshot, options)
73. SERIALIZE DATA ▸ serializeAttribute(snapshot, json, key, attribute) ▸ serializeBelongsTo(snapshot, json, relationship) ▸ serializeHasMany(snapshot, json, relationship)
74. The End
75. THANK YOU! GITHUB.COM/WECC TWITTER.COM/CHRISTOFFERP