How do you organize your components?

We’ve been in the process of refactoring our app to use 2.x patterns. Replacing all of our views/controllers, {{render}}, itemControllers, with components.

One thing we noticed was that as a flat list, all 100 of our components are a bit hard to parse. I know you can create subdirectories and use them like: {{x-foo/bar}}. I was tempted to create my “routable components” as {{x-routable/application}}, etc.

I am curious how others have been organizing them?


It’s probably not too helpful, but that’s exactly what we’re doing too (although we haven’t quite gotten to Routable Components just yet). I’ve found that namespacing them by either function or some other category (like Bootstrap) has drastically increased the number of components we use, since they’re so much easier to find.

The one thing I’m still unsure of is where routable components should go one we get to that point, since it feels weird to me that there would be a directory of full page templates right next to one of, say, buttons. The transition to the Pod structuring as the default may fix this over time, though, as the entire structure of the /app folder would be switched for that.

1 Like