EmberJS Introduction - T3CON12

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

Transcript

2. Building Ambitious Web Apps
3. jQuery
5. Great for manipulating pages. Not so great for building large apps.
10. You can simulate an application by having the logic run on the server, and serving a series of pages
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
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