http://github.com/sideshowcoder/javascript-workshop

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
!