Client Side Applications with Ember.js

Hack Harvard 2013

Transcript

1. Client Side Applications With Ember.js Christopher Meiklejohn @cmeik Sunday, January 20, 13
2. Ember.js: The Dickensian Aspect Christopher Meiklejohn @cmeik Sunday, January 20, 13
3. @cmeik cmeiklejohn@basho.com Sunday, January 20, 13
4. Client Side Applications Runs in browser; authored in JavaScript; data API. Sunday, January 20, 13
5. Client Side Applications GMail, Google+, Basho’s GiddyUp, Rdio Sunday, January 20, 13
6. What is Ember.js? Sunday, January 20, 13
7. MVC Structure Sunday, January 20, 13
8. Data Bindings Sunday, January 20, 13
9. Computed Properties Sunday, January 20, 13
10. Data Bound Declarative Templates Sunday, January 20, 13
11. State Managers Sunday, January 20, 13
12. Declarative Router Sunday, January 20, 13
13. Run Loop Sunday, January 20, 13
14. Ember Data Sunday, January 20, 13
15. Let’s get started! Sunday, January 20, 13
16. Object Model Sunday, January 20, 13
17. Objects and Classes Sunday, January 20, 13
18. App.Person = Ember.Object.extend({ say: function(thing) { alert(thing); } }); var person = App.Person.create(); person.say("Hello Joe."); Sunday, January 20, 13
19. Observers Sunday, January 20, 13
20. App.Person = Ember.Object.extend({ fullNameChanged: function() { console.log('fullNameChanged!'); }.observes('fullName') }); Sunday, January 20, 13
21. App.Person = Ember.Object.extend({ childMarried: function() { console.log('ERMAHGERD!'); }.observes('children.@each.isMarried') }); Sunday, January 20, 13
22. Mixins Sunday, January 20, 13
23. App.Editable = Ember.Mixin.create({ edit: function() { this.set('isEditing', true); }, isEditing: false }); App.CommentView = Ember.View.extend( App.Editable, { template: Ember.Handlebars.compile('...') }); Sunday, January 20, 13
24. Computed Properties Sunday, January 20, 13
25. 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'); Sunday, January 20, 13
26. Controllers Sunday, January 20, 13
27. Controllers ObjectController ArrayController Controller Sunday, January 20, 13
28. Ember.ArrayController.create({ content: [object1, object2] }); Ember.ObjectController.create({ content: object3 }); Sunday, January 20, 13
29. Controllers ObjectController ArrayController Controller Sunday, January 20, 13
30. Controllers ObjectProxy ArrayProxy Sunday, January 20, 13
31. 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'); Sunday, January 20, 13
32. App.presidentController = Ember.ObjectController.create({ contentBinding: 'App.president' }); App.presidentController.get('fullName'); Sunday, January 20, 13
33. Views Sunday, January 20, 13
34. App.PresidentView = Ember.View.create({ templateName: 'president', contentBinding: 'App.president' }); <script type='text/x-handlebars' data-template-name='president'> {{fullName}} </script> Sunday, January 20, 13
35. Run Loop Deferred rendering; change propagation; coalescing. Sunday, January 20, 13
36. 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'); Sunday, January 20, 13
37. The Router and Application Structure Sunday, January 20, 13
38. Application as a series of states Sunday, January 20, 13
39. Application as a series of states hierarchy of views Sunday, January 20, 13
40. Sunday, January 20, 13
41. Sunday, January 20, 13
42. Sunday, January 20, 13
43. Sunday, January 20, 13
44. Nested Outlets Outlet as Controller/View Pair Sunday, January 20, 13
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 testResults}} {{outlet scorecard}} Sunday, January 20, 13
46. <div class="navbar" style="margin-bottom:0"> <div class="navbar-inner"> <a class="brand" href="#">GiddyUp</a> {{outlet projects}} </div> </div> {{outlet scorecards}} {{outlet}} Sunday, January 20, 13
47. Router Application as a series of states and transitions. Sunday, January 20, 13
48. 1. Initialize route, controller and view 2. Load model 3. Initialize with controllers 3. Render template Sunday, January 20, 13
49. 1. call create(); 2. call model(); 3. call setupControllers(); 3. call renderTemplate(); Sunday, January 20, 13
50. GiddyUp.Router.map(function() { this.resource('projects', function() { this.route('show', { path: '/:project_id'); }); }); /** IndexRoute ProjectsRoute (Projects)IndexRoute (Projects)ShowRoute **/ Sunday, January 20, 13
51. GiddyUp.IndexRoute = Ember.Route.extend({ redirect: function() { this.transitionTo('projects'); } }); Sunday, January 20, 13
52. GiddyUp.ProjectsRoute = Ember.Route.extend({ model: function() { return GiddyUp.Project.find(); }, setupController: function(c, projects) { c.set('content', projects); }, renderTemplate: function() { this.render('projects', { outlet: 'projects' }); } }); Sunday, January 20, 13
53. GiddyUp.ProjectsShowRoute = Em.Route.extend({ model: function() { return GiddyUp.Project.find( params.project_id); }, setupController: function(c, project) { c.set('content', project); } }); Sunday, January 20, 13
54. Template Actions Target the view/router with actions. Sunday, January 20, 13
55. <script type='text/x-handlebars' data-template-name='project'> {{#linkTo projects.show this}} {{name}} {{/linkTo}} </script> Sunday, January 20, 13
56. <script type='text/x-handlebars' data-template-name='project'> <button {{action show this}}> {{name}} </button> </script> Sunday, January 20, 13
57. GiddyUp.ProjectsRoute = Ember.Route.extend({ events: { show: function() { alert('cool story, bro'); } } }); GiddyUp.ProjectsView = Ember.View.extend({ show: function() { alert('cool story, bro'); } }); GiddyUp.ProjectsController = Ember.ArrayController.extend({ show: function() { alert('cool story, bro'); } }); Sunday, January 20, 13
58. Ember-Data And Persistence Sunday, January 20, 13
59. Abstract Adapters REST, IndexedDb, etc. Sunday, January 20, 13
60. Asynchronous Proxy; asynchronously populated; lazily loaded. Sunday, January 20, 13
61. Identity Map Client side, in memory-cache. Sunday, January 20, 13
62. Transactional Accumulate updates; commit and rollback. Sunday, January 20, 13
63. State Managers Lifecycle management; isDirty, isClean, isSaving Sunday, January 20, 13
64. 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); Sunday, January 20, 13
65. Demo https://github.com/cmeiklejohn/hack-harvard-2013-demo Sunday, January 20, 13
66. Questions? Sunday, January 20, 13