Building Ambitious Web Applications With Ember.js

Web Unleashed 2012 Presentation

Transcript

1. Building Ambitious Web Applications With Ember.js Christopher Meiklejohn @cmeik Friday, November 9, 12
2. An Introduction To Ember.js Christopher Meiklejohn @cmeik Friday, November 9, 12
3. @cmeik Friday, November 9, 12
4. Basho Friday, November 9, 12
5. What is Ember.js? Friday, November 9, 12
6. MVC Structure Friday, November 9, 12
7. Data Bindings Friday, November 9, 12
8. Computed Properties Friday, November 9, 12
9. Data Bound Declarative Templates Friday, November 9, 12
10. State Managers Friday, November 9, 12
11. Declarative Router Friday, November 9, 12
12. Run Loop Friday, November 9, 12
13. Ember Data Friday, November 9, 12
14. Let’s get started! Friday, November 9, 12
15. Object Model Friday, November 9, 12
16. Objects and Classes Friday, November 9, 12
17. App.Person = Ember.Object.extend({ say: function(thing) { alert(thing); } }); var person = App.Person.create(); person.say("Hello Joe."); Friday, November 9, 12
18. Observers Friday, November 9, 12
19. App.Person = Ember.Object.extend({ fullNameChanged: function() { console.log('fullNameChanged!'); }.observes('fullName') }); Friday, November 9, 12
20. App.Person = Ember.Object.extend({ childMarried: function() { console.log('ERMAHGERD!'); }.observes('children.@each.isMarried') }); Friday, November 9, 12
21. Mixins Friday, November 9, 12
22. App.Editable = Ember.Mixin.create({ edit: function() { this.set('isEditing', true); }, isEditing: false }); App.CommentView = Ember.View.extend( App.Editable, { template: Ember.Handlebars.compile('...') }); Friday, November 9, 12
23. Computed Properties Friday, November 9, 12
24. App.president = Ember.Object.create({ firstName: "Barack", lastName: "Obama", fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.get('fullName'); Friday, November 9, 12
25. Controllers Friday, November 9, 12
26. Controllers ObjectController ArrayController Controller Friday, November 9, 12
27. Ember.ArrayController.create({ content: [object1, object2] }); Ember.ObjectController.create({ content: object3 }); Friday, November 9, 12
28. Controllers ObjectController ArrayController Controller Friday, November 9, 12
29. Controllers ObjectProxy ArrayProxy Friday, November 9, 12
30. App.president = Ember.Object.create({ firstName: "Barack", lastName: "Obama", fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.get('fullName'); Friday, November 9, 12
31. App.presidentController = Ember.ObjectController.create({ contentBinding: 'App.president' }); App.presidentController.get('fullName'); Friday, November 9, 12
32. Views Friday, November 9, 12
33. App.PresidentView = Ember.View.create({ templateName: 'president', contentBinding: 'App.president' }); <script type='text/x-handlebars' data-template-name='president'> {{fullName}} </script> Friday, November 9, 12
34. Run Loop Deferred rendering; change propagation; coalescing. Friday, November 9, 12
35. App.president = Ember.Object.create({ firstName: "George W.", lastName: "Bush", fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.set('firstName', 'Barack'); App.president.set('lastName', 'Obama'); Friday, November 9, 12
36. The Router and Application Structure Friday, November 9, 12
37. Application as a series of states Friday, November 9, 12
38. Application as a series of states hierarchy of views Friday, November 9, 12
39. Friday, November 9, 12
40. Friday, November 9, 12
41. Friday, November 9, 12
42. Friday, November 9, 12
43. Nested Outlets Outlet as Controller/View Pair Friday, November 9, 12
44. <div class="navbar" style="margin-bottom:0"> <div class="navbar-inner"> <a class="brand" href="#">GiddyUp</a> {{outlet projects}} </div> </div> {{outlet scorecards}} {{outlet testResults}} {{outlet scorecard}} Friday, November 9, 12
45. <div class="navbar" style="margin-bottom:0"> <div class="navbar-inner"> <a class="brand" href="#">GiddyUp</a> {{outlet projects}} </div> </div> {{outlet scorecards}} {{outlet}} Friday, November 9, 12
46. State Machine Application as a series of states and transitions. Friday, November 9, 12
47. GiddyUp.Router = Ember.Router.extend({ root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/', redirectsTo: 'projects.index' }), // next slide }) }); Friday, November 9, 12
48. projects: Ember.Route.extend({ route: '/projects', // next slide index: Ember.Route.extend({ route: '/' }), show: Ember.Route.extend({ route: '/:project_id' }); }); Friday, November 9, 12
49. connectOutlets: function(router, context) { router.get('applicationController'). connectOutlet('projects', 'projects', GiddyUp.Project.find()); }, Friday, November 9, 12
50. Serialization The URL as a serialization of application state. Friday, November 9, 12
51. projects: Ember.Route.extend({ route: '/projects', index: Ember.Route.extend({ route: '/' }), show: Ember.Route.extend({ route: '/:project_id' }); }); /projects/ Friday, November 9, 12
52. projects: Ember.Route.extend({ route: '/projects', index: Ember.Route.extend({ route: '/' }), show: Ember.Route.extend({ route: '/:project_id' }) }); /projects/:project_id Friday, November 9, 12
53. serialize: function(router, context) { return context.get('id'): } Friday, November 9, 12
54. Deserialization Deserialize the URL to a position in the state chart. Friday, November 9, 12
55. projects: Ember.Route.extend({ route: '/projects', index: Ember.Route.extend({ route: '/' }), show: Ember.Route.extend({ route: '/:project_id' }) }); /projects/:project_id Friday, November 9, 12
56. deserialize: function(router, params) { var projectId = params.project_id; return GiddyUp.Project.find(projectId); } Friday, November 9, 12
57. Template Actions Target the router with actions. Friday, November 9, 12
58. projects: Ember.Route.extend({ route: '/projects', showProject: Ember.Router. transitionTo('projects.show'), index: Ember.Route.extend({ route: '/' }), show: Ember.Route.extend({ index: '/:project_id' }) }); Friday, November 9, 12
59. <script type='text/x-handlebars' data-template-name='project'> <a {{action showProject this href=true}} >{{name}}</a> </script> Friday, November 9, 12
60. Ember-Data And Persistence Friday, November 9, 12
61. Abstract Adapters REST, IndexedDb, etc. Friday, November 9, 12
62. Asynchronous Proxy; asynchronously populated; lazily loaded. Friday, November 9, 12
63. Identity Map Client side, in memory-cache. Friday, November 9, 12
64. Transactional Accumulate updates; commit and rollback. Friday, November 9, 12
65. State Managers Lifecycle management; isDirty, isClean, isSaving Friday, November 9, 12
66. App.Person = DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string'), birthday: DS.attr('date'), children: DS.hasMany('App.Child'), fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); var person = App.Person.find(1); Friday, November 9, 12
67. Tooling Friday, November 9, 12
68. QUnit https://github.com/emberjs/bootstrap Friday, November 9, 12
69. Ember-Rails https://github.com/emberjs/ember-rails Friday, November 9, 12
70. Iridium https://github.com/radiumsoftware/iridium Friday, November 9, 12
71. Rebar Plugins https://github.com/cmeiklejohn Friday, November 9, 12
72. Questions? Friday, November 9, 12