Skip to content

New Syntax #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
curran opened this issue Apr 13, 2016 · 0 comments
Closed

New Syntax #14

curran opened this issue Apr 13, 2016 · 0 comments

Comments

@curran
Copy link
Member

curran commented Apr 13, 2016

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?

@curran curran closed this as completed in 585f8c6 Apr 13, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant