Using Blaze Components

[SachaG]

I've noticed some performance issues when dealing with medium (>100) numbers of nested menu items. I was wondering if maybe refactoring this package to use Blaze Components might help?

Would love to get @mitar's feedback, and also get more people involved in using/maintaining this package.

[mitar]

Oho, that is an interesting package. And I like animations.

What type of performance issues you have? It would be good to measure first things. Is it reactivity related?

But would definitely be a good use case otherwise for Blaze Components. It has a nice component structure, and it would be great to try out the animation hooks for this.

[mitar]

Can you make an example where it is slow?

[SachaG]

I was actually talking about it with @lorensr, maybe he can describe the issue as well. I have a site with about 140 menu items, and when I trigger a route that renders the menu with all of them at once, it can get pretty slow (anywhere from a couple seconds to >30 seconds if you go back and forth a lot).

Here's a video: http://cl.ly/dZUl

I can also create a reproduction in a separate repo if you'd like.

What I ended up doing was only rendering the first level of the menu until you expand it. But that meant giving up on animations… (I was doing them via jQuery, and this requires having the thing you want to show already rendered in the DOM).

[lorensr]

In Telescope, using menu on /submit. With or without expandLevel="all":

• on /page/about
• go to /submit, takes 3s
• go to /page/about
• go to /submit, takes 10s

Continues increasing time to both load /submit and the time to tear down /submit template when moving to /page/about. Compare to time it takes to go between two routes that don't have menu, eg /users/yourname and /page/about: 1s, non-increasing.

Timeline profiling video:

https://youtu.be/bRRqwJ4I0nA

I guess the long lines of repeating Blaze._materializeDOM and alternating DOMRange.attach / DOMRange._insert are related to the use of nested loops of Template.dynamic. A lot of event attaching, maybe could only have one set of event handlers on the parent div. Don't know why it takes longer on subsequent renders – something must not be cleaned up?

[lorensr]

@SachaG You can still have animations with Blaze! I use percolate:momentum, with {{#momentum plugin='css'}} – pretty easy to use :)

[SachaG]

You're right, I just haven't gotten around to adding them back in yet. But I figure it's probably best to solve any performance issue first before I add more variables to the mix :)

[mitar]

I can also create a reproduction in a separate repo if you'd like.

Are you sure it was not a data loading issue? So that you were trying to render the menu before all data was there from the server? Or is menu hard-coded?

On animations, Blaze Components also have animations hook.

OK, so would you be interested in me trying to port this to Blaze Components and then you can evaluate?

But first it would be good to find some static reproduction. So something where data is not loading from the server, and maybe two routes you move between.

[mitar]

Hm, it would be interesting to see just how many DOM elements and template instances are there. It might be simply a lot of those?

[lorensr]

How do you count template instances?

On Monday, October 19, 2015, Mitar notifications@github.com wrote:

Hm, it would be interesting to see just how many DOM elements and template
instances are there. It might be simply a lot of those?

—
Reply to this email directly or view it on GitHub
#1 (comment)
.

[mitar]

You put increasing a global variable in onCreated of all of them? ;-)

[mitar]

You can also measure timestamp of each, and then also rendering time (difference between calling onCreated and onRendered).

[lorensr]

Oh, hoped you could enumerate on console of a rendered page

On Monday, October 19, 2015, Mitar notifications@github.com wrote:

You can also measure timestamp of each, and then also rendering time
(difference between calling onCreated and onRendered).

—
Reply to this email directly or view it on GitHub
#1 (comment)
.

[mitar]

Yes, you can, you access that variable in the console. ;-)

[lorensr]

I mean like I can see how many packages by Object.keys(Package).length. I want something like Blaze._templateInstances.length, but can't find it.

[mitar]

Yes, instrumenting Blaze to count that might potentially slow things down, so I do think it is good that it is not there. But one can probably instrument it probably quite easy by extending the template instance prototype? Or even View prototype.