Binding.scala: Strategy to avoid too many dom-tree

Question

In my project scala-adapters I display log entries that are sent over a websocket.

As I have no control on how many entries are sent, I am looking for a strategy to avoid that the screen freezes.

I created a ScalaFiddle to simulate that: https://scalafiddle.io/sf/kzr28tq

This function with these parameters works perfectly:

setInterval(1000) { // note the absence of () =>
  entries.value += (0 to 100).map(_.toString).mkString("")
}

If the interval gets smaller and the String longer - the screen freezes, e.g. with:

setInterval(100) { // note the absence of () =>
  entries.value += (0 to 10000).map(_.toString).mkString("")
}

Is there a solution to solve that on the client side - or do I have to solve that on the server side?

Answer 1

You can try:

@dom
def render = {
  <div>
  {
    for (entry <- entries) yield {
      entryDiv(entry).bind
    }
  }
  </div>
}

The problem is that you bind entries too early. Binding.scala does its magic by CPS transform, every .bind triggers re-evaluation of all code after, so you should bind a variable as late as possible.

And for Vars, use for comprehension instead of bind directly, to avoid updating the whole list. When you use += to modify the content of Vars, Binding.scala "patches" the list internally, but if you do .bind on the Vars instance directly to get the whole list, the framework cannot do any optimization for you.

Here is the updated ScalaFiddle: https://scalafiddle.io/sf/kzr28tq/3