Tastebuds Radio - a rapidly developed Ember.js app

Transcript

1. Connect through music Thursday, 13 December 12
2. What is Tastebuds? ? 2 Marriages (we know of) ‘A dazzlingly slick and intuitive site with enormous potential for growth’ 2 Million messages 100,000 users Meet people who share your taste in music Thursday, 13 December 12
3. We’ve made some waves One of ‘10 Exciting European Startups from 2011’ TV COVERAGE Thursday, 13 December 12
4. Our Users 18-25: 58% 26-30: 21% 31+: 21% 48% new to online dating Thursday, 13 December 12
5. Brand Notoriety “Coldplay fans least likely to have sex on first date” The Sun, Metro, NME.com, Time.com 12,000 Facebook Likes “Worst album covers of all time” 800,000 Facebook Likes 12,000 Tweets Class, style, sophistication, taste - its nice to see all of these absent. @stephenfry Thursday, 13 December 12
6. In the Wild Facebook HQ Menlo Park California Thursday, 13 December 12
7. Thursday, 13 December 12
8. Team Julian Keenaghan Co-Founder / Developer Previously Senior Developer at Spoonfed Media. Guitarist. Alex Parish Co-Founder / Designer Previously Technical Director at Edelman & Spook Media. Bass Guitarist. Stephen Best Developer Previously Head of Technology at various London startups. Metal Bassist. Alex and Julian met in September 2007 as part of the instrumental rock group, ‘Years of Rice and Salt’. After incorporating Tastebuds in November 2010, they took part in the Springboard Accelerator programme in Cambridge in Summer 2011. Mariusz Bari Community Manager Previously Community Manager at LD50 music community. Electro DJ Thursday, 13 December 12
9. Tastebuds on Spotify • Spotify app launched May 2012 covered by Wired.co.uk, Mashable, TechCrunch, Bloomberg TV, The Metro • Meet new people using the music you listen to on Spotify Thursday, 13 December 12
10. Search Thursday, 13 December 12
11. Events Thursday, 13 December 12
12. Radio Thursday, 13 December 12
13. What is Tastebuds Radio? A new, fun way to explore and interact with the profiles and song selections of your most musically compatible peers. • Scrolling list of matched users • Each face plays a song • Like • Comment Thursday, 13 December 12
14. What is Tastebuds Radio? Quick Demo Thursday, 13 December 12
15. Now the science part ... • Rails • Heroku • Postgres • MongoDB • Pusher Thursday, 13 December 12
16. And Now .... Thursday, 13 December 12
17. The Radio project began in late September Ember version // Last commit: 55d2d23 (2012-09-07 16:48:14 +0100) Design / planning ~ 1 week Prototype ~ 1 week Polished MVP ~ 1 week Feature complete ~ 2 weeks Thanks to Ember! Thursday, 13 December 12
18. Thursday, 13 December 12
19. 1 2 Buds = {} 3 window.Buds = Buds 4 5 Buds.Controller = Em.ObjectController.extend() 6 Buds.ArrayController = Em.ArrayController.extend() 7 Buds.View = Em.View.extend() 8 Buds.CollectionView = Em.CollectionView.extend() 9 Buds.ContainerView = Em.ContainerView.extend() 10 Buds.Router = Em.Router.extend() 11 Buds.O = Em.Object.extend() 12 Buds.Mixin = Em.Mixin 13 Buds.Noop = Em.K 14 Base Classes This is your app first and an Ember app second. Define your own objects and APIs where possible Thursday, 13 December 12
20. 2 3 Buds.Radio.Playlist = Buds.O.extend 4 profileSongs: {} 5 users: {} 6 orderedSongIds: [] 7 likeIds: [] 8 favouriteIds: [] 9 _cards: [] 10 _fetcher: null 11 12 init: -> 13 @_super() 14 @set('_fetcher', Buds.Radio.SongFetcher.create()) 15 16 fetchMoreSongs: (options) -> 17 @get('_fetcher').fetch(this, options) 18 19 getPlayer: (options) -> 20 throw new Error("Must provide a song to create pl 21 Buds.Radio.Player.create(options) 22 23 favouriteUser: (user) -> 24 return if @isUserFavourited(user) 25 @get('favouriteIds').pushObject(user.get('id')) 26 user.set("isFavourited", true) Core Objects • Playlist - Hides raw data - Gateway to other core objects Thursday, 13 December 12
21. 1 2 Buds.Radio.Player = Buds.O.extend 3 song: null 4 htmlElementId: 'budsPlayer' 5 isPlaying: null 6 scrobbler: null 7 songEndedCallback: Buds.Noop 8 9 init: -> 10 @_super() 11 @set('scrobbler', Buds.Radio.Scrobbler.create(son 12 @set('viewLogger', Buds.Radio.Player.ViewLogger.c 13 22 insertFlashElement: -> 23 unless @get('song') 24 throw new Error("must set song before inserting 25 31 embedUrl = "http://www.youtube.com/apiplayer?vide 32 window.onYouTubePlayerReady = => @youTubeReady.ap 33 window.swfobject.embedSWF(embedUrl, "yt-player", 34 35 play: -> 36 @get('htmlElement').playVideo() 37 38 pause: -> 39 @get('htmlElement').pauseVideo() Core Objects • Playlist - Hides raw data - Gateway to other core objects • Player - Handles playstate - Abstracts YouTube API Thursday, 13 December 12
22. 1 2 Buds.Radio.Player = Buds.O.extend 3 song: null 4 htmlElementId: 'budsPlayer' 5 isPlaying: null 6 scrobbler: null 7 songEndedCallback: Buds.Noop 8 9 init: -> 10 @_super() 11 @set('scrobbler', Buds.Radio.Scrobbler.create(son 12 @set('viewLogger', Buds.Radio.Player.ViewLogger.c 13 22 insertFlashElement: -> 23 unless @get('song') 24 throw new Error("must set song before inserting 25 31 embedUrl = "http://www.youtube.com/apiplayer?vide 32 window.onYouTubePlayerReady = => @youTubeReady.ap 33 window.swfobject.embedSWF(embedUrl, "yt-player", 34 35 play: -> 36 @get('htmlElement').playVideo() 37 38 pause: -> 39 @get('htmlElement').pauseVideo() Core Objects • Playlist - Hides raw data - Gateway to other core objects • Player - Handles playstate - Abstracts YouTube API Card ( user info / pictures ) SongFetcher Scrobbler / ViewLogger Song/Artist/User Factories Thursday, 13 December 12
23. Thursday, 13 December 12
24. 1 Buds.Radio.Router = Buds.Router.extend 2 3 showSong: (router, event) -> 4 router.transitionTo('show', event.context) 5 6 skipSong: (router, event) -> 7 song = event.context 8 Buds.Radio.SkipLogger.create({ song: song }).log() 9 router.send('nextSong', event) 10 11 nextSong: (router, event) -> 12 currentSong = event.context 13 nextSong = App.playlist.nextSong(currentSong) 14 15 if nextSong instanceof Buds.Radio.NoMoreSongsError 16 router.send('fetchMoreCards', callback:-> 17 router.send('nextSong', event) 18 ) 19 else 20 router.transitionTo('show', nextSong) 21 The Router • Actions Thursday, 13 December 12
25. 29 likeSong: (router, event) -> 30 song = event.context 31 App.playlist.likeSong(song, "radio_bottom") 32 33 favouriteUser: (router, event) -> 34 user = event.context 35 App.playlist.favouriteUser(user) 36 37 fetchMoreCards: (router, options) -> 38 return if router.get('cardsController').get('loading', true 39 40 options = options || {} 41 callback = options.callback || Buds.Noop 42 43 router.get('cardsController').set('loading', true) 44 App.playlist.fetchMoreSongs(callback: -> 45 router.get('cardsController').set('loading', false) 46 callback.apply(window) 47 ) The Router • Actions Thursday, 13 December 12
26. 49 root: Em.Route.extend 50 root: Em.Route.extend 51 route: '/' 52 connectOutlets: (router) -> 53 applicationController = router.get('applicationControll 54 applicationController.connectOutlet 55 outletName: 'player' 56 name: 'player' 57 58 applicationController.connectOutlet 59 outletName: 'userProfile' 60 name: 'userProfile' 61 62 applicationController.connectOutlet 63 outletName: 'playerControls' 64 name: 'playerControls' 65 66 applicationController.connectOutlet 67 outletName: 'cards' 68 name: 'cards' 69 The Router • Actions • Setup Thursday, 13 December 12
27. 69 70 index: Em.Route.extend 71 route: '/' 72 connectOutlets: (router) -> 73 firstSong = App.playlist.get("firstSong") 74 router.transitionTo('show', firstSong) 75 76 show: Em.Route.extend 77 route: '/:id' 78 connectOutlets: (router, context) -> 79 if context instanceof Buds.ProfileSong 80 song = context 81 else 82 song = App.playlist.getSong(context.id) 83 The Router • Actions • Setup • Routes Thursday, 13 December 12
28. 84 85 applicationController = router.get('applicationController') 86 applicationController.connectOutlet 87 outletName: 'userProfile' 88 name: 'userProfile' 89 context: song.get("user") 90 91 player = App.playlist.getPlayer 92 song: song 93 songEndedCallback: -> router.send("nextSong", context: song) 94 95 @set('player', player) 96 97 applicationController.connectOutlet 98 outletName: 'player' 99 name: 'player' 100 The Router • Actions • Setup • Routes • Connect outlets Thursday, 13 December 12
29. 100 101 router.get('cardsController').set('currentSong', song) 102 router.get('playerController').set('content', song) 103 router.get('playerController').set('player', player) 104 router.get('playerControlsController').set('content', song) 105 router.get('playerControlsController').set('player', player) 106 107 router.get('userProfileController').set('isLoggedIn', App.isLo 108 router.get('playerController').set('isLoggedIn', App.isLoggedI 109 router.get('playerControlsController').set('isLoggedIn', App.i 110 111 buds.helper.replaceTitle(song.get("title")) The Router • Actions • Setup • Routes • Connect outlets • Pass data Thursday, 13 December 12
30. Controllers and Views Often tightly coupled and therefore I like to keep them together in xxx_controller_view.coffee No Rails 3.1 asset pipeline so we put templates in server-side partials and rendered with the page. (not ideal but quick to develop) Thursday, 13 December 12
31. Controller Responsibility Receives data from router Data transformation (like a presenter) Sends messages to router (outside context of the action helper) Thursday, 13 December 12
32. Thursday, 13 December 12
33. View Responsibility Events from DOM Micro-state - selected item - scroll position - hover state Activate legacy / jQuery plugins - Call functions / plugins on didInsertElement Thursday, 13 December 12
34. Stuff that was hard Interaction with one view must tell another view to resize - We sent a message via the view -> controller -> router -> other controller -> other view Dependency Injection vs contentBindings Integrating with legacy jQuery code / plugins Thursday, 13 December 12
35. Stuff I would recommend Server responsibility Initial state ( javascript and HTML assets ) Persistence ( JSON API ) Minimise coupling to Ember - Use your own classes - Define your own APIs - Keep your logic out of the router - Make porting your app possible Thursday, 13 December 12
36. ¿ ¿ ¿ Questions ? ? ? Thursday, 13 December 12
37. Thursday, 13 December 12