And why should you care? WHAT IS EMBER?

■ A standard library for JavaScript ■ Why Ember's bindings are special ■ The view hierarchy ■ Structure and Widgets ■ Routing in Ember 1.0 ■ Managing external data ■ Bringing it all together with a demo EXPECTATIONS.

A STANDARD LIBRARY

JavaScript Language Standard Library (Date, RegExp, etc.) DOM, HTML5, WebGL, etc. jQuery

JavaScript Language Standard Library (Date, RegExp, etc.) DOM, HTML5, WebGL, etc. jQuery Underscore

No content

Ember.Object Events and Observability Inheritance: Mixins and super Getters and Setters

Ember.Object Events and Observability Inheritance: Mixins and super Getters and Setters Proxies (Object and Array)

Ember.Object Events and Observability Inheritance: Mixins and super Getters and Setters Proxies (Object and Array) Enumerables Map and Set

Ember.Object Events and Observability Inheritance: Mixins and super Getters and Setters Proxies (Object and Array) Enumerables Map and Set Array-Likes Enumerable + Indexes (#each)

EMBER-METAL. EMBER-RUNTIME.

EMBER'S BINDINGS

BAKED INTO THE OBJECT MODEL.

Person = Ember.Object.extend({ fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); BINDINGS.

Person = Ember.Object.extend({ fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); leah = Person.create({ firstName: "Leah", lastName: "Silber" }); BINDINGS.

leah = Person.create({ firstName: "Leah", lastName: "Silber" }); yehuda = Person.create({ firstName: "Yehuda", lastName: "Katz", spouse: leah, spouseNameBinding: 'spouse.fullName' }); BINDINGS.

leah = Person.create({ firstName: "Leah", lastName: "Silber" }); yehuda = Person.create({ firstName: "Yehuda", lastName: "Katz", spouse: leah, spouseNameBinding: 'spouse.fullName' }); leah.set('lastName', "Silber-Katz"); yehuda.get('spouseName'); // "Leah Silber-Katz" BINDINGS.

ALWAYS ASYNC.

ALWAYS ASYNC. WHY?

SIDE-EFFECTS. It guarantees you the ability to make all necessary changes before side-effects occur.

yehuda.addObserver('spouseName', function() { $("#me div.spouse span.name") .html(yehuda.get('spouseName')); }); BASIC EXAMPLE. spouseName changes recalculate the new name update the

yehuda.addObserver('spouseName', function() { $("#me div.spouse span.name") .html(yehuda.get('spouseName')); }); // later leah.set('firstName', "Léah"); leah.set('lastName', "Silber-Katz"); BASIC EXAMPLE.

leah.set('firstName', "Léah")

yehuda.spouseName changes recalculate the name update the leah. rstName changes leah.fullName changes leah.set('firstName', "Léah")

yehuda.spouseName changes recalculate the name update the leah. rstName changes leah.fullName changes leah.set('firstName', "Léah") leah.set('lastName', "Silber-Katz")

yehuda.spouseName changes recalculate the name update the leah. rstName changes leah.fullName changes yehuda.spouseName changes recalculate the name update the leah.lastName changes leah.fullName changes leah.set('firstName', "Léah") leah.set('lastName', "Silber-Katz")

leah.set('firstName', "Léah"); // is this even a valid state? leah.set('lastName', "Silber-Katz"); IN-BETWEEN STATE.

REPEATED WORK. recalculate the name update the recalculate the name update the

REPEATED WORK. recalculate the name update the recalculate the name update the 2x

initialize: function() { this.model.on('change', this.render, this); }, render: function() { this.$el.html(this.model.fullName()); } SAME THING.

leah.set({ firstName: "Léah", lastName: "Silber-Katz" }); DO ONE SET? This solves this problem, but it's not always possible. The more you use events, the harder it is to enforce atomic changes.

EMBER? leah.set('firstName', "Léah")

EMBER? leah. rstName changes leah.set('firstName', "Léah")

EMBER? leah. rstName changes leah.set('firstName', "Léah") leah.set('lastName', "Silber-Katz")

EMBER? leah. rstName changes leah.lastName changes leah.set('firstName', "Léah") leah.set('lastName', "Silber-Katz")

EMBER? leah. rstName changes yehuda.spouseName changes recalculate the name update the leah.lastName changes leah.fullName changes leah.set('firstName', "Léah") leah.set('lastName', "Silber-Katz") later...

COLLECTIONS.

App.StatisticsView = Backbone.View.create({ initialize: function() { this.collection.on('all', this.updateRemaining, this); this.collection.on('all', this.updateTotal, this); } render: function() { var list = this.collection; var remaining = "" + list.remaining() + " remaining"; var total = " and " + list.done() + " total"; this.$el.html("

" + remaining + done + "

"); }, updateRemaining: function() { this.$el.find("span.remaining").html(this.collection.remaining()); }, updateTotal: function() { this.$el.find("span.done").html(this.collection.done()); } }); App.TodoCollection = Backbone.Collection.extend({ remaining: function() { return this.filter(function() { return this.get('isDone') === false; }).length; }, done: function() { return this.length - this.remaining(); } }); COLLECTION VIEW.

collection.forEach(function(todo) { todo.set('isDone', true); }); MULTIPLE SETS.

REPEATED WORK.

REPEATED WORK. recalculate remaining update the recalculate total update the recalculate remaining update the recalculate total update the recalculate remaining update the recalculate total update the recalculate remaining update the recalculate total update the Nx

EMBER.

statistics.handlebars

{{remaining}} remaining and {{done}} done

TEMPLATE.

App.TodosController = Ember.ArrayController.extend({ remaining: function() { return this .filterProperty('isDone', false) .get('length'); }.property('@each.isDone'), done: function() { return this.get('length') - this.get('remaining'); }.property('@each.isDone') }); CONTROLLER. An Ember ArrayController serves a similar purpose to a Backbone Collection

TODOS TEMPLATE.

■ Automatic render method ■ Always reuses compiled template ■ Makes the current controller the context ■ Sets up observers on remaining and done properties on the controller ■ Guarantees a single DOM update per turn in the browser's event loop ■ Manages the view hierarchy... STATS TEMPLATE.

VIEW HIERARCHY

AD-HOC. AppView TodoView TodoView TodoView
• TodoView
• TodoView
• TodoView
• Views DOM

YOU END UP WANTING AN ENFORCED HIERARCHY.

Support.CompositeView = function(options) { this.children = _([]); Backbone.View.apply(this, [options]); }; _.extend(Support.CompositeView.prototype, Backbone.View.prototype, { leave: function() { this.unbind(); this.remove(); this._leaveChildren(); this._removeFromParent(); }, renderChild: function(view) { view.render(); this.children.push(view); view.parent = this; }, appendChild: function(view) { this.renderChild(view); $(this.el).append(view.el); }, renderChildInto: function(view, cont) { this.renderChild(view); $(cont).empty().append(view.el); }, _leaveChildren: function() { this.children.chain().clone() .each(function(view) { if (view.leave) view.leave(); }); }, _removeFromParent: function() { if (this.parent) this.parent._removeChild(this); }, _removeChild: function(view) { var index = this.children.indexOf(view); this.children.splice(index, 1); } }); Support.CompositeView.extend = Backbone.View.extend; COMPOSITEVIEW.

JUST THERE.

■ Cleanup on removal ■ Unbinding all bindings and observers registered by child views ■ Unbinding all bindings and observers registered on child views ■ Remove all internal references to eliminate many sources of leaks ■ Lifecycle events: willInsertElement, didInsertElement, willRerender, willRemoveElement, willDestroy WHAT IT BUYS YOU.

ELIMINATION OF BUSYWORK.

{{category}}

{{#each}}

• {{name}} More details

  {{#unless readOnly}} {{view App.EditPerson}} {{/unless}}
{{/each}}

EXAMPLE TEMPLATE.

{{category}}

{{#each}}

• {{name}} More details

  {{#unless readOnly}} {{view App.EditPerson}} {{/unless}}
{{/each}}

EXAMPLE TEMPLATE. append controller.category and register observer on controller.category

{{category}}

{{#each}}

• {{name}} More details

  {{#unless readOnly}} {{view App.EditPerson}} {{/unless}}
{{/each}}

EXAMPLE TEMPLATE. iterate over people array changes rerender item added add to DOM item removed remove from DOM

{{category}}

{{#each}}

• {{name}} More details

  {{#unless readOnly}} {{view App.EditPerson}} {{/unless}}
{{/each}}

EXAMPLE TEMPLATE. people can be any object that mixes in Ember.Array

{{category}}

{{#each}}

• {{name}} More details

  {{#unless readOnly}} {{view App.EditPerson}} {{/unless}}
{{/each}}

EXAMPLE TEMPLATE. append person.name and register observer on person.name

{{category}}

{{#each}}

• {{name}} More details

  {{#unless readOnly}} {{view App.EditPerson}} {{/unless}}
{{/each}}

EXAMPLE TEMPLATE. when the link is clicked, trigger the showPerson event on the router also generate a URL

{{category}}

{{#each}}

• {{name}} More details

  {{#unless readOnly}} {{view App.EditPerson}} {{/unless}}
{{/each}}

EXAMPLE TEMPLATE. only render this area if person.readOnly is false. if that changes add or remove as appropriate

{{category}}

{{#each}}

• {{name}} More details

  {{#unless readOnly}} {{view App.EditPerson}} {{/unless}}
{{/each}}

EXAMPLE TEMPLATE. insert an App.EditPerson child view its context property will be the current person

RESULT. App.ApplicationView {{controller.category}} {{#each}} {{person.name}} {{#unless person.readOnly}} App.EditPersonView

{{unbound category}}

{{#each}}

• {{name}} More details

  {{#unless readOnly}} {{view App.EditPerson}} {{/unless}}
{{/each}}

MORE CONTROL.

{{category}}

{{#each group=true}}

• {{name}} More details

  {{#unless readOnly}} {{view App.EditPerson}} {{/unless}}
{{/each}}

SOON.

DOES THE RIGHT THING BY DEFAULT.

ROUTING

STATE MANAGEMENT.

App.PostsController = Ember.ArrayController.extend(); App.PostController = Ember.ObjectController.extend(); App.PostsView = Ember.View.extend(); App.PostView = Ember.View.extend(); OBJECTS.

application.handlebars

My Blog

{{outlet}} posts.handlebars

{{#each}}
• {{title}}
{{/each}}

post.handlebars

{{title}}

---

TEMPLATES.

Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER.

Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER.

{{#each}}
• {{title}}
{{/each}}

Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER. 1. User clicks link 2. Transition to show state, passing current post 3. Serialize the post via .get('id'), set URL /posts/51 4. Call connectOutlets with the post 5. Replace the main outlet with the PostView, with its controller set to PostController with content of post

Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER. 1. User enters at /posts/51 2. The router transitions into root.posts.show 3. The router nds post = App.Post.find(51) 4. The router calls connectOutlets with post 5. Same as before

STATE MANAGER GOODIES.

LOGGING.

DEBUGGING PRODUCTION APPS.

AVOID IMPOSSIBLE CASES.

DEMO.