Question

I started getting into VueJs and Vuex development and I'm looking for a "mainstream" architecture for large scale projects. I think the question doesn't depend on whether you take a ready to use UI Framework like Vuetify, Bootstrap-Vue or Buefy or write everything yourself.

So first I read about the atomic design. This seems to be a good approach because you can compose base components and reuse them in more complex structures. But let's assume you want to give your BaseButton a blue background by providing a background-color prop.

Passing the background color from the page all the way down to the button would be really nearly impossible if you think about the huge amount of components on a page. A single button would come up with multiple props. A molecule would hold m atoms with n props per atom and so on...

Another even worse approach would be to use inheritance for components. So you would have a BaseButton and a BlueBackgroundButton would extend it. Basically this would lead to a diamond of death.

Finally React comes with the approach of grouping components by their routes. You can find an example here. This might be a valid approach but would break the abstract reusability a little bit.

Of course you can make use of mixins, extensions, slots and other things to clean up your code.

Many REST API I've seen use a basic controller-service-repository architecture. NestJs would be a good example for this backend architecture.

I would like to know if there is a "nobrainer" architecture for VueJs. If you stick to the conventions you can't go wrong.

Unfortunately I don't know React or Angular, so I don't know if they are forcing a specific structure.

Pas de solution correcte

Autres conseils

So, your question isn't very clear, so I will answer the closest thing I could gather as a question:

I would like to know if there is a "nobrainer" architecture for VueJs. If you stick to the conventions you can't go wrong.

No, there is not a one-size-fits-all architecture for VueJs. In fact, there's no such thing for anything.

When we deal with "large scale projects" opting for anything "nobrainer" usually gets you either fired or in deep/everlasting problems and a eventual "it's easier to throw everything out and start again".

I'm sorry, I know this is a deeply frustrating thing to read. If you want, I can go into the details and specifics. I decided to keep this first answer smaller... I would just like to point out that Javascript does not allow multiple inheritance (check "Multiple Inheritance" at the bottom of the doc), and thus, is not subject to the diamond problem.

Licencié sous: CC-BY-SA avec attribution
scroll top