Components are one of the most useful and powerful features in Ember, as well as other Javascript frameworks like React. In trying to solve a problem recently in the app I work on, I came across another way of using them which is as a “non-presentational component”, also sometimes referred to as “container components.” They’re a little different from the way you would normally use a component, since they don’t have a view, but are incredibly useful in the right situation.

A little background info on components

According to the Ember docs, Components are “used to turn markup text and styles into reusable content.” They can be included in any route’s template, even multiple times, saving you from copy-and-pasting the same code around your application. A component typically has two files associated with it, a view which is a handlebars template (which contains your HTML) and another .js file that’s a subclass of Component named after the name of the component, where all the logic lives. These files work hand in hand to display, manipulate and view data on a page, in a way that could also be easily reused all over your app.

Why use a component without a view?

The way that I used the non-presentational component and which I’ve seen mentioned in other blog posts is to be able to load a page with an almost skeleton loading screen and then to load the data afterwards. This gives the perception of loading for your users so they don’t have a completely blank page and know that something is happening. This is a pretty common practice today as even companies like LinkedIn and Facebook do it.

I used this method since I needed to load the data on the page but it was taking too long so I wanted the user to see something first. I was hoping to be able to load the data after the page rendered but I didn’t have access to any of those hooks in a route or controller, only the typical ones like init, beforeModel, model, afterModel, didTransition, etc. You can read more about the Ember component lifecycle here, but basically with components you have so much more power in regard to lifecycle hooks such as a didRender hook, which is what I was looking for.

As a non-presentational component, you can just create a component such as load-data with only a .js component file and no .hbs template, then use that component in your page and get access to the hooks available in a component. You can then use it to load some data or do some other type of work. Non-presentation components are more concerned with the way things work rather than the displaying of actual data.

tl;dr

Basically, you can use Ember components in lots of ways. They can be traditional components with a component .js file and a view or can have just have a view or a file with logic. It’s up to you, but I hope you now know how versatile a component can be and will think of this if you come across an interesting challenge where you need logic but no template.