Hi all, I'm trying kvision for the first time and I'm a bit confused about the virtual dom, as it se...

# kvision

[paoloconte]

Hi all, I'm trying kvision for the first time and I'm a bit confused about the virtual dom, as it seems that the dom is always recreated rather than patched
For example if I have

val counter = ObservableValue(0)

 simplePanel().bind(counter) { count ->
    span("Counter is $count")
 }

When the value of counter changes, the span element gets removed from the dom and a new one is created.
Using snabbdom directly, instead, when the state changes, it traverses the existing dom and make changes to it

[Robert Jaros]

Yes, you are right and it's designed this way.

[Robert Jaros]

KVision components use distinct snabbdom keys.

[Robert Jaros]

Data binding recreates kvision components and this forces also snabbdom node recreation.

[Robert Jaros]

The reason for this is kvision stateful nature - kvision components are often backed by complex javascript components which do their own changes to the dom (out of snabbdom scope).

[Robert Jaros]

The early KVision versions didn't use distinct snabbdom keys and that caused problems with snabbdom recognizing correct nodes or lost state of the components.

[Robert Jaros]

I think there is some place of improvements in this area - some currently internal API could be exposed for the users to optimize rendering is some more simple cases.

[Robert Jaros]

I'm testing very small change for the next release - adding public skey property to all components. With this code:

simplePanel().bind(counter) { count ->
                span("Counter is $count") {
                    skey = "mykey"
                }
            }

user will be able to define it's own key and snabbdom will not recreate component's node.

[paoloconte]

Hi @Robert Jaros, thanks, this is interesting
The reason why I stumbled into this is because the UI I'm working on is a bit heavy and so if I just re-render the view when the state changes, it becomes very sluggish
To work around that, rather than binding the whole view to the store, I can bind sections of the ui to substores or states, but I find that quite cumbersome to be honest

[Robert Jaros]

@paoloconte Thanks for bringing this issue to my attention. In fact with some optimizations I've made KVision about 25% faster according to my benchmarks 🙂

[paoloconte]

cool @Robert Jaros 👏 I'll try it out!

[paoloconte]

@Robert Jaros it has improved a lot!! 🙌