A few reasons to rely more heavily on Components in Ember and move logic out of Routes and Controllers

Nate Eborn
2 min readAug 10, 2017

Components and services are relatively new to the Ember framework, but since their introduction they have begun taking over many of the responsibilities once allocated to routes and controllers. Frameworks like React have proven that even routing can be handled quite elegantly using components, and it’s not unimaginable that routes and controllers may one day completely disappear from Ember. (Or Ember may simply be supplanted by Glimmer, which like React focuses on components as the core building block.)

The following is a list of reasons why and how I recommend developers start reducing their reliance on routes and controllers, and instead embrace the brave new world of components.

  • Routes and controllers are singletons that live for the life of the application. This is easy to forget, but important to be mindful of when using them as a place to retain state or execute asynchronous operations that may not resolve until after the route is no longer active. Services are a useful, easy to reuse alternative for deliberately preserving state or managing long running operations.
  • Code reuse at the route and controller level often relies on inheritance and mixins. Whereas components by design are composable.
  • Single responsibility principle. Routes already have a well defined niche (e.g. managing the loading of routes). Controllers less so. (I personally only use them for working with dynamic query parameters because of framework level support.) When asked to do more, routes and controllers can quickly become logic buckets.
  • Routes are removed a level from templates and components. That makes passing data down more cumbersome and indirect, and triggering route actions from templates and components more cumbersome and indirect (even with helpers like route-action).
  • Obligatory mention of ember-concurrency, which makes it much easier to handle asynchronous operations that are tied to the life of the component. Checkout my example using ember-concurrency to build container components in Ember.

--

--