Bindings: The Zen of Montage

Montage is a web application framework that places an emphasis on reacting to changes to properties of objects and the content of collections. FRB are Functional Reactive Bindings, the new implementation of bindings coming into Montage.

Transcript

1. Bindings The Zen of Montage @kriskowal (speaking), @mikeczepiel, @aadsm, @francoisfrisch, @benoitmarchant, @montagejs
2. function Point(x, y) { this.x = x; this.y = y; } Point.prototype.magnitude = function () { return Math.sqrt( this.x * this.x + this.y * this.y ); }; var point = new Point(3, 4); expect(point.magnitude()).toEqual(5);
3. var Montage = require("montage").Montage; var Point = Montage.create(Montage, { didCreate: { value: function () { this.addOwnPropertyChangeListener("x", this, "coordinate"); this.addOwnPropertyChangeListener("y", this, "coordiante"); } }, handleCoordinateChange: { value: function () { if (this.x == null || this.y == null) { this.magnitude = null; } else { this.magnitude = Math.sqrt( this.x * this.x + this.y * this.y ); } } } }); var point = Point.create(); point.x = 3; point.y = 4; expect(point.magnitude).toEqual(5);
4. var Montage = require("montage").Montage; var Point = Montage.create(Montage, { didCreate: { value: function () { this.defineBinding("magnitude", { "<-": "(x ** 2 + y ** 2) // 2" }); } } }); var point = Point.create(); point.x = 3; point.y = 4; expect(point.magnitude).toEqual(5)
6. Discrete Change Listeners • property changes • range changes • map changes
7. Property Changes object.addOwnPropertyChangeListener (key, handler, token) handler.handleTokenChange (value, key, object) add/remove propertyChange/beforePropertyChange tokenChange/tokenWillChange
8. Map Changes object.addMapChangeListener (handler, token) (any key) handler.handleTokenMapChange (value, key, object) add/remove mapChange/beforeMapChange mapChange/mapWillChange
9. Range Changes object.addRangeChangeListener (handler, token) handler.handleTokenRangeChange (plus, minus, index) add/remove rangeChange/beforeRangeChange rangeChange/rangeWillChange
11. Array Range Changes shift() → splice(0, 1) unshift(...values) → splice(0, 0, ...values) push(...values) → splice(length, 0, ...values) pop() → splice(length - 1, 1) clear() → splice(0, length) set(index, value) → splice(index, 1, value) swap(i, l, values) → splice(i, l, ...values)
12. © Sidney Harris — http://www.sciencecartoonsplus.com/
13. Bindings a ↔ b a.b ↔ c.d a ← b.map{c} a ← b.filter{c} a ← b.sorted{c} a ← b.flatten() sum, average, reversed, enumerate, items, some, every a.has(b) ↔ c a == b ↔ c a[b] ↔ c a.* ← c.map{d} a[*] ← b.toMap() a ← b.toMap{[.0, .1]} r ← (x**2 + y**2) //2 f ↔ c * 1.8 + 32 a ← b.{x: .0, y: .1}
14. http://montagejs.github.com/frb/grammar.xhtml Pipelines
15. http://montagejs.github.com/frb/grammar.xhtml
16. Insert Demo Here
17. a.b ↔ c.d this.defineBinding("a.b", { "<->": "c.d" }); { "prototype": "montage", "bindings": { "a.b": {"<->": "c.d"} } }
18. "selectionName": { "prototype": "montage/ui/dynamic-text.reel", "properties": { "element": {"#": "selectionName"} }, "bindings": { "value": { "<-": " @selection.currentIteration.object.name + ( !@selection.currentIteration.isLast ? ', ' : '' ) " } } }
19. // Repetition.Iteration // didCreate: this.defineBinding("isLast", { "<-": " visibleIndex == repetition.iterations.length - 1 " });
20. // ContentController.Iteration // didCreate: this.defineBinding("selected", { "<->": "controller.selection.has(object)" });
21. Insert More Awesomer Demo Here
22. "valueInput": { "prototype": "montage/ui/input-text.reel", "properties": { "element": {"#": "valueInput"} }, "bindings": { "value": { "<->": " @owner.data [+@rowInput.value] [+@columnInput.value] " } } }
24. function observeProperty(object, key, emit, source, parameters) { var cancel = Function.noop; function propertyChange(value, key, object) { cancel(); cancel = emit(value, key, object) || Function.noop; } PropertyChanges.addOwnPropertyChangeListener( object, key, propertyChange ); propertyChange(object[key], key, object); return once(function cancelPropertyObserver() { cancel(); PropertyChanges.removeOwnPropertyChangeListener( object, key, propertyChange ); }); }
25. exports.makeSumObserver = makeCollectionObserverMaker( function setup() { var sum = 0; return function rangeChange(plus, minus, index) { sum += plus.sum() - minus.sum(); return sum; }; } );
26. Upcoming Changes • array.property → array.map {property} • array.count() → array.length
27. Upcoming Changes this.defineBinding(target, targetPath, { "<- or <->": boundObjectPropertyPath, source: boundObject });
28. http://{github,documentup}.com/montagejs/frb
29. http://{github,documentup}.com/montagejs/frb