Page History

...

    {
        "firstName": "John",
        "lastName": "Doe",
        "photo": "https://...."
    }

It is able to send granular updates (so if you change only one property it will only send that one), depending on it's pushToServer configuration.

Server side javascript value

...

There is one difference though. In order to be able to send fine-grained updates to the client/browser, those values are 'watched'. That means that whenever you assign a completely new javascript object directly to the property (or if you assign a new object/array to one of it's sub properties on any level), that new value (reference) you assign will not be 'watched' directly; you have to take/read it back from the property (which will give you an equivalent 'watched' value) before using it further in code. Or you can access the value of the property directly every time, not kept as a reference.

Whenever you assign a full new value to that property, it will be replaced by a copy of it (starting with 8.2), but the prototype of the copy will be the same as the one in the initial value. That means that in that prototype you can have for example some methods if you want to build your component/service API like that and those methods - if they are defined in the prototype - will not be lost in the 'instrumentation' process.

For example:

var newPropertyValue = { mySybproperty2 : 10 };
// here you assign a new object to the property
elements.myCustomComponent.myObjectProperty = newPropertyValue;
// here you update the reference that you want to use later in code with the 'watched' new value
newPropertyValue = elements.myCustomComponent.myObjectProperty;

(...then later on, maybe during another event handler execution...)

// this modification will be detected because it's using the new 'watched' value you got from elements.myCustomComponent.myObjectProperty after it was assigned - and the change will be sent to the browser
newPropertyValue.mySybproperty1 = 5; 

...

// DO NOT DO IT LIKE THIS
var newPropertyValue = {};
// here you assign a new object to the property
elements.myCustomComponent.myObjectProperty = newPropertyValue;

(...then later on, maybe during another event handler execution...)

// this will modify the value in newPropertyValue but myCustomComponent.myObjectProperty will not be aware of that to send changes to client/browser
newPropertyValue.mySybproperty = 5; 

...