Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

this.update() always updating every child tag can cause slow/unresponsive UI. Workarounds? #1840

Closed
johnsq opened this Issue Jun 20, 2016 · 2 comments

Comments

Projects
None yet
2 participants
@johnsq
Copy link

johnsq commented Jun 20, 2016

Hello,
My question is similar to this feature request #1809, but in my case is a more general question to source how others deal with this specific issue within the current api.

The issue is regarding how this.update() updates all child tags each time it has called, which often isn't a noticeable problem, but In a scenario where I only want to make even a small update to my root tag, but happen to have a large/complex child tag within it, then the update takes a notably long time, making the UI feel unresponsive.

I have demoed this issue here https://jsfiddle.net/johnsq/1amhgt3L/1/. (please note the child tag named <big-data-tag>and have your console open to view the update speeds).

This issue raises the following questions..

  1. Is there a way within the current api to prevent updates to child tags?
  2. Is this a problem with Virtual DOM? Should it take so long to re-render a tag in which no changes have been made?
  3. In my jsfiddle, please note the second button (Update with JS) that works around the problem by updating the element directly, but isn't this bad practice and also a failing of the Riot library if there are instances where developers have to work outside of Riot and perform direct DOM manipulations to achieve their desired functionality?

I'll look forward to your responses. Thanks John

  • Question
  • Bug
  • Discussion
  • Feature request
  • Tip
  • Enhancement
  • Performance

@johnsq johnsq changed the title this.update() always updating all child tags causes slow/unresponsive UI. Workarounds? this.update() always updating every child tag can cause slow/unresponsive UI. Workarounds? Jun 20, 2016

@GianlucaGuarini

This comment has been minimized.

Copy link
Member

GianlucaGuarini commented Jun 20, 2016

Is there a way within the current api to prevent updates to child tags?

no there will be in riot@3.0.0 with shouldUpdate

Is this a problem with Virtual DOM? Should it take so long to re-render a tag in which no changes have been made?

Render 5908 items via javascript on the same page without pagination or splitting them into chunks is your problem in the first place. You can use the no-reorder attribute for your loops, or you can try riot@next with the shouldUpdate feature or you can even use react or any other framework out there the fact is that: if rendering 6000 particles in a html5 canvas could crash your browser (without having the DOM involved) why should be html faster?

In my jsfiddle, please note the second button (Update with JS) that works around the problem by updating the element directly, but isn't this bad practice and also a failing of the Riot library if there are instances where developers have to work outside of Riot and perform direct DOM manipulations to achieve their desired functionality?

you can simply target a single item in your list and update it https://jsfiddle.net/c8eag92d/ this does the trick:

var item = this.tags['big-data-tag'].tags.item[0]
item.first_name = 'jack'
item.update()

good luck with your app. I am closing this issue

@johnsq

This comment has been minimized.

Copy link
Author

johnsq commented Jun 21, 2016

Thanks @GianlucaGuarini for a great/fast response. Updating a list item directly is something I have never tried and will definitely be of use for to me. shouldUpdate will be a great feature though so I'll look forward to Riot 3.0.0 for that.

Lastly, I would never in a real app try to render 6000 items. Just a good way of demonstrating the affect of a large tag. In my actually app, I'm working with lists around 300 items, but within each tag, nested html, buttons, dynamic styles etc do clearly create a lot of bulk and this does cause similar delays on updates as I described here... but I get now that being more specific about which elements I update is the way forwards. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.