[Reactive Web App] Block: OnReady triggered before the OnInitialize is fulfilled.

Hi,


While building a Reactive Web App I got some issues and some unexpected behavior while debugging it.

Built a test screen with a block inside and assigned all events to them with the following code:

JavaScript1:

console.log('Screen1:OnInitialize1');

JavaScript2:

setTimeout(function(){ $resolve(); }, 5000);

JavaScript3:

console.log('Screen1:OnInitialize2');


And got the following output on the console:

Screen1:OnInitialize1
Screen1:OnInitialize2
Block1:OnInitialize1
Block1:OnReady1
Screen1:OnReady1
Block1:OnInitialize2
Block1:OnReady2
Block1:OnRender1
Screen1:OnReady2
Screen1:OnRender1
Block1:OnRender2
Screen1:OnRender2


So, the issue is that the block Block1:OnReady runs while the Block1:OnInitialize is not yet fulfilled. I would expect something like this:

await OnInitialize();
await OnReady();
await OnRender();

But clearly that's not what is happening, at least on the blocks. On the screens seems to be correct. 


By the way, the same also applies on the OnApplicationReady event. Copying the same code into there the Screen1:OnInitialize will run before the OnApplicationReady is fulfilled.


I don't expect at all for this to be the expected behavior so, please let me know if I'm wrong.

Hi Luis,

setTimeout(function(){...}, 0) simply queues the code to run once the current call stack is finished executing.

it's a asynchronous call and  will not execute concurrently.


Hope this help!!!.


Cheers,

Ali Amin


Hi Ali Amin,


Yes, I'm fully aware of that, but when you have '$resolve();' inside of a Javascript block it will wait till it's called, in other works, until the promise is fulfilled, more info here.


Regarding the issue, in general terms we have this for the screen:

Screen1:OnInitialize1
Screen1:OnInitialize2
Screen1:OnReady1
Screen1:OnReady2
Screen1:OnRender1
Screen1:OnRender2

And this for the Block:

Block1:OnInitialize1
Block1:OnReady1
Block1:OnInitialize2
Block1:OnReady2
Block1:OnRender1
Block1:OnRender2

The code is exactly the same but on the block level the OnReady is fired before the OnInitialize is completed/fulfilled (Block1:OnInitialize2).


So, on the screen level the OnReady will only be fired once the OnInitialize is completed/fulfilled. This means that it will wait for the promises ($resolve() calls) on the Javascript blocks.


On the Block level, the OnReady event won't wait until the OnInitialize is completed/fulfilled (if only have sync code there of course it will).

I went over the documentation here and found this OnInitialize info:

In Blocks, including any server action calls or local storage operations in this flow might cause the render of the Block to start before this action finishes. You will have issues if you set any variables in this flow that affect the render.


It is not very clear, but in the end I think it's related with the issue reported. Not sure if it was intended to be like that or it's just how it was implemented... but I would expected the behavior on screen & blocks to be aligned and, at the moment, it's not.