[TekMol]

I agree that React introduces way too much complexity.

From a quick look at your approach, I have one concern:

    <template id="product">
     <h1 class="name"></h1>
     ...

You seem to use classnames as variable names. What if some other template has a "name" variable too? What if a stylesheet uses it?

I prefer simple placeholders. Instead of:

     <h1 class="name"></h1>

I would use:

     <h1>{{NAME}}</h1>

[daliwali]

Using class names was just an example, people may get the wrong impression that has anything to do with the variable name. It could have been made more explicit, but I wanted to be as terse as possible:

    <h1 class="name" data-bind="name"></h1>

It was also a design goal not to introduce a templating syntax, so `{{}}` brackets are out of the question.

[TekMol]

I see now, that the bindObject() function takes a mapper from data to DOM.

There are two downsides to this:

1) You have to define twice where the data is displayed. Once in the template and then again in the mapper.

2) <div>{{NAME}}</div> explicitly tells the reader "The name goes here". In your solution one would have to look it up in the mapper to be sure what goes where.

[daliwali]

I'm well aware that there must be an element and a selector for that element. But this is exactly how CSS works as well, it's separation of concerns. Only recently have inline styles become trendy, much to my dismay.

The total absence of templating syntax is a deliberate decision. It enables one to start from an HTML mock-up or static page, and build interactivity on top of that without changing any HTML.

[TekMol]

    this is exactly how CSS works as well

I beg to differ. There is no mapping needed for CSS. CSS works by once defining where the style shall go:

    <div class=city></div>

And once what the style is:

    .city {color: blue; font-family: arial;}

Similar, template syntax once defines where the data shall go:

    <div class=city>{{NAME}} has {{POPULATION}} residents</div>

And once, what the data is:

    city={name: "New York", population: 8491000}

Neither need additional mapping.

[daliwali]

I'm not sure I understand what you mean by additional mapping.

Here's all that's needed in the template:

    <div class="city"><span class="name"></span> has <span class="population"></span> residents</div>

And the mapping would be:

   [ 'city': [ '.city', { name: '.name', population: '.population' } ] ]

If you don't want to manually define a mapping, you could do it automatically by assuming that some attribute like `data-bind` corresponds to a binding, but Simulacra.js doesn't make assumptions like that.

[TekMol]

    you could do it automatically by assuming that some
    attribute like `data-bind` corresponds to a binding

Yes, that could be done. That would mean to extend Simulacra. Or do it outside of it.

To me personally, <div>{{NAME}}</div> is easier to read and reason about. Also, it enables you to do stuff like

    <div>{{CITY}} has {{POPULATION}} residents</div> 

Which is much shorter then

    <div><span data-bind="city"></span> has <span data-bind="population"></span> residents</div>

You can also do other useful stuff. For example:

    <div class="{{STATUS}}">{{MACHINE}}</div>

And then style different statuses via CSS.