Ember-Data

By Igor Terzic / @terzicigor
From Addepar

"Ember Camp: A small gathering of Ember developers designed to troll Tom&Yehuda about Ember Data" - Anonymous

Where it came from

Current state

Way forwards towards ED 1.0

Ember Data as a Data Persistence Framework

Hello!

Igor Terzic

@terzicigor

From

@Addepar

addepar.github.io

Meny
Meny
Meny
Meny
Meny
Meny
Meny
Meny

Data Persistence Framework

Benefits

Meny

Way of reasoning about problems

Abstractions

Meny

What problems does it solve?

Doing X sucks!

Use Y so X doesn't suck anymore

Too much logic in the view-Handlebars

Too much repetition-Rails

Current DB engines are too reliable-MongoDB

Ember-Data

Data Persistence framework

Data persistence is a hard problem

Meny
Meny

Code/data organisation in the front end

Data transformation

Asynchronicity

Caching

Easy/Hard

Data transformation-easy

Asynchronicity-medium

Caching-medium

Common/Unique

Meny

Easier problems should be locked down less

Adapter/Serializer-Store/Models

Data transformation

Easy

Tractable


user: {
  id:1,
  name: 'Igor',
  slidesReady: false
}
					


  1
  1
  1

					

user.get('name') -> 'Igor'
user.set('slidesReady', true)
					

user.save() -> POST /user/1
					

Easy

Custom

Meny
"The hooks now are insanely better" - Robert Jackson

App.UserSerializer = DS.RestSerializer.extend({
  normalize: function(hash){
    //DO CUSTOM CRAZY STUFF HERE
 } 
})
					

App.UserSerializer = DS.RestSerializer.extend({
  extractSingle: function(store, primaryType, payload){
    //DO EVEN CRAZIER STUFF HERE
 },

  extractArray: function(store, primaryType, payload){
    //DO EVEN CRAZIER STUFF HERE
 } 
})
					
Meny

Future: tighten up

Data transformation-easy

Asynchronicity-medium

Caching-medium

Meny

Asynchronicity

Promises

Meny
Meny

Asynchronicity

Before:


user.find()
user.onLoad( function(){
  //DO THINGS
});
					

Current:


store.find('user', 1).then( function(data){
  data.get('name')
});
					

Current:


comment = store.createRecord('comment')
post = store.createRecord('post')
post.save().then( function(data){
  comment.set('post', data)
  comment.save()
});
					
Meny

Current:


App.User = DS.Model.extend({
  name: DS.attr('string'),
  friends: DS.hasMany('user', {async: true])
})
					

Current:


App.User = DS.Model.extend({
  name: DS.attr('string'),
  friends: DS.hasMany('user', {async: false])
})
					

Bad idea :(

Fixture Adapter

Changes to the API should not impact App code

Future:


App.User = DS.Model.extend({
  name: DS.attr('string'),
  friends: DS.hasMany('user')
})

user.get('friends').then( function(friends){
  //DO THINGS
});
					

Future:


user.get('friends').then( function(friends){
  friends.objectAt(0).then( function(firstFriend) {
    firstFriend.get('name');
  });
});
					

Lazy arrays

Future:


user.get('friends').then( function(friends){
  friends.objectAt(0).then( function(firstFriend) {
    firstFriend.get('name');
  });
});
					

PromiseProxyMixin

Current:


user: function(){
  store.find('user', 1)
}.property()

friends: function(){
  this.get('user.friends')
}.property('user.friends')
					

Data transformation

Asynchronicity

Caching

Meny

Caching

Identity map


//On App Load
var user1 = store.find('user', 1)

//In User Settings controller
var user2 = store.find('user', 1)

user1 == user2
					

Identity map


            var person = store.find('person', 1)
.
var samePerson = store.find('person', 1)
.
.
person.set('name', 'Igor')
samePerson.get('name') -> 'Igor'
					

Data transformation

Asyncronicity

Caching

Meny

Huh?

Standardized data retrieval

Data transformation-easy

Asynchronicity-medium

Caching-medium


store.find('user', 1)
					

My parents


Me.get('lightbulb')
					

store.find('user', 1)

user: { id:1,
    name: 'Igor'
},
 
 emails:[ {id:1, text: 'A Few Good Slides'}] 
}
					

Data transformation-easy

Asynchronicity-medium

Caching-medium

Locality-hard

Locality

Relationships


store.find('post', 1)

post: { id:1,
    text: 'EmberConf IS Awesome',
    comments: [54]
}
					

post: { id:1,
    text: 'EmberConf IS Awesome',
    comments: [54]
}
post.get('comments').length === 1

store.find('comment', 1)
comment: { id:1,
           text: 'So Much Web',
           post: 1 }

post.get('comments').length === 2 
					

Single source of truth

Saving is easier

store.commit too hard

Focus

Meny

Thanks!

@terzicigor
@addepar