Todo: small is relative. This section should talk about ease of testability, and maintenance, as well as separation of "mental concerns" — even if a group of components is concerned with the same thing, often times, it can be broken up further to be more semantically meaningful.
What is a route-local component?
A component that is single-use — only used for a specific route. Since routes are how we divide up UI in Ember, if we could place components wherever it made the most semantic sense, these components would live adjacent to the route's files. Example:
app/
components/
routes/
blogs/
-components/
blog-list.hbs
route.js
template.hbs
In the above example project structure, the component blog-list
is local to the Route, blogs
. It does not need to live in the app/components directory as the blogs
route will be the only invoker.
For some historical context, this idea came from an experiment, Module Unification, and is being re-explored with template-imports (coming soon).
But today, we don't have the ability to put components wherever we want, so we must make and adhere to our own conventions.
Below is what @NullVoxPopuli has been doing with a hybrid classic/pods layout:
app/
components/
{shared-component-A}
{shared-component-B}
pods/
{route-name}/
{sub-route}/
foo.hbs
bar.hbs
application/
top-nav.hbs
off-canvas-container.hbs
models/
pods/
{route-name}/
{sub-route}/
route.js
# invokes both foo and bar components
template.hbs
application/
# invokes top-nav, off-canvas-container, etc
template.hbs
services/
# etc
The only downside to this is that the component invocations get somewhat long. For example:
<Pods::Blogs::Post::Foo />
(where blogs is route-name
and post is sub-route
from the prior example)