Ember & Firebase

A talk about Ember.js and Firebase (through EmberFire)
Given at EmberLondon on Wednesday 13th November 2013

Transcript

1. Ember Firebase Matthew Rudy Jacobs Wednesday 13th November 2013 @ EmberLondon
2. Meteor
5. Meteor is great
6. but it’s all or nothing
8. me
9. me playing on my phone
10. What can we steal?
11. Meteor • Pure Javascript • Live page updates • Clean, powerful data synchronisation • Latency compensation • Hot Code Pushes • Sensitive code runs in a privileged environment • Fully self-contained application bundles • Interoperability • Smart Packages
12. Meteor • Pure Javascript • Live page updates • Clean, powerful data synchronisation • Latency compensation • Hot Code Pushes • Sensitive code runs in a privileged environment • Fully self-contained application bundles • Interoperability • Smart Packages
13. Clean, powerful data synchronisation
14. 㟬తᢋ኷ඒ create data here
15. 㟬తᢋ኷ඒ create data here 㟬తᢋ኷ඒ synchronise it here
16. 㟬తᢋ኷ඒ create data here 㟬తᢋ኷ඒ synchronise it here 㟬తᢋ኷ඒ here
17. 㟬తᢋ኷ඒ create data here 㟬తᢋ኷ඒ synchronise it here 㟬తᢋ኷ඒ 㟬తᢋ኷ඒ here and here
18. Firebase
19. “a hosted JSON object store with built for data synchronisation”
20. https://ember-meteor-leaderboard.firebaseio.com
21. https://ember-meteor-leaderboard.firebaseio.com/players
22. https://ember-meteor-leaderboard.firebaseio.com/players/- J8362Vcevu362WAYmYI
23. https://ember-meteor-leaderboard.firebaseio.com/players/- J8362Vcevu362WAYmYI/name
24. uri = “https://example.firebaseio.com/players” ref = new Firebase uri ! keys = []; players = [] ! ref.on ‘child_added’, (snapshot) -> keys.push snapshot.name() players.push snapshot.val()
25. Ada ada = ref.child(‘- J8362Vcevu362WAYmYI’)
26. Ada ada = ref.child ‘- J8362Vcevu362WAYmYI’ ! ada.set name: “Augusta Ada Byron”
27. Ada ada = ref.child ‘- J8362Vcevu362WAYmYI’ ! ada.set name: “Augusta Ada Byron”
28. Ada ada = ref.child ‘- J8362Vcevu362WAYmYI’
29. Ada ada = ref.child ‘- J8362Vcevu362WAYmYI’ ! ada.update score: 100
30. Ada ada = ref.child ‘- J8362Vcevu362WAYmYI’ ! ada.update score: 100
31. Albert ref.push name: “Albert Einstein” score: 0
32. Albert ref.push name: “Albert Einstein” score: 0
33. Albert ref.push name: “Albert Einstein” score: 0
34. Albert ref.push name: “Albert Einstein” score: 0 ! # ref.on ‘child_added’, # (snapshot) -> # keys.push snapshot.name() # players.push snapshot.val()
35. Albert albert = players[6] ! # Object {_type: "object", name: "Albert Einstein", score: 0}
36. Firebase also does more stuff;
37. Authentication
38. Permissions
39. Ranges
40. Ordering
41. …
42. EmberFire
43. https://github.com/firebase/ emberFire
44. EmberFire.Object EmberFire.Object = Ember.ObjectProxy.extend init: -> @set ‘content’, {} @ref.on ‘value’, (snapshot) -> @set ‘content’, snapshot.val() , @ ! setUnknownProperty: (key, value) -> @ref.child(key).set(value)
45. EmberFire.ObjectArray EmberFire.Ember.ArrayProxy.extend init: -> @set ‘content’, Ember.A([]) @set ‘keys’, Ember.A([]) ! @ref.on “child_added”, (snapshot) -> object = EmberFire.Object.create ref: snapshot.ref() @get(‘content’).pushObject object @get(‘keys’).pushObject snapshot.name() ! @ref.on “child_removed”, (snapshot) -> idx = @get(‘keys’).indexOf(snapshot.name()) @get(‘content’).removeAt idx @get(‘keys’).removeAt idx
46. Use it uri = “https://example.firebaseio.com/players” ! playerList = EmberFire.ObjectArray.create ref: new Firebase uri ! playerList.mapProperty(‘name') ! # ["Claude Shannon”, "Nikola Tesla", # "Carl Friedrich Gauss”, ”Marie Curie”, # ”Grace Hopper", "Ada Lovelace"]
47. Use it ada = playerList.get ‘lastObject’ ada.incrementProperty ‘score’, 10 ! playerList.pushObject name: “Albert Einstein” score: 0
49. Take each Meteor example
50. and make it all Ember!
51. Meteor Players = new Meteor.Collection “players” ! if Meteor.isClient Template.leaderboard.players = -> Players.find {}, sort: score: -1 name: 1 ! <div class="leaderboard"> {{#each players}} {{> player}} {{/each}} </div>
52. ember-meteor App.LeaderboardRoute = Ember.Route.extend model: -> @get(‘store’).find('player') ! App.LeaderboardController = Ember.ArrayController.extend playerSorting: ["score:desc", "name:asc"] players: Ember.computed.sort('content', ‘playerSorting') ! <div class="leaderboard"> {{#each player in players}} {{render 'player' player}} {{/each}} </div>
53. ember-meteor + emberfire App.PlayerList = EmberFire.ObjectArray.extend firebaseURI: "https://ember-meteor-leaderboard.firebaseio.com/players" ! init: -> firebase = new Firebase @get(‘firebaseURI’) @set ‘ref', firebase @_super() ! App.LeaderboardRoute = Ember.Route.extend model: -> App.PlayerList.create() ! App.LeaderboardController = Ember.ArrayController.extend players: (-> Ember.ArrayProxy.createWithMixins Ember.SortableMixin, content: @get(‘content') sortProperties: ['score'] sortAscending: false ).property(‘content’) ! <div class="leaderboard"> {{#each player in players}} {{render 'player' player}} {{/each}} </div>
54. There’s still a lot of work!
55. https://github.com/ember-meteor
56. @matthewrudy
57. Thanks!