EPF

A framework for keeping your Ember.js apps in sync.

Created by Gordon L. Hempton / @ghempton / GroupTalent / epf.io

Why Another Framework?

• Ember Data
• Ember Restless
• Ember Resource
• Ember Model
• EPF

History

• Migrated from Rails to Ember w/ Ember Data
• First PR made two years ago
• Been through every single revision of Ember Data

Ember Data - The Good

• Loading data
• Serialization
• Sideloading
• Relationships
• Right level of abstraction

Ember Data - The Bad

• Transactions
• Data is "locked" while being committed
• Limited error handling
• Corner cases
• Live on a fork

Needed to move off of Ember Data.

Other Solutions

• Too lightweight
• Missing features
• Hard to migrate from ED

Time to build a new persistence framework.

EPF was born

Observations

• Reading data is easy*
• Modifying data is difficult (esp. relationships)
• Always expect new data

Designing EPF

• Non-blocking
• Focus on synchronization
• Correctness first, performance second
• Straightforward migration from Ember Data
• Re-think primitives (e.g. transactions)

EPF Today

• Everything shown implemented
• Used in production at GroupTalent
• ~35 inter-related models
• Not perfect

API

Setup

App.Adapter = Ep.RestAdapter.extend({
  namespace: 'api' // optionally set a prefix for all urls
});

Defining Models

App.Group = Ep.Model.extend({
  name: Ep.attr('string'),
  users: Ep.hasMany(App.User)
});

App.User = Ep.Model.extend({
  name: Ep.attr('string'),
  group: Ep.belongsTo(App.Group)
});

Loading Models

session.load(App.User, 1);

session.load('user', 1); // string version

session.load('user', 1).then(function(user) {
  // user will be loaded
});

Creating Models

session.create(App.User, {name: 'herp'});

session.create('user', {name: 'herp'}); // alternative string version

session.flush().then(function() {
  // changes will have been persisted
});

Updating Models

user.set('name', 'embereno');

session.flush().then(function() {
  // changes will have been persisted
});

// updates can happen while a flush is pending
user.set('name', 'kris');

Relationships

var group = session.create('group', {name: 'emberenos'});

user.set('group', group);

// inverse relationships automatically updated
group.get('users'); // [user]

Putting it all together

var group = session.create('group', {name: 'emberenos'});
var user = session.create('user', {name: 'dave'});

user.set('group', group);

group.get('users').pushObject(existingUser);

session.flush().then(function() {
  // all changes will be persisted
});

Isolating Changes

var user = session.load(App.User, 1);

// this create a "fork" of the session
var childSession = session.newSession();

// this user will be a separate instance from `user`
var childUser = childSession.load(App.User, 1);

user === childUser; // false, they are separate instances
user.isEqual(childUser); // true, key based comparison

childUser.name = 'derp'; // this will not affect `user`

// flush changes immediately to the parent session and server
childSession.flush();

Merging Changes - Under the Hood

$.getJSON('/users/1', function(data) {
  var user = App.User.create(data);
  session.merge(user);
});

var socket = io.connect('http://localhost');
socket.on('user', function (data) {
  var user = App.User.create(data);
  session.merge(user);
});

Naive Sync

What if...

• Updates happen while request is in transit?
• Error handling?

EPF Sync

EPF Sync

Roadmap

• Implement low hanging features
• Cleanup some internals (better perf)
• Improved collections (pagination, etc.)
• Socket Adapter
• Starter kit

Future

REST vs. Sockets

Realtime?

Differential Synchronization

by Neil Fraser

That is all.

Gordon L. Hempton / @ghempton / GroupTalent / epf.io

Thanks

Tom Dale, Yehuda Katz, Stefan Penner, and all the ED contributors

Ray Bunnage and heartsentwined for early adoption