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

EmberJS Introduction - T3CON12

tomdale
October 05, 2012

EmberJS Introduction - T3CON12

Introduction to Ember.js, presented at the TYPO3 conference in Stuttgart, Germany.

tomdale

October 05, 2012
Tweet

More Decks by tomdale

Other Decks in Technology

Transcript

  1. You can simulate an application by having the logic run

    on the server, and serving a series of pages
  2. 500ms The problem with this is that your user interface

    can only respond as fast as your server—especially bad on flaky 3G connections
  3. Fix this by moving *all* of the logic to the

    client. The client has all of the application logic and HTML templates to render in the browser.
  4. { name: "Christian", occupation: "Engineer" } Instead of sending HTML,

    send JSON. Only request data that the client has not yet loaded. Instant response when showing data that has already been fetched.
  5. By decoupling the user interface from the typical HTTP request/

    response cycle, you can completely modify how updates are communicated to the client. WebSocket
  6. MVC

  7. Mixins Speaker = Ember.Mixin.create({ hello: function() { var first =

    this.get('firstName'), last = this.get('lastName'); alert(first + " " + last + ": HELLO!") } }); Person = Ember.Object.extend(Speaker); Person.create({ firstName: "Yehuda", lastName: "Katz" }).hello();
  8. Mixins Speaker = Ember.Mixin.create({ hello: function() { var first =

    this.get('firstName'), last = this.get('lastName'); alert(first + " " + last + ": HELLO!") } }); Person = Ember.Object.extend(Speaker); Person.create({ firstName: "Yehuda", lastName: "Katz" }).hello();
  9. Mixins + super Speaker = Ember.Mixin.create({ hello: function() { var

    first = this.get('firstName'), last = this.get('lastName'); return first + " " + last + ": HELLO"; } }); Dog = Ember.Object.extend(Speaker, { hello: function() { return this._super() + " THIS IS DOG"; } }); var phil = Dog.create({ firstName: "Budweiser", lastName: "Phil", hello: function() { return this._super() + " ZAAAAAAAA"; } }); alert(phil.hello());
  10. Computed Properties Person = Ember.Object.extend({ fullName: function() { return this.get('firstName')

    + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); var yehuda = Person.create({ firstName: "Yehuda", lastName: "Katz" }); alert(yehuda.get('fullName'));
  11. “ Bertrand Meyer Uniform Access All services offered by a

    module should be available through a uniform notation, which does not betray whether they are implemented through storage or through computation.
  12. Namespaces >> Core = Ember.Namespace.create(); >> Core.Person = Ember.Person.extend(); >>

    Core.Person.toString(); => Core.Person >> Core.Person.create().toString(); => <Core.Person:ember157> No more [object Object]!
  13. Names in Conventions App.Post = DS.Model.extend({ title: DS.attr('string'), body: DS.attr('string')

    }); // vs. App.Post = DS.Model.extend({ collectionURL: "/posts", singleURL: "/post", title: DS.attr('string'), body: DS.attr('string') });
  14. Router •ORMs model persistent state as objects •The router models

    application state as objects •Maps the browser‘s URL to app state
  15. Entered state "notLoggedIn" Sent event "enterCredentials" Entered state "loggedIn" Entered

    state "loggedIn.index" Sent event "showPost" Entered state "loggedIn.showPost" Could not respond to event "editPost" in state "loggedIn.showPost"
  16. Ember is not a throwaway weekend project or a corporate-sponsored

    project. It is built by and for the Ember community, an open source project first and only.
  17. 100% Open Source Built by the Community Ember is not

    a throwaway weekend project or a corporate-sponsored project. It is built by and for the Ember community, an open source project first and only.