building vine.co
DESCRIPTION
Experiences & lessons learned from building Vine.co using Ember.jsTRANSCRIPT
building
Janessa Det (@jandet)
.co
Friday, February 28, 14
10/21first day at Vine:
Janessa Det | @jandet
“We want to ship a web experience by the end of the year.”
Friday, February 28, 14
✦ Single-page app
✦ Classic multi-page app✦ API-backed✦ Evolved form of Backbone.js
Why Ember?
Janessa Det | @jandet Friday, February 28, 14
Router resourcesthis.resource('user', { path: '/user/:username' }, function() {
this.route('tv');
});
Janessa Det | @jandet
model: function(params) {
return userService.profile(params);
}
model: function() {
var user = this.modelFor('user');
return timelineService.user({id: user.userId});
}
Router
UserRoute
UserIndexRoute | UserTvRoute
Friday, February 28, 14
Current User
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
CurrentUserController
Friday, February 28, 14
Repeated Elements
TimelineIndexController = Ember.ArrayController.extend({
itemController: 'post'
});
Janessa Det | @jandet
TimelineIndexController
★ All feed timelines★ TV mode timelines★ Homepage background vines★ Widgets with pared down post representations
Friday, February 28, 14
How does Vine play videos?
Janessa Det | @jandet
VineController
Post View
Post View
Post View
Post View
action: playplaying
<video></video>
Friday, February 28, 14
Things I wish I knew about earlier/better
Janessa Det | @jandet
Ember run looplifecycle hooks
register & injecttesting best practices
Friday, February 28, 14
