Integrating Ember into existing sites

Ember is targeting itself at bring a framework got building JS only web apps. At its core though, Ember has a great object model that can be used even when the whole site is not built using Ember.

I'll walk through a site (http://endlessrotation.com) which isn't a good fit to be a JS only web app, and show how Ember can be used to build just the bits that make sense.

Transcript

1. Ember integrating into existing sites
2. James Croft @james_croft matchingnotes.com
3. MINIFIED I work at
5. Progressive enhancement JS web apps
8. The content needs to be indexable
10. <noscript> </noscript>
17. Computed properties Run loop Bindings Observers
18. 1 {{track-player track=controllers.track}} 1 App.TrackPlayerComponent = Ember.Component.extend 2 setupPlayer: ( -> 3 player = new YT.Player @get('element') 4 @set('player', player) 5 ).on('didInsertElement') 6 7 playVideo: ( -> 8 @get('player').loadVideoById @get('track.videoId') 9 ).observes('track.videoId') 10 11 App.TrackController = Ember.ObjectController.extend()
19. 1 App.ApplicationRoute = Ember.Route.extend 2 actions: 3 playTrack: (track) -> 4 @controllerFor('track').set('content', track) 5 1 <ul> 2 {{#each track in controllers.tracks}} 3 <li> 4 <a {{action playTrack track}}> ▶ </a> 5 {{track.title}} 6 </li> 7 {{/each}} 8 </ul>
20. 1 <li> 2 <a class="play" data-artist="Andhim" data-title="Reeves"> ▶ </a> 3 Andhim - Reeves 4 </li>
21. 1 $('body').on 'click', 'a.play', (e) -> 2 $link = $(this) 3 artist = $link.data('artist') 4 title = $link.data('title') 5 videoId = # Search YouTube for the video 6 7 track = Ember.Object.create 8 artist: artist 9 title: title 10 videoId: videoId 11 12 # Get the track into the application 1 <li> 2 <a class="play" data-artist="Andhim" data-title="Reeves"> ▶ </a> 3 Andhim - Reeves 4 </li>
22. 1 $('body').on 'click', 'a.play', (e) -> 2 $link = $(this) 3 artist = $link.data('artist') 4 title = $link.data('title') 5 videoId = # Search YouTube for the video 6 7 track = Ember.Object.create 8 artist: artist 9 title: title 10 videoId: videoId 11 12 trackController = App.__container__.lookup('controller:track') 13 trackController.set('content', track) 1 <li> 2 <a class="play" data-artist="Andhim" data-title="Reeves"> ▶ </a> 3 Andhim - Reeves 4 </li>
23. __container__
25. 1 2 3 4 5 6 $('body').on 'click', 'a.play', (e) -> 7 $link = $(this) 8 artist = $link.data('artist') 9 title = $link.data('title') 10 videoId = # Search YouTube for the video 11 12 track = Ember.Object.create 13 artist: artist 14 title: title 15 videoId: videoId 16 17
26. 1 App.initializer 2 name: "setup-play-link-handler", 3 initialize: (container, application) -> 4 trackController = container.lookup('controller:track') 5 6 $('body').on 'click', 'a.play', (e) -> 7 $link = $(this) 8 artist = $link.data('artist') 9 title = $link.data('title') 10 videoId = # Search YouTube for the video 11 12 track = Ember.Object.create 13 artist: artist 14 title: title 15 videoId: videoId 16 17 trackController.set('content', track)
29. pjax
30. TURBOLINKS? um, did you just say?
35. 1 view = App.SimilarTracksView.create 2 controller: App.SimilarTracksController.create() 3 4 5 view.appendTo('.similar-tracks')
37. 1 view = App.SimilarTracksView.create 2 controller: App.SimilarTracksController.create() 3 container: App.__container__ 4 5 view.appendTo('.similar-tracks')
38. _________container_________
39. 1 view = App.__container__.lookup('view:recommended-list') 2 view.set('controller', App.SimilarTracksController.create()) 3 4 view.replaceIn('.similar-tracks')
40. •Server rendered HTML •Enhanced using Ember •pjax so that the Ember app is long lived
41. •Ember, not just for single page apps •Just use the bits that you need
42. Questions?
43. James Croft @james_croft matchingnotes.com