transparency.js style directives

[Gili T.]

Hi,

I hope you don't take this the wrong way but...

I find the transparency.js directives style much more intuitive and readable than those of pure.js. I even find their source-code easier to read (I'm not a fan of short variable names) :)

The problem is that transparency.js development has stopped last year and there is no indication that it will resume, so I feel I'm stuck between a rock and a hard place.

Have you taken a look at their directive format? Would you consider adopting it?

Thanks,

Gili

[Gili T.]

Nevermind. I gave up on their directive structure as well, because it only goes two levels deep.

I am looking for this kind of directive format:

"elementName@attributeName":

{

  level2:

  {

    level3:

    {

      // unlimited nesting levels

      level4_1: directValue,

      level4_2: function(params)

      {

        return computeValue(params.value);

      }

    }

  }

}

I think I'm going to try implementing this myself and seeing how well it works.

My main complaint with transparency.js is that the project isn't being maintained and only supports 2-levels of nesting. My main complaint with pure.js is the directive format is hard to read (for anything except the one-to-one mapping case). I think with a little work we can improve the syntax.

Gili

[Mic (BeeBole)]

The directive in pure is {selector:action}

With selector being the same as the one you use for CSS declarations. There is nothing to learn, just some notations(@, +, <-, .) for attributes, append, loops and current node.

I'm not sure:
friend:{
name:{...

Is much readable than:
'.friend .name': ...

In addition, if you nest them like in one examples of transparency home page, they become tightly linked with the HTML.
Which removes one main advantage of the directive, that you can change your HTML without changing the code.

[cowwoc]

Hi Mic,

I don't take any issue with the selector portion. I'm more concerned
about the readability of the append and loop syntax. I don't find them
intuitive.

For looping in particular, I would suggest using "animal in animals" or
"for(animal in animals)" instead of "animal<-animals" because from a
readability/learnability point of view, you would piggyback on the "for
... in" Javascript syntax. Yes, it is more verbose but I find the
readability gain is huge.

In general I would say that as soon as the left-hand-side changes from a
selector to some sort of action, the syntax becomes harder to digest.

In trying to create my own engine, I totally sympathize with the
difficulty of coming up with a good design. It's not easy...
Unfortunately, I don't have all the answers.

In my own experiments I found that, in some cases, coding directly to
JQuery (injecting JSON yourself) was slightly more verbose but a lot
more readable. For example, consider having to implement this in pure.js:

HTML:

<tbody>
<tr class="html template company">
<td class="name"></td>
<td>
<div class="ui checkbox">
<input type="checkbox"/><label
class="label"></label>
</div>
</td>
</tr>
</tbody>

JS:

var nextId = 0;

// Reset the template
var template = $("tbody > .html .template").detach();
var root = $("tbody");
root.empty().append(template);

companies.forEach(function(company, index)
{
var instance = template.clone();

++nextId;
var currentId = "checkbox-" + nextId;
var company = $(".company");
instance.find(".name").text(company.name);
instance.find("input").attr("id", currentId);
instance.find("label").attr("for", currentId);

root.append(instance);
}

Notice that I am also taking care of resetting the template in case I
need to inject into the same HTML multiple times (if the user clicks the
refresh button).

Gili

[cowwoc]

Oops. Two corrections:

1. The following line should be removed from the JS code because it
shows a variable (and is no needed anyway):

var company = $(".company")

2. The following line should be added after "var instance =
template.clone()":

instance.removeClass("html template");

The reason being that ".html.template" is "display: none" (hidden from
the user) but populated rows should be visible.

That's it. Here is the updated JS code that runs on my end:

var nextId = 0;

// Reset the template

var template = $("tbody > .html.template").detach();

var root = $("tbody");
root.empty().append(template);

companies.forEach(function(company, index)
{
var instance = template.clone();

instance.removeClass("html template");

++nextId;
var currentId = "checkbox-" + nextId;

instance.find(".name").text(company.name);
instance.find("input").attr("id", currentId);
instance.find("label").attr("for", currentId);

root.append(instance);

Gili