Components organization and structure


#1

Hi there!

As my project is getting bigger and bigger, my components folder starts to be a mess with 100+ components, a lot of things in there.

I was wondering how do you organize your components while working on large-scale project? You want them to be reusable as maximum as you can, so you don’t want to name them with something page-specific. So do you follow a specific naming convention? How does your directory structure looks like to categorize your components?

Are you using a pod structure?

And what do you think of something like http://patternlab.io/ ?

Please share your way to do things!

Thanks,


#2

Hi @alexmngn, how about grouping components in sub-folders? The name of the folders can be anything you want.


#3

Yes for sure, but I’m looking for idea to organize them in folders.

Should I have a folder full of different type of buttons?

Should I have a folder with all my form elements? And what about compounds or multiple form elements that creates a new component?

Should I have a folder by category of components? Layout, Block, Navigation, Social…

I’m looking for ideas to have the best way to organize the components, especially when you have a lot of components interacting together, some of them made of multiple components…

How big websites with 1,000 components can stay organized? And as a developer, how to you find the component you need easily?


#4

It’s a tough one to answer. First, I never worked in a project with 100 components, let alone 1000…

I guess it all comes down to personal preference, finding patterns to organize stuff, and how you or the developers you work with are more comfortable finding those components. Sorry I can’t help.


#5

I tend to group reusable components by type, i.e., forms/, modals/, containers/, etc. For feature-specific components I create a folder per-feature.


#6

And I go the reverse approach, grouping components by functional area (product/, article/), with a ui/ directory for model-agnostic components, say a date picker.