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)