Experiences & lessons learned from building Vine.co using Ember.js

1. building
.co
Janessa Det (@jandet)
Friday, February 28, 14

2. 10/21
first day at Vine:
“We want to ship a
web experience by
the end of the year.”
Janessa Det | @jandet
Friday, February 28, 14

3. Why Ember?
✦ Single-page app
✦ Classic multi-page app
✦ API-backed
✦ Evolved form of Backbone.js
Janessa Det | @jandet
Friday, February 28, 14

4. Router resources
Router
this.resource('user', { path: '/user/:username' }, function() {
this.route('tv');
});
UserRoute
model: function(params) {
return userService.profile(params);
}
UserIndexRoute | UserTvRoute
model: function() {
var user = this.modelFor('user');
return timelineService.user({id: user.userId});
}
Friday, February 28, 14
Janessa Det | @jandet

5. Current User
CurrentUserController
sessionChanged: (function() {
if (this.get('session.isAuthenticated')) {
this.userService.currentUser().then(function(user) {
this.set('content', user);
}.bind(this)).catch(function(err) {
// handle session expiry, etc.
});
}
}).observes('session.userId').on('init')
Janessa Det | @jandet
Friday, February 28, 14

6. Repeated Elements
TimelineIndexController
TimelineIndexController = Ember.ArrayController.extend({
itemController: 'post'
});
★ All feed timelines
★ TV mode timelines
★ Homepage background vines
★ Widgets with pared down post representations
Janessa Det | @jandet
Friday, February 28, 14

7. How does Vine play
videos?
Post
View
Post
View
Post
View
playing
Vine
Controller
action: play
<video>
</video>
Post
View
Janessa Det | @jandet
Friday, February 28, 14

8. Things I wish I knew
about earlier/better
Ember run loop
lifecycle hooks
register & inject
testing best practices
Janessa Det | @jandet
Friday, February 28, 14

9. Thanks
@jandet
vine.co/jandet
Friday, February 28, 14