This document provides an introduction to Ember.js and discusses some of its core concepts and patterns. It explains that Ember uses an observer pattern where objects called observables maintain lists of dependent observer objects that are notified of state changes. It also discusses how Ember implements an asynchronous run loop and single source of truth model layer for data binding and decoupling different parts of the application.

1. Basics for Ember.js
An introduction and some history

2. Stuck? Here are some resources…
•
https://developer.mozilla.org/en-US/
•
http://underscorejs.org
•
http://pivotal.github.io/jasmine/
•
http://www.2ality.com/2013/06/basic-javascript.html
•
http://www.2ality.com/2013/07/meta-style-guide.html

3. Getting better…
•
http://exercism.io/
•
Read Code:
•
https://github.com/jashkenas/underscore/blob/master/
underscore.js
•
https://github.com/jashkenas/backbone/blob/master/
backbone.js
•
https://github.com/emberjs/ember.js/tree/master/
packages

4. Some small things first

5. function.bind

6. function foo(bar) {
console.log(bar)
return bar
}
!
var f = foo.bind(null, "hello world")
console.log(typeof f) // function
f() // outputs hello world

7. Passing functions around

8. function Ork() {
this.description = "I am an Ork"
}
!
Ork.prototype.describe = function() {
console.log(this.description)
}
!
var ork = new Ork()
ork.describe() // I am an Ork
!
setTimeout(ork.describe, 100) // undefined
setTimeout(ork.describe.bind(ork), 100) // I am an Ork

9. MVC != MVC

10. Server-side MVC is not the only way!

11. Rails MVC

12. Observers

13. Embers MVC relies on Observers

14. Observers are a central part to MVC here

15. So what is the observer pattern?

16. http://addyosmani.com/resources/essentialjsdesignpatterns/
book/

17. “The observer pattern is a software design pattern in
which an object, called the subject, maintains a list of
its dependents, called observers, and notifies them
automatically of any state changes, usually by calling
one of their methods.” — Wikipedia

18. Observable
functions Ork(name) {
this.name = name
this._observers = []
}
!
Ork.prototype.smash = function(thing) {
this._observers.forEach(function(o) {
o.notify(this, "smashed " + thing);
}, this)
}
!
Ork.prototype.registerObserver = function(observer) {
this._observers.push(observer)
}

19. Observer
function OrkMaster(name) {
this.name = name
}
!
OrkMaster.prototype.notify = function(ork, message) {
console.log(this.name + " here " +
ork.name + " told me he "
+ message)
}
!
OrkMaster.prototype.observe = function(ork) {
ork.registerObserver(this)
}

20. Putting it all together
var master = new OrkMaster("Uruk-hai")
var gobgrub = new Ork("Gobgrub")
var nazsnaga = new Ork("Nazsnaga")
!
master.observe(gobgrub)
master.observe(nazsnaga)
!
gobgrub.smash("human")
nazsnaga.smash("drawf")
!
// Uruk-hai here Gobgrub told me he smashed human
// Uruk-hai here Nazsnaga told me he smashed drawf

21. http://jsfiddle.net/sideshowcoder/fRDDL/

22. JavaScript already offers this via events

23. Evented Observerable
function Ork(name) {
this.name = name
var _e = document.createElement("div")
this.dispatchEvent = _e.dispatchEvent.bind(_e)
this.addEventListener = _e.addEventListener.bind(_e)
}
!
Ork.prototype.smash = function(thing) {
var evData = { message: "smashed " + thing, ork: this }
var ev = new CustomEvent("orkevent", { detail: evData })
this.dispatchEvent(ev)
}

24. Evented Observer
function OrkMaster(name) {
this.name = name
}
!
OrkMaster.prototype.handleEvent = function(ev) {
var ork = ev.detail.ork
var message = ev.detail.message
console.log(this.name + " here " +
ork.name + " told me he "
+ message)
}
!
OrkMaster.prototype.observe = function(ork) {
var handler = this.handleEvent.bind(this)
ork.addEventListener("orkevent", handler)
}

25. http://jsfiddle.net/sideshowcoder/5cPAg/

26. Why do all this?

27. Decoupling

28. Automatic updates, or Data Binding

29. !
!
!
!
!
!
function Ork() {
this._observers = []
}
Ork.prototype.setName = function(name) {
this.name = name
this._observers.forEach(function(o) {
o.notify(this)
}, this)
}
Ork.prototype.addObserver = function(observer) {
this._observers.push(observer)
}
var nameObserver = {
notify: function(ork) {
document.getElementById("ork-name").innerHTML = ork.name
}
}
var ork = new Ork()
ork.addObserver(nameObserver)
ork.setName("Bar")
setTimeout(function() {
ork.setName("Gobgrub")
}, 1000)

30. http://jsfiddle.net/sideshowcoder/GLfbn/

31. http://jsfiddle.net/sideshowcoder/J2Cn6/

32. Only the model is the source for data

33. There is not “It’s over after the request is done”

34. The Run Loop

35. Ember.run

36. “…is a programming construct that waits for and
dispatches events or messages in a program”
!
Thanks Wikipedia!

37. https://machty.s3.amazonaws.com/ember-runloop-visual/index.html

38. Why in Ember?

39. Ember needs some boundaries!

40. Model layer is “THE TRUTH”™

41. Performance

42. MVCs all the way down

43. The Routes / Router are the “Grand Daddy”

44. Ember did not invent this

45. Ember ~ Sproutcore ~ Cocoa

46. If you want to understand Ember look at Cocoa
!
And listen to Yehuda Katz…
!
http://www.youtube.com/watch?v=s1dhXamEAKQ
!