Ember.js Lunch Talk at Carbon5

Tom Dale and Yehuda Katz discuss their new JavaScript MVC framework Ember.js over lunch at Carbon Five. Video available at http://vimeo.com/36992934.

Transcript

1. A framework for creating ambitious web applications EMBER.JS
2. WHAT IS EMBER?
3. DATA BINDING.
4. COMPUTED PROPERTIES.
5. DATA-BOUND DECLARATIVE TEMPLATES. We want it to be possible to define your view structure declaratively, with its data requirements, and leave code for handling events.
6. MVC STRUCTURE. Rant: MVC/MVVM/ MVP/etc. all mean the same thing * Data * View * Intermediary
7. EMBER MVC. Model Model Model Controller View View View
8. ARRAY CONTROLLER. Person Person Person PeopleController ListView StatsView Button ArrayProxy males draftMales name gender isDrafted
9. OPTIONAL EMBER-DATA.
10. ROLLING IN EMERGING PATTERNS. One of Ember’s main goals to identify common patterns and make them conventional. As patterns emerge, we work to reduce the boilerplate necessary to implement them.
11. WHY?
12. MANAGES COMPLEXITY. Ember aims to reduce the complexity created by the links between many moving pieces by clearly defining how communication occurs between parts of your application.
13. MAKES YOU MORE PRODUCTIVE. Ember’s philosophy is that by eliminating trivial choices and making the answers conventional, you can focus your energy on non-trivial problems. This philosophy is taken directly from Rails.
14. BUILT FOR THE LONG HAUL. 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.
15. OPTIMIZED FOR DEVELOPER HAPPINESS.
16. OBJECT MODEL.
17. Person = Ember.Object.extend({ firstName: null, lastName: null }); CLASSES.
18. 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(); MIXINS.
19. 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(); MIXINS.
20. 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()); MIXINS AND SUPER.
21. 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()); MIXINS AND SUPER.
22. 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')); COMPUTED PROPS.
23. 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')); COMPUTED PROPS.
24. UNIFORM ACCESS IS GREAT FOR REFACTORING.
25. IT ALSO GIVES BINDINGS A SINGLE RULE.
26. >> Core = Ember.Namespace.create(); >> Core.Person = Ember.Person.extend(); >> Core.Person.toString(); => Core.Person >> Core.Person.create().toString(); => <Core.Person:ember157> NAMESPACES.
27. MASSIVELY IMPROVED DEBUGGING.
28. CAN USE NAMES IN CONVENTIONS. This is something Rails does a lot of, and which is hard to do in JS since klass.name is not available in general. We use this extensively in the default REST adapter in ember-data.
29. 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') }); CONVENTIONS.
30. A SINGLE, RICH OBJECT MODEL.
31. THE BASIC RULES APPLY TO ALL KINDS OF OBJECTS.
32. LIKE BACKBONE EVENTS ON STEROIDS. Our goal, again is to wrap up common patterns in the base distribution so that you don’t have to think about them all the time.
33. THE VIEW LAYER.
34. <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul> DATA BOUND.
35. <ul> {{#each App.items}} <li>{{name}}</li> {{/each}} </ul> DATA BOUND.
36. App.items = [ { name: "One" }, { name: "Two" }, { name: "Three" } ]; DATA BOUND.
37. App.items = [ { name: "One" }, { name: "Two" }, { name: "Three" } ]; DATA BOUND. • One • Two • Three
38. App.items.pushObject({ name: "Fourth" }); DATA BOUND.
39. App.items.pushObject({ name: "Fourth" }); DATA BOUND. • One • Two • Three
40. App.items.pushObject({ name: "Fourth" }); DATA BOUND. • One • Two • Three • One • Two • Three • Fourth
41. App.items .objectAt(0) .set('name', '1'); DATA BOUND.
42. App.items .objectAt(0) .set('name', '1'); DATA BOUND. • One • Two • Three • Fourth
43. App.items .objectAt(0) .set('name', '1'); DATA BOUND. • One • Two • Three • Fourth • 1 • Two • Three • Fourth
44. {{#if App.isLoaded}} <div class="content"> <h1>{{App.title}}</h1> <div>{{App.body}}</div> </div> {{else}} <img src="/images/loading.gif"> {{/if}} CONDITIONALS.
45. App = Ember.Application.create(); jQuery.getJSON("/bootstrap", function(json) { App.set('title', json.title); App.set('body', json.body); App.set('isLoaded', true); }); ASYNCHRONY.
46. {{#if App.isLoaded}} <div class="content"> <h1>{{App.title}}</h1> <div>{{App.body}}</div> {{#view App.DashboardView}} {{#each App.widgetsController}} {{view App.Widget widgetBinding="this"}} {{/each}} {{#view Ember.Button target="App.widgetsController" action="newWidget"}} New Widget! {{/view}} {{/view}} </div> {{else}} <img src="/images/loading.gif"> {{/if}} DECLARATIVE.
47. {{#if App.isLoaded}} <div class="content"> <h1>{{App.title}}</h1> <div>{{App.body}}</div> {{view App.DashboardView templateName="dashboard"}} </div> {{else}} <img src="/images/loading.gif"> {{/if}} <!-- dashboard template --> {{#each App.widgetsController}} {{view App.Widget widgetBinding="this"}} {{/each}} {{#view Ember.Button target="App.widgetsController" action="newWidget"}} New Widget! {{/view}} COMPOSABLE.
48. App.ButtonView = Ember.View.extend({ tagName: "button", didInsertElement: function() { this.$().button(); } }); CUSTOMIZABLE.
49. {{#view App.ButtonView}}Hi!{{/view}} CUSTOMIZABLE.
50. App.ButtonView = Ember.ButtonView.extend({ didInsertElement: function() { this.$().button(); } }); CUSTOMIZABLE. Ember’s controls are UI-agnostic, so you can use the semantics (like target/action, text field) without having to back out Ember- supplied UI.
51. {{#view App.ButtonView target="App.widgetController" action="new"}} New Widget {{/view}} CUSTOMIZABLE.
52. <body> <script type="text/x-handlebars"> <!-- view contents here --> </script> </body> TEMPLATES.
53. <head> <script type="text/x-handlebars" data-template-name="name"> <!-- view contents here --> </script> </head> NAMED TEMPLATES.
54. Ember.TEMPLATES["name"] = Ember.Handlebars.compile(string); TEMPLATES.
55. Ember.TEMPLATES["name"] = Ember.Handlebars.compile(string); Ember.TEMPLATES["other"] = function() { return "hi!" }; TEMPLATE API. You will need to do property lookups through .get, so at least a bit of template engine customizability is required. If arbitrary code is allowed, you can even implement observable helpers.
56. BASIC APP ARCHITECTURE
57. ARCHITECTURE. Models Controllers provide data to Views provide data to
58. ARCHITECTURE. Models Controllers trigger events on Views modify
59. ARCHITECTURE. Models Controllers updates Views updates
60. EXAMPLE.
61. FLASHCARDS. Deck, Card CardsController Decks, Deck, Cards 1 deck 10 cards 7 left to study 1 deck 10 cards 7 left to study 1 deck 10 cards
62. FLASHCARDS. Deck, Card CardsController Decks, Deck, Cards create new card create new card 1 deck 11 cards 8 left to study 1 deck 11 cards
63. FLASHCARDS. Deck, Card CardsController Decks, Deck, Cards 1 deck 11 cards 8 left to study new card added left to study goes to 8 render new card update # left
64. RULE OF THUMB.
65. ▪ Models contain persistable data ▪ Controllers proxy models and add client-side application state ▪ Views represent a single representation of persistable or application state RULE OF THUMB.
66. EVOLVING PATTERNS
67. ROUTING.
68. STATE MANAGERS.
69. PERSISTENCE.
70. IMPROVED DEBUGGING. Deferred, asynchronous code can be hard to debug (what caused that callback to be triggered?!) A debug build could provide more information, at the cost of slower performance. We’re also working on and off on a Chrome extension.
71. DOCUMENTATION. Our documentation is sparse and currently focused on the top-down. Generated documentation is coming, as is more information on common patterns not yet encapsulated in code.
72. RAILS INTEGRATION. Ember works well with any (or no) server-side framework. Because Rails and Ember share philosophies, we can leverage conventions on both sides to further reduce boilerplate for people willing to adhere to even more strict rules about file structure and REST APIs.
73. AS PATTERNS SOLIDIFY, WE ROLL THEM IN.
74. SOMETIMES WE GIVE THEM A LITTLE PUSH.
75. THANK YOU.
76. @TOMDALE @EMBERJS EMBERJS.COM GITHUB.COM/EMBERJS IRC #EMBERJS