CODEWITHSUNDEEP
javascriptangular
Matias Aguirre Luco
Matias Aguirre Luco

Reputation: 211

Angular 4 - it is more expensive to handle styles of a generic component or work with specific components

I'm working on a hybrid application for which I need a toolbar. This toolbar must handle different forms and functionalities, in some cases contains a title, other buttons and links and in others an autocomplete, then my questions is if is more efficient to build a dynamic component that accepts all these elements or work on different toolbar's that will be inserted and removed from the DOM as needed.

Thanks!

Upvotes: 0

Views: 55

Answers (2)

bgraham
bgraham

Reputation: 1997

A dynamic toolbar will be faster, because angular wont need to re-render the whole toolbar each time it changes. It's smart enough just to find the stuff it needs to update.

Also it will make your code easier to maintain I think. Having multiple toolbars, probably with some shared logic/elements will cause repeated code.

Also you will probably have less lines of code with a dynamic toolbar, perhaps slightly reducing the size of your project. I suspect that wont be significant. Honestly, I think the biggest advantage wont be speed but cleaner, more maintainable code in general.

Upvotes: 1

Mehdi
Mehdi

Reputation: 2398

It depends on whether you are using lazy loading or bundling your entire App in one main.bundle.js In the first case, you want to ship the strict minimum to the browser as it's needed. Therefore, you want separate component for each use case. In the second case, it makes your app lighter to create on single component to handle different toolbar use cases.

To demonstrate this, (assuming you're not using lazy loading) you can create a small project with a main component which uses 2 different views. In one case you create a single component for each view. In the other you combine both views in one component.

Then build and serve both and you can see the difference in the weight of your JS files.

Hope this helps

Upvotes: 0

Related Questions