Best practices for Component Folder structure?

Questions General
7

Yeah hundreds of components would definitely get out of hand. You have a few options:

  1. subdirectories: say you have a component called “bar-chart” and you could put it in components/foo/bar-chart and then use it in a template like this: {{foo/bar-chart ...}}. I think there might be caveats to doing this with Angle Brackets but I can’t remember offhand. You could organize these subdirectories by type, or function, or whatever you want really. The main downside is that component invocation becomes more verbose.
  2. Use pods structure. Pods was a more experimental file layout where “unit” files (e.g. a component and its template, or a route and its controller and its template) are co-located. It will be replaced by module unification eventually, but is totally usable in the meantime. I think you can nest components with this structure but honestly can’t remember.
  3. Try to use module unification WIP. This might be most natural and it will be fairly future proof, but you also might run into bugs or roadblocks since it is not a fully implemented concept yet.
  4. Organize your components into addons (either in-repo or separate). At my company we have a UI toolkit library with basic building blocks like buttons and cards and stuff, and then more project specific addons that contain components that we want to reuse across apps/engines but that also have more app-specific business logic or look/feel. There was a recent thread about building a UI toolkit that might be of interest.
  5. Look into engines. Engines are kinda like “mini apps” that are fairly isolated and can be mounted either as routes or without routes like a component (routable vs routeless engines). They can contain their own components so you could break a complex app into a series of engines that compose together to form a single app. LinkedIn uses a ton of engines. We have one of each type at my company and they work pretty well for isolating and organizing pieces of an app. Only caveat is that they are another concept to learn and configure and while fairly well supported they are still technically a “beta” feature.
1 Like