Best approach for managing complex nested routes and shared state in large Ember applications

1

Hi everyone,

I’m working on a fairly large application built with Ember.js and I’m running into challenges managing deeply nested routes and shared state between different sections of the app.

As the application grows, I’m noticing that:

  • Some route hierarchies are becoming difficult to maintain
  • Shared state between sibling routes is getting duplicated
  • Data loading patterns are not consistent across nested routes
  • Component communication sometimes becomes hard to trace

Current setup:

  • Ember Data for API handling
  • Route-based data loading
  • Component-heavy UI structure
  • Services used for shared state

I also experimented with a temporary UI element labeled click here inside a test component to trigger state resets during debugging, which helped isolate some issues, but I feel the overall architecture can be improved.

Questions:

  1. What is the recommended pattern for managing shared state across deeply nested routes?
  2. When should services be preferred over route models or component state?
  3. Are there best practices for reducing duplication in route-level data loading?
  4. How do larger Ember apps typically structure complex route hierarchies?

Would appreciate insights from developers who have scaled Ember apps in production.

Thanks!