Description
There is a better alternative to the current syntax for setting up reactive functions.
When I experimented with chaining the call to model()
for setting up reactive functions, this is what it looked like:
// Old syntax
var model = ReactiveModel()
.addPublicProperty("a", 5)
({
b: [function (a){
return a + 1;
}, "a"]
});
When seeing it in this way, it seemed quite verbose, and an alternate syntax came to mind:
// New syntax
var model = ReactiveModel()
.addPublicProperty("a", 5)
("b", function (a){
return a + 1;
}, "a");
Here's what it would look like with two input properties:
// Old syntax
my({
fullName: [function (firstName, lastName){
return firstName + " " + lastName;
}, "firstName, lastName"]
});
// New syntax
my("fullName", function (firstName, lastName){
return firstName + " " + lastName;
}, "firstName, lastName");
This new syntax also paves the way for a more natural way to express reactive functions that side effects but no return value. Consider this example from #9
// Old syntax
my({
dom: [function (width, height){
... use D3 or React to update some DOM that depends on width and height.
}, "width, height"]
});
In this example, the output property "dom" is completely unnecessary, but the old syntax forces you to put something there as the name of the output property. The new syntax can have a variation that does not include an output property, so the above code could look like this:
// New syntax
my(function (width, height){
... use D3 or React to update some DOM that depends on width and height.
}, "width, height");
This feels like a big win, especially considering that the main purpose of the library is to drive DOM manipulations.
Pros:
- Removes characters
{[]}
. - Makes each invocation 2 lines of code less.
- Makes the reactive function body indented one level less.
- Paves the way for a clean way to express reactive functions with side effects but no return value.
Cons:
- Forces quotes around output property name.
Whoever is listening, any thoughts on this?