Best practices for measuring?

[jcfranco]

Do you have any recommendations for positioning measuring? If so, it'd be a great addition for the cookbook.

The following toy test case shows a problem where using styles for positioning may not work if that measuring is done within a render call that also applies classes that invalidate the measurements. I guess, one workaround would be to do the inline positioning directly on the element within afterUpdate, but that seems to be going against the maquette-way™.

indented = added

[johan-gorter]

The simplest approach to 'positioning' as you call it is to let the CSS do the hard work. When using CSS's flexbox, you can define how elements should grow and shrink to accomodate viewport sizes.

If you need to be even more flexible and want to measure elements and modify dimensions accordingly, you could easily get problems with performance. If you change the DOM, measure an element and then change the DOM again, you are causing an expensive 'reflow'. This is why you should preferably not perform measurements (like getBoundingClientRect) during afterCreate and afterUpdate.

At @AFASSoftware we do measurements. Therefore we use a slightly modified version of the Projector combined with custom callbacks on VNodes. The projector first does the normal render+diff+patch, then executes newly added measure callbacks, if any, and then does a render+diff+patch again (if there were measure callbacks executed).

[jcfranco]

Thanks for the information. Despite my poorly named issue, you addressed the real matter at hand (measuring with maquette). 😄 I'll update the issue accordingly.

BTW, are there any plans to update maquette with the modifications you described? If not, it'd be very informative to see an example of this.

[johan-gorter]

The modified version of the projector (maquette is built with the possibility to use your own projector) is not something we would like to give support on, because it would probably raise too much questions. I am surprised that there are more people out there who are willing to go down the 'measure and modify' route, because it is a pretty complex one. Using maquette makes it a little easier, but still... Why do you want to do measuring?

[RickHoving]

@jcfranco We want to address measuring DOM Nodes in Maquette 3.0 and would like to have your input on this.
You cant continue this discussion at #118

[jcfranco]

@RickHoving @johan-gorter Apologies for the belated response. It looks like Maquette 3's new render cycle would fix my original issue. 🎉