Refactor JS code of streaming

[corneadoug]

There is no need to use DOM and JQuery here, angular data binding takes care of it

[Leemoonsoo]

Thanks @corneadoug. The reason i manipulate DOM was, i wasn't sure about the performance of 'refreshing' angular data binding, especially output becomes thousand of lines.
What do you think? Will angular data binding has no performance implication appending line after line?

[corneadoug]

The size of the data wouldn't matter. For the refresh, We are already having similar behavior with progress bar.

In Angular, what counts for performance is: Nb of watchers (values with data binding, here its only one), and the time of the digest loop (time to go through all the watchers). In this case we are good. On the other hand, accessing DOM is know to be an expensive task.

This is a good read: https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications

[Leemoonsoo]

Okay i got that. Then, will there be any performance implication in web browser? since updating data binding make browser re-render that area.

[corneadoug]

I think it should be fine, there would be higher priority elsewhere to improve performances. Thats something we will have to work on while refactoring in the future.

[Leemoonsoo]

@corneadoug
Test this code.

(1 to 3000).foreach{i => 
    (1 to 80).foreach(i=>print(i))
    println("")
}

without DOM manipulate, it struggles printing large number of lines.

[corneadoug]

Its slightly better, especially on scroll. However in both you can't do anything else and the page pretty much freeze

[Leemoonsoo]

On my machine with/without dom manipulatuon have some meaningfull differences. One not freeze the browser but the other freeze.

[corneadoug]

Okay, then thats fine for now