Draft cheat sheet for UI developers

[bartbutenaers]

Hi @joepavitt,

Since the widget loading is now getting mature, I have tried to digest the documentation. Although it is very well written, I have not a full understanding yet but mostly due to a severe lack of free time.

So I started drawing to create my personal cheat sheet, to support my old brain ;-)

It is FAR from complete, and it will most probably contain incorrect stuff. But I need to get started somewhere...
I thought it might be interesting for other developers to share my draft version here, to help them getting started.

If anybody has some constructive input about this draft diagram, that is more than welcome!
Everybody is welcome to start adding stuff with a free hand paint tool on top of this image, and share it here.
I will update my drawing afterwards with the feedback.

Bart

[joepavitt]

Will digest this fully tomorrow when at my desk, but this is astounding Bart.

The only thing I can point out immediately is that my "state" and "props" have some inconsistencies in their implementation atm, which I'm working on refinements in with some the ui-control work I'm doing atm

[bartbutenaers]

Thanks!! No need to hurry, because I know you are very busy...

I had a other few things which were not clear to me in the documentation:

1. Why does the dashboard scan the packages for the keyword "node-red-dashboard-2" to find widgets, while the widgets also call group.register. Isn't the latter one enough?

2. In the widget example code snippet, it would be help to show how to call/use myMethod and myComputedProp.

3. In the same example code snippet I see props: ['id', 'props', 'state'],. The same statement contains two times props, while they refer to something else? Is that correct? If so, it would help if the second occurence would be called e.g. 'properties'.

4. Not sure where the mapstate and messages is located in the frontend part. Similar to the data tracker and Vuex.

Thanks!!

[bartbutenaers]

I was stuck last night with a couple of things on my client side, so I have added some details about that side:

Hopefully this helps me now in determining what I am doing wrong.