CODEWITHSUNDEEP
angulartypescript
Robert
Robert

Reputation: 511

Is it bad practice to import all models in all components?

At my work, all of the legacy code imports every single model into all components that use a model. Instead of importing only the models that are required by the component, they'll do something like:

import * as models from '../../view-models/models'
.......
let parrot: models.Bird;

And in models.ts they just aggregate all of the model exports:

export * from './Bird'
export * from './Mammal'
export * from './Amphibian'
.......

To me it seems like you should only import models that will be used in the component, so I'm wondering if there is there any advantage/disadvantage to doing it that way?

Upvotes: 1

Views: 1972

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39462

I don't really think this is a good practice. It's always recommended to just import the modules that are going to be used in a Component.

From your eg, it's clearly importing unnecessary modules everywhere.

Step 1

A better way of doing this would be by making named exports from the model files themselves. That way everything won't be exported from the file.

So a bird.model.ts could look something like this:

export interface Bird {
  birdId: number;
  birdName: string;
}

Step 2

Now, if you have all these interfaces in a folder(named model for instance), you can create an index.ts file in your model folder. The contents of this file would then look something like:

export { Bird } from './bird.model'
export { Mammal } from './mammal.model'
export { Ambhibian } from './amphibian.model'

Notice how instead of exporting everything(*), we're just exporting the model interface names.

Step 3

Finally, when a Component needs to use a model(Bird for instance), there could be two ways of importing Bird.

import { Bird } from './models';

Doing this is going to load everything that is exported by the index.ts file in models folder and then will import Bird.

But if we only want Bird, we can go a level deeper and then import Bird from ./model/bird.model, which would look something like this:

import { Bird } from './models/bird.model';

Now, this is better because in this case, it will not load everything that is exported by the index.ts file in the models folder, it will only load whatever is exported by bird.model and then will import Bird.

Hope that helps you understand in a better way how it all works.

Here's a Sample StackBlitz for your ref.

Upvotes: 4

Nathan Foss
Nathan Foss

Reputation: 680

To your question Is there any advantage/ disadvantage of doing it that way?

It seems easy to know that all models are in that same file. But, then again, easy shortcuts aren't normally good practice.

There is an Angular pattern called Barreling that helps organize components and modules easily. Lots of major 3rd parties organize their code this way so that it's easier for others to import what they need.

Yet, there's also the basic coding principle of YAGNI which seems to be what you're asking about. Why would you import all of these model classes into every component that only needs one or two?

So is there an advantage? Yeah kinda.

Is this standard practice? No, not really.

Is it good? You and your team should decide.

Upvotes: 1

Related Questions