building

.co

Janessa Det (@jandet)
Friday, February 28, 14
10/21
first day at Vine:

“We want to ship a
web experience by
the end of the year.”
Janessa Det | @jandet
Friday, February...
Why Ember?
✦ Single-page app
✦ Classic multi-page app
✦ API-backed
✦ Evolved form of Backbone.js

Janessa Det | @jandet
Fr...
Router resources
Router
this.resource('user', { path: '/user/:username' }, function() {
this.route('tv');
});

UserRoute
m...
Current User
CurrentUserController
sessionChanged: (function() {
if (this.get('session.isAuthenticated')) {
this.userServi...
Repeated Elements
TimelineIndexController
TimelineIndexController = Ember.ArrayController.extend({
itemController: 'post'
...
How does Vine play
videos?
Post
View
Post
View
Post
View

playing

Vine
Controller

action: play
<video>
</video>

Post
Vi...
Things I wish I knew
about earlier/better

Ember run loop
lifecycle hooks
register & inject
testing best practices
Janessa...
Thanks
@jandet
vine.co/jandet

Friday, February 28, 14
Upcoming SlideShare
Loading in …5
×

Building Vine.co

1,129
-1

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,129
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building Vine.co

  1. 1. building .co Janessa Det (@jandet) Friday, February 28, 14
  2. 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. 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. 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. 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. 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. 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. 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. 9. Thanks @jandet vine.co/jandet Friday, February 28, 14
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×