---
title: Ember Module Unification
description: Scattering the files for a component across many directories makes simple tasks more difficult. It also obscures the shape of your project. So how can we make it better?
---
[Home](https://mutuallyhuman-pr-605.herokuapp.com/)
- [Team](https://mutuallyhuman-pr-605.herokuapp.com/team)
- [Work](https://mutuallyhuman-pr-605.herokuapp.com/work)
- [Blog](https://mutuallyhuman-pr-605.herokuapp.com/blog)
- [Contact](https://mutuallyhuman-pr-605.herokuapp.com/contacts)
# Ember Module Unification
By [Sam Bleckley](https://resources.mutuallyhuman.com/test/author/sam-bleckley) on 07 07 2016
> That of dividing things again by classes, where the natural joints are, and not trying to break any part after the manner of a bad carver.
> -- Plato, *Phaedrus*
Ember, being in its restless teenage years, has spent some time in Bad Places. One Bad Place looked like this:
```
| app/
| -- templates/components/my-component.hbs
| -- app/components/components/my-component.js
| tests/
| -- unit/components/my-component-test.js
| -- integration/components/my-component-test.js
| stylesheets/some-styles.css
```
(It's a fair cop -- you caught me. This is actually going to be about ember-cli, and how to make the most out of it).
## Why is this a Bad Place?
A component's controller refers to its template, and vice versa. A component's styles refer to the component's template. The meaning of each *depends* on the meaning of the others.
A component, being a component, has a defined interface. It should not affect the app outside that interface.
Component styles *should* be scoped to *only* apply to the component; styling is part of the component's interface.
To rename a component, to move it, to inspect the relationships, to recognize when a component has no style, no template, or no controller, to put a component in its own addon -- these should be simple things that only take a moment.
Scattering the files for a component across many directories makes these simple tasks far more difficult. It also obscures the shape of your project -- we all know an ember project has templates, components, and styles; a list of components gives an app identity.
## A Better Place
Luckily, Ember(-cli) is on its way to a Better Place:
```
| app/components/my-component/
| -- template.hbs
| -- component.js
| tests
| -- unit/components/my-component-test.js
| -- integration/components/my-component-test.js
| stylesheets/some-styles.css
```
Template and controller, together! This is better! With the [ember-component-css](https://github.com/ebryn/ember-component-css) addon, we can take yet another step:
```
| app/components/my-component/
| -- template.hbs
| -- component.js
| -- style.css
| tests
| -- unit/components/my-component-test.js
| -- integration/components/my-component-test.js
```
There, now we're beginning to see the joints and seams of the app appear in the structure of the code! The sharp cut of the interface is made visible even in the *directory structure*. Art!
## The Course is Set, and the Wind Favorable
```
| app/components/my-component/
| -- template.hbs
| -- component.js
| -- style.css
| -- test.js
| tests/integration/my-component-test.js
```
There's an encouraging proposal to bring the CSS changes into Ember proper, along with co-located tests. Check out [this RFC](https://github.com/dgeb/rfcs/blob/module-unification/text/0000-module-unification.md#how-should-tests-be-co-located-in-src) for a rosy vision of the future; and prepare your own projects for the joyful shift.
---
Image by Windell Oskay
### Related Topics
- [Uncategorized (106)](https://resources.mutuallyhuman.com/test/topic/uncategorized)
- [User Experience (20)](https://resources.mutuallyhuman.com/test/topic/user-experience)
- [Ruby (11)](https://resources.mutuallyhuman.com/test/topic/ruby)
- [Interaction Design (10)](https://resources.mutuallyhuman.com/test/topic/interaction-design)
- [JavaScript (9)](https://resources.mutuallyhuman.com/test/topic/javascript)
### Related Posts
### About Mutually Human
Mutually Human is a custom software design and development consultancy specializing in mobile and web-based products and services. We help our clients design, develop and bring to market innovative products and services based on insightful research and strategy aligned with business objectives. We’ve helped Fortune 500 companies, state governments, and startups.
- [Home](https://www.mutuallyhuman.com)
- [Team](https://www.mutuallyhuman.com/team)
- [Work](https://www.mutuallyhuman.com/work)
- [Blog](https://www.mutuallyhuman.com/blog)
- [Contact](https://www.mutuallyhuman.com/contacts)
logo
[Mutually Human Grand Rapids: 401 Hall St. SW Suite 430 Grand Rapids, MI 49503 USA](https://www.mutuallyhuman.com/contacts#grand-rapids)
[Mutually Human Columbus: 243 N. Fifth Street Suite 300 Columbus, OH 43215 USA](https://www.mutuallyhuman.com/contacts#columbus)
+1 616 475-4225
[hello@mutuallyhuman.com](mailto:hello@mutuallyhuman.com)
© 2017 Mutually Human