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

EmberJS Introduction - T3CON12

9bf3a766e037b9d5a4da0a6f9d0f4f68?s=47 tomdale
October 05, 2012

EmberJS Introduction - T3CON12

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

9bf3a766e037b9d5a4da0a6f9d0f4f68?s=128

tomdale

October 05, 2012
Tweet

Transcript

  1. None
  2. Building Ambitious Web Apps

  3. jQuery

  4. None
  5. Great for manipulating pages. Not so great for building large

    apps.
  6. None
  7. None
  8. None
  9. None
  10. You can simulate an application by having the logic run

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

    can only respond as fast as your server—especially bad on flaky 3G connections
  13. 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.
  14. { 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.
  15. By decoupling the user interface from the typical HTTP request/

    response cycle, you can completely modify how updates are communicated to the client. WebSocket
  16. None
  17. Mobile Cocoa Touch Android SDK Desktop Cocoa .NET Web ?

  18. Mobile Cocoa Touch Android SDK Desktop Cocoa .NET Web

  19. What do client-side frameworks provide?

  20. User Interface Data Persistence Application Architecture

  21. User Interface HTML+CSS Data Persistence ? Application Architecture ?

  22. User Interface HTML+CSS Data Persistence Application Architecture

  23. User Interface View Data Persistence Model Application Architecture Controller

  24. MVC

  25. Enhance JavaScript

  26. Classes Person = Ember.Object.extend({ firstName: null, lastName: null });

  27. 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();
  28. 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();
  29. 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());
  30. 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'));
  31. Uniform Access

  32. “ 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.
  33. 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]!
  34. 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') });
  35. Application Structure

  36. Model View Controller

  37. Model View Controller Router

  38. Router •ORMs model persistent state as objects •The router models

    application state as objects •Maps the browser‘s URL to app state
  39. Router Private Blog Not Logged In Logged In Index Show

    Post Edit Post
  40. Router Private Blog Not Logged In Logged In Index Show

    Post Edit Post
  41. Router Private Blog Not Logged In Logged In Index Show

    Post Edit Post /login
  42. Router /posts Private Blog Not Logged In Logged In Index

    Show Post Edit Post
  43. Router /post/123 Private Blog Not Logged In Logged In Index

    Show Post Edit Post
  44. Advantages •Never be in an unknown state •Find errors faster

    •Create a map of user actions
  45. TypeError: Cannot call method 'showPhoto' of undefined

  46. 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"
  47. Why Ember?

  48. 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.
  49. 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.
  50. •Manages complexity •MIT-licensed •More productive •Aggressively rolls in best practices

    •Built for the long haul
  51. As patterns solidify, we roll them in.

  52. Sometimes we give them a little push.

  53. Thank you. Questions? http://plus.tomdale.net http://emberjs.com