Intended way of composing a page

[bluebrown]

Hello,

I am wondering if its intended to have a bunch of smaller components which potentially communicate via events or if its intended to wrap everything in one root element with x-data? Also, is it a good idea to nest components?

Regards,
Nico

[ryangjchandler]

Hi @bluebrown - I'd recommend having smaller components than one large component. When Alpine updates the DOM, it has to walk through each element so having a large component could have a negative impact on performance.

[HugoDF]

Like @ryangjchandler said, better to have a bunch of smaller components.

I wouldn't recommend nesting them since you'll then need to keep shared state in sync.

I've got the following post to explain the kind of architecture you should strive for with Alpine.js (by itself or with Spruce): https://codewithhugo.com/alpinejs-component-communication-event-bus/