Breaking big page up into small components

user_3633102 0
Viewed 985

This is really a code style sort of question, although as I'm using Vue.js for developing my front end, I'm couching it in Vue terms.

I am working on a reasonably complex web application with Vue.js. Even using single file components, I'm finding some of my components (such as a CustomerEditor, for example) are becoming large and unwieldy and increasingly difficult to edit. Now, I come from a Java background (actually in recent years Grails/Groovy), and my instinct is always to isolate anything which might be usable in more than one place into its own class, so as to keep as much as possible to the DRY principle.

And I've been doing this with Vue.js, breaking things out into smaller components where I see the possibility of reuse. Even so, some of the files are still pretty large. So now I'm at the point of considering something I've never really done before, splitting up some of the components into smaller components even when those smaller components are only going to be used once, in this one place, simply for the sake of making the code more readable/editable. I have to say it feels a rather strange path to embark on, and I'm just wondering whether this is common practice among others or not?

vue.js
1 Answers

It is verry common in Vue.js to split large components into smaller components which are easier to maintain, even if these will not be reused. The following is a quote from the official documentation:

Components are meant to be used together, most commonly in parent-child relationships: component A may use component B in its own template. They inevitably need to communicate to one another: the parent may need to pass data down to the child, and the child may need to inform the parent of something that happened in the child. However, it is also very important to keep the parent and the child as decoupled as possible via a clearly-defined interface. This ensures each component’s code can be written and reasoned about in relative isolation, thus making them more maintainable and potentially easier to reuse.

Note the "making them more maintainable and potentially easier to reuse." at the end.

Another important thing to notice is to keep the parent and child as decoupled as possible. This will also help to make the code easier to understand/maintain. Another thing that will help to make your data-flow easier to understand is to have a one-way data flow.

user_77970020
Related