Fire with Fire - Building an Ember.js application on Firebase

I gave this talk at the Geek Gathering conference (http://thegeekgathering.org/), on 10/12/2013, in Osijek, Croatia.

Transcript

1. Fire with Fire Building an Ember.js application on Firebase Sunday, October 13, 13
2. Sunday, October 13, 13
3. Ember.js Sunday, October 13, 13
4. A love story Sunday, October 13, 13
5. A rough start Sunday, October 13, 13
6. Sunday, October 13, 13
7. Affection with occasional, mild frustration Sunday, October 13, 13
8. Sunday, October 13, 13
9. Sunday, October 13, 13
10. Boundless love Sunday, October 13, 13
11. Sunday, October 13, 13
12. Sunday, October 13, 13
13. Sunday, October 13, 13
14. Sunday, October 13, 13
15. Balint Erdi Ember.js / Rails consultant @baaz http://balinterdi.com Sunday, October 13, 13
16. A client-side (MVC) framework to build ambitious web apps Sunday, October 13, 13
17. Server-side MVC frameworks Sunday, October 13, 13
18. • Model: contains business logic • Controller: connection between models and views • View: renders output (html, json, etc.) MVC Sunday, October 13, 13
19. Sunday, October 13, 13
20. Objects live for the duration of the request Sunday, October 13, 13
21. Client-side MVC frameworks Sunday, October 13, 13
22. • Model: define properties and behavior • Controller: decorate models with display logic • View: reusable UI element • Template: render html Components Sunday, October 13, 13
23. As opposed to server- side MVC ... Sunday, October 13, 13
24. • Objects are long-lived As opposed to server- side MVC ... Sunday, October 13, 13
25. • Objects are long-lived • E.g the same, singleton controller can change models As opposed to server- side MVC ... Sunday, October 13, 13
26. • Objects are long-lived • E.g the same, singleton controller can change models • State is not only maintained in the model layer As opposed to server- side MVC ... Sunday, October 13, 13
27. Why do you need one? • The classic whole page reload is dying out • Users need better & swifter UX Sunday, October 13, 13
28. Why not just use jQuery? Sunday, October 13, 13
29. Why not just use jQuery? • Apps of non-trivial size and/or complexity Sunday, October 13, 13
30. Why not just use jQuery? • Apps of non-trivial size and/or complexity • Sprinkling jQuery selectors only goes that far Sunday, October 13, 13
31. Why not just use jQuery? • Apps of non-trivial size and/or complexity • Sprinkling jQuery selectors only goes that far • Gives structure to your code Sunday, October 13, 13
32. Why not just use jQuery? • Apps of non-trivial size and/or complexity • Sprinkling jQuery selectors only goes that far • Gives structure to your code • Let someone else do the hard stuff Sunday, October 13, 13
33. Why not just use jQuery? • Apps of non-trivial size and/or complexity • Sprinkling jQuery selectors only goes that far • Gives structure to your code • Let someone else do the hard stuff • Less bugs Sunday, October 13, 13
34. • Backbone • Knockout • Angular • ExtJS • Emberjs • ... There are many ... Sunday, October 13, 13
35. Why Ember.js? Sunday, October 13, 13
36. • For building ambitious web applications • Two-way data bindings • Computed properties • Routing as a core principle • Convention over Configuration Sunday, October 13, 13
37. Two-way data bindings {{input type="text" value=firstName}} • Binds two properties together • So that one changes, the other gets updated. Sunday, October 13, 13
38. Computed properties • Property depending on other properties • Gets updated iff any of the dependent properties change • Value is cached fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') Sunday, October 13, 13
39. Single source of truth • Made possible by bindings and computed properties • In your objects • Prevents out-of-sync data • Less code to write and get wrong Sunday, October 13, 13
40. Routing as a core principle Sunday, October 13, 13
41. ”URLs are the UI of the web” Tom Dale, core Ember.js member Sunday, October 13, 13
42. Sunday, October 13, 13
43. Sunday, October 13, 13
44. Separation of concerns Sunday, October 13, 13
45. Restores application state Sunday, October 13, 13
46. CoC • A lot less code to write • “Make a problem go away by not doing it the wrong way” (Stefan Penner) • Work with the framework Sunday, October 13, 13
47. Stable, used in production Sunday, October 13, 13
48. Firebase Sunday, October 13, 13
49. 10.000 feet view • Real-time backend, no backend code • Automatic scaling out (and down) • Security built-in • May forgo the need for servers Sunday, October 13, 13
50. Real-time backend • Clients have a local cache • Synchronizes data between clients • Notifies clients “real-time” Sunday, October 13, 13
51. Auto-scaling • FiB calculates minimum set of updates to keep all clients in sync • FiB API functions scale with the size of data • No code changes needed Sunday, October 13, 13
52. Data storage • Stored in tree-structure • Persisted in JSON • Access by node references Sunday, October 13, 13
53. Data storage Sunday, October 13, 13
54. Authentication • Facebook • Twitter • Github • Persona • Email / password • Server-signed token Sunday, October 13, 13
55. Authorization • Flexible, location-based • Mirrors the structure of your data • .read, .write and .validate rules • Universal access or based on auth data, time, etc. • Enforced by Firebase Sunday, October 13, 13
56. Libraries • SDK for javascript, Objective-C, Java • REST API • API wrappers in your favorite language Sunday, October 13, 13
57. Integrations • BackFire • AngularFire • Ton of unofficial bindings and wrapping libraries Sunday, October 13, 13
58. Example applications • Collaborative text editor • Twitter clone • Chat • Multiplayer Tetris • Todolist Sunday, October 13, 13
59. Caveats • Not ideal for domains with complex relationships • Very simple query options Sunday, October 13, 13
60. Setting up references var dbRef = new Firebase('https://my-app.firebaseio.com'); var usersRef = dbRef.child('users'); var wilmaRef = dbRef.child('users/wilma'); // or usersRef.child('wilma'); var rootRef = usersRef.parent(); Sunday, October 13, 13
61. Writing data • “set()” clobbers previous data at location • “update()” keeps other data intact • “push()” to create unique child names in arrays • callback when data is persisted wilmaRef.update({ first: “Vilma”, last: “Erdi” }, function(error) { if(!error) { console.log('Data saved’); } }); Sunday, October 13, 13
62. Reading data • Through async callbacks • Local data immediately • Any time data changes => snapshot • value, child_added, child_changed, child_removed, child_moved wilmaRef.on('value', function(snapshot) { console.log('First name is ' + snapshot.val().firstName); }); Sunday, October 13, 13
63. Ordering & limiting • ordering by priority • limit(), startAt(), endAt() • they can be combined var usersList = usersRef.limit(10); usersList.on('child_added', function() { ... }); usersList.on('child_removed', function() { ... }); Sunday, October 13, 13
64. Transactions • For concurrency-safe writes var countRef = dbRef.child('total_messages'); countRef.transaction(function(currentValue) { return currentValue + 1; }); Sunday, October 13, 13
65. Managing presence • “onDisconnect” handler • a special location that reflects the user’s availability • server timestamps • => a great fit for offline applications var lastOnline = usersRef.child('wilma/lastOnline'); lastOnline.onDisconnect().set(Firebase.ServerValue.TIMESTAMP); Sunday, October 13, 13
66. Sunday, October 13, 13
67. Pricing • Freemium model • Free for <100 MB data, 5GB transfer, 50 connections • Plans start at $49/mo Sunday, October 13, 13
68. Customers Sunday, October 13, 13
69. The synergy Sunday, October 13, 13
70. ember-firebase-adapter Sunday, October 13, 13
71. ember-firebase-adapter • abstraction layer between ember and firebase • sits on top of ember-data • a DSL to work with client-side models • uses an old version of ember-data Sunday, October 13, 13
72. App.Idea = DS.Firebase.LiveModel.extend({ title: DS.attr('string'), votes: DS.hasMany('App.Vote', { live: true }), timestamp: DS.attr('date'), voteCount: Ember.computed.alias('votes.length'), }); Sunday, October 13, 13
73. emberFire Sunday, October 13, 13
74. Ember bindings for Firebase • A thin wrapper • EmberFire.Object and EmbeFire.Array • Make array and object Ember API work • 140 LOC Sunday, October 13, 13
75. Ideavote Case in point, built by yours truly Sunday, October 13, 13
76. Project specifics • SPA to vote on and submit ideas • built for the Budapest Clojure User Group • ~280 LOC of client-side code • ~120 LOC template code Sunday, October 13, 13
77. Demotime! http://github.com/balinterdi/ideavote Sunday, October 13, 13
78. Sunday, October 13, 13
79. Thirsty for more? http://emberjs.balinterdi.com Sunday, October 13, 13
80. Thank you. Qs? @baaz http://emberjs.balinterdi.com Sunday, October 13, 13