Introduction to ember-data

The presentation I gave at the Budapest Ember meetup on 12/18/2013. It covers the basic conventions, a short discussion on what it gives you, the REST adapter in detail and the customization hooks ember-data provides.

Transcript

1. Introduction to
   ember-data 12/18/2013, Ember.BP
2. A data persistence library for Ember.js
3. App.Store = DS.Store.extend({! revision: 12,! adapter: App.WonkyAdapter.create! })!
4. App.Adapter = App.WonkyAdapter!
5. History • The “revision” have become a bit unwieldy • Big revamp (aka. jj-abrams branch) in August • Much slimmer code-base • currently 1.0.0.beta-3
7. What does it do? • Maps back-end data <=> front-end records • Abstracts away common back-end <=> front-end communication patterns • Manages store of client-side records • Deals with relationships between models
8. Do I need it? • Discourse does not use it, so ... • It can greatly reduce boilerplate code • Gives you nice features • http://balinterdi.com/2013/12/03/roll-your- own-ember-dot-js-identity-map.html
9. Does it fit my needs? • Assumes “sane” REST API defaults • Assumes certain payload structure • Has fine-grained hooks to modify defaults • Extend via adapters to connect to different backends (e.g localstorage, Firebase)
11. 210K ember-data-1.0.0-beta.3.js 60K ember-data.min.js 204K ember-data.prod.js
12. REST Adapter
13. Fetching all records • this.store.find(‘artist’) • => GET /artists • Assumes a root ‘artists’ key in response
14. Finding a record by id • this.store.find(‘artist’, 24) • => GET /artists/24 • Assumes a root ‘artist’ key in response
15. Querying records • this.store.find(‘artist’, { award: ‘grammy’ }) • => GET /artists?award=grammy • Assumes a root ‘artists’ key in response
16. Saving a new record • a = this.store.createRecord(‘artist’) • a.save().then(...) • => POST /artists • with the record’s jsonified attributes as payload
17. Saving an existing record • a = this.get(‘model’) • a.save().then(...) • => PUT /artists/42 • with the record’s jsonified attributes as payload
18. Deleting a record • this.get(‘model’).deleteRecord() • this.get(‘model’).save() • => DELETE /artists/42
19. Customization • namespace: ‘/api/v1’ • host: ‘api.google.com’ • this.store.find(‘artists’) • => GET ‘http://api.google.com/v1/artists
20. The Promised Land • All find and save calls returns promises • Makes all kinds of patterns possible
21. Retry person.save().then(null, function() {! return person.save();! }).then(function() {! });!
22. Find or create this.store.find('artist', 24).then(null, function() {! this.store.createRecord('artist');! });!
23. The golden response
24. {! "artists": [! {! "id": 1,! "name": "Pearl Jam",! "songs": [1, 2, 3, 4, 5, 6]! },! (...)! ],! "songs": [! {! "id": 1,! "title": "Yellow Ledbetter",! "rating": 5! },! {! "id": 2,! "title": "Daughter",! "rating": 5! },! {! "id": 3,! "title": "Animal",! "rating": 4! },! (...)! ]! }!
25. Deserialization hooks
26. extractSingle, extractArray • When the top-level key is not what it should be (or missing) {! "id": 1,! "name": "Pearl Jam",! "songs": [1, 2, 3, 4, 5, 6]! }!
27. normalize • When all the attributes are “wrong” the same way "artists": [! {! "_id": 1,! "name": "Pearl Jam",! },! ],! "songs": [! {! "_id": 1,! "title": "Yellow Ledbetter",! },! ]!
28. normalizeHash • When attributes are “wrong” in different ways, depending on type "artists": [! {! "_id": 1,! "name": "Pearl Jam",! },! ],! "songs": [! {! "ID": 1,! "TITLE": "Yellow Ledbetter",! },! ]!
29. Naming conventions • hasMany relationship keys match the relationship name (songs, not song_ids) • composed names are camelCased, not underscored (firstName, not first_name) • DS.ActiveModelSerializer to work with the ActiveModelSerializer in the Rails API
30. Serialization hooks
31. serializeIntoHash • when the root key is not what the server expects • { blogPosts: [...] } => { blog_posts: [...] }
32. serializeAttribute • when the attribute keys are not correct • { user: { firstName: ... } => { user: { first_name: ... }
33. App.Artist = DS.Model.extend({! name: DS.attr('string'),! born: DS.attr('date'),! yearsActive: DS.attr('number'),! popular: DS.attr('boolean',! { defaultValue: false }),! works: DS.hasMany()! });! Model definition
34. Bonus feature
35. Érdi Bálint @baaz http://emberjs.balinterdi.com