+plus and +formation, what’s the difference?

+plus

+plus is the way to define and support mapping between DOM tree and data tree rooted at some object or namespace. So if you have these two declarations, markup:

<style>@import url(plus.css)</style>
<section model="person">
    <label>First</label> <input(name.first)>
    <label>Second</label> <input(name.last)>
    <label>Age</label> <input|integer(age)>
</section>

and script

namespace person {
  var name = { first: "Albert", last:"Einshtein" };
  var age = 53;
}

then the +plus will establish live two-way mapping (binding)  between DOM elements above and the data structure.

When the user changes value of input(name.first) field  (short form of <input name="name.first"> in Sciter) the following happens:

1. Sciter generates “change” DOM event;
2. +plus handles that event and
3. updates value of person.name.first in data namespace.

And when data gets changed by some other code like

person.name.first = "Some other name";

then pretty much similar flow occurs:

1. Sciter determines that filed first  has changed on observable object.
2. Sciter calls attached function-observer – each object/array inside bound namespace has an observer function attached to it.
3. And that function-observer updates bound DOM element.

As you see, in order binding to work both-ways, each data node (object, array) in bound namespace has to have corresponding observer attached to it.

+formation

The main difference from the above is that the +formation does not require separate data structure.  The formation is a data structure by itself naturally mapped to markup structure.

This markup:

<section(person)>
    <label>First</label> <input(name.first)>
    <label>Second</label> <input(name.last)>
    <label>Age</label> <input|integer(age)>
</section

gets mapped by formation() function to the [formation] tree structure:

And code can access that tree directly as:

var root = formation( self );
// setting whole formation:
root.person.value = {
   name : {
     first: "Albert",
     last: "Einshtein"
   },
   age:69
 };

// or setting particular field in the formation:
root.person.name.first.value = "Some other name";

Note: root.person.name.first is a direct reference to <input> DOM element thus .value is required.

The formation is a data structure derived from actual DOM tree (its projection)  and so you can use normal DOM events to be notified when some data changes by the user:

root.person.name.first.on("change", function() {...}) // or
self.on("change", "section[name=person]", function() {...}) // any change in person fields.

Resume

Essentially +plus and +formation are aimed to the same task – update UI from code and update/notify code about some changes in UI.

• +plus
  • pros: Allows to bind arbitrary data structure to arbitrary DOM tree.
  • cons: Can be memory and CPU consuming on large data and DOM trees.
• +formation
  • pros: Fast and not CPU consuming.  Yet allows to access “fields of interest” by using dot notation (“paths in formation”):  root.person.name.first.state.disabled = true;
  • cons: data structure you get (the formation tree) is bound with DOM structure. So when you change DOM structure then  formation paths in code may change.