CODEWITHSUNDEEP
angular
Picci
Picci

Reputation: 17752

Angular2 design - nesting of components and performance risks

When I have to build a complex page with many functionalities I often end up with a design that foresees the complex page as a composition of series of simpler components, which may be as well a composition even simpler components (in other words I am talking about more than one level of nested components).

Such simpler components are not built for reusability (there is no other page that is going to use them) but as an attempt to make code easier to read and understand (which is still a good thing).

Anyways, the question I have is whether a desing that foresees a page built via composition and different level of nesting may be thing that may seriously impact performance and therefore needs to be watched carefully.

I reckon that the question may sound a bit vague, but what I am basically wondering is whether nesting components is a serious risk for performance of Angular2 apps. I am talking about a reasonable amount of levels of nesting (let's say 3 - 4 levels) and pages whose functional richness can not be reduced (i.e. what is not nested has to be in the top page).

I hope this question does not appear too naive.

Thanks in advance

Upvotes: 4

Views: 785

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657118

Not at all. I think nesting can rather improve performance. Especially if you fine-tune change detection with for example using ChangeDetectionStategy.OnPush. This way you limit the scope where Angular needs to run change detection until you explicitely tell Angular to check.

A build step that will be provided (or already is) by Angular or server-side rendering using Angular2 univeral, will also reduce the initial workload Angular has to do when the page is loaded and the DOM is built by replacing reflective code for bindings and other stuff by generated code.

Upvotes: 5

Related Questions