Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fire with Fire - Building an Ember.js applicati...

Balint Erdi
October 12, 2013

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.

Balint Erdi

October 12, 2013
Tweet

More Decks by Balint Erdi

Other Decks in Technology

Transcript

  1. • Model: contains business logic • Controller: connection between models

    and views • View: renders output (html, json, etc.) MVC Sunday, October 13, 13
  2. • Model: define properties and behavior • Controller: decorate models

    with display logic • View: reusable UI element • Template: render html Components Sunday, October 13, 13
  3. • Objects are long-lived • E.g the same, singleton controller

    can change models As opposed to server- side MVC ... Sunday, October 13, 13
  4. • 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
  5. Why do you need one? • The classic whole page

    reload is dying out • Users need better & swifter UX Sunday, October 13, 13
  6. Why not just use jQuery? • Apps of non-trivial size

    and/or complexity Sunday, October 13, 13
  7. Why not just use jQuery? • Apps of non-trivial size

    and/or complexity • Sprinkling jQuery selectors only goes that far Sunday, October 13, 13
  8. 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
  9. 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
  10. 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
  11. • Backbone • Knockout • Angular • ExtJS • Emberjs

    • ... There are many ... Sunday, October 13, 13
  12. • For building ambitious web applications • Two-way data bindings

    • Computed properties • Routing as a core principle • Convention over Configuration Sunday, October 13, 13
  13. 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
  14. 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
  15. 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
  16. ”URLs are the UI of the web” Tom Dale, core

    Ember.js member Sunday, October 13, 13
  17. 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
  18. 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
  19. Real-time backend • Clients have a local cache • Synchronizes

    data between clients • Notifies clients “real-time” Sunday, October 13, 13
  20. 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
  21. Data storage • Stored in tree-structure • Persisted in JSON

    • Access by node references Sunday, October 13, 13
  22. Authentication • Facebook • Twitter • Github • Persona •

    Email / password • Server-signed token Sunday, October 13, 13
  23. 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
  24. Libraries • SDK for javascript, Objective-C, Java • REST API

    • API wrappers in your favorite language Sunday, October 13, 13
  25. Example applications • Collaborative text editor • Twitter clone •

    Chat • Multiplayer Tetris • Todolist Sunday, October 13, 13
  26. Caveats • Not ideal for domains with complex relationships •

    Very simple query options Sunday, October 13, 13
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. Pricing • Freemium model • Free for <100 MB data,

    5GB transfer, 50 connections • Plans start at $49/mo Sunday, October 13, 13
  33. 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
  34. 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
  35. 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
  36. 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