Ember background basics
0 likes3,100 views
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.
![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)
}](https://image.slidesharecdn.com/emberbackgroundbasics-131123053223-phpapp02/85/Ember-background-basics-18-320.jpg)
![!
!
!
!
!
!
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)](https://image.slidesharecdn.com/emberbackgroundbasics-131123053223-phpapp02/85/Ember-background-basics-29-320.jpg)
Ember background basics
- 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
- 4. Some small things first
- 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
- 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?
- 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
- 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) }
- 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)
- 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!
- 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 !