14 Comments

Two Techniques for Keeping Your Ember.js Project Clean

I’ve had the opportunity to work on an Ember.js application for the better half of the last year. During that time, I’ve learned a ton about the Ember framework and web development in general. I’ve also seen how an Ember app can transform as it continues to grow. If I could start all over, these are the choices I would make to keep my Ember project clean.

Organize with Pods

The default organizational structure for an Ember project is by type. For example, a student resource would have the following file structure:

  • app/controllers/student.js
  • app/templates/student.hbs
  • app/routes/student.js
  • app/models/student.js

As your app gets larger, more and more files go into these four folders until they become unwieldly.

With pods, you can organize your application by feature. Using pods, the example above would translate into this:

  • app/student/controller.js
  • app/student/template.hbs
  • app/student/route.js
  • app/student/model.js

There are a couple of benefits to doing this. For starters, it separates your application into more logical groupings. Instead of flooding a controllers directory with unrelated parts of your application, you can keep your files neatly organized into resources.

This structure also makes fuzzy finding easier. For example, if I want to find the student controller in the default structure, I need to preface what I actually want (student) with the type (controllers). However, with pods, I can fuzzy-find the same controller by simply looking up “student.”

Use Template Helpers

One of the features I like the most about Ember is data binding. It allows you to transform and manipulate your data so easily. However, sometimes it can be too easy, and you fall into a trap of creating computed properties for very small amounts of work. This creates bloated and unreadable controllers.

One common example involves transforming dates into strings. At first, you only need to do this in one place, so you use a library like Moment.js and do the conversion in place. Then, you need it in a couple of other places, so you create a date formatting helper and use that in your controllers. Before you know it, you’ve imported that helper into several controllers.

I fell into this same trap until I learned about template helpers. You can use these helpers to create a function that is bound to a property, similar to computed properties. Let’s go back to the date example. We can write a simple helper that takes a date property and turns it into a string.


// In app/helpers/date-string.js

export default Ember.HTMLBars.makeBoundHelper( function(value, options) {
  return moment(value).format(options["format"]);
});

{{date-string date format="D MMMM YYYY"}}

Much cleaner, don’t you agree? By keeping these tips in mind, along with following Ember’s philosophy of data down, actions up, it’s easier to create and maintain a clean Ember project. What other sorts of things do you do to keep your Ember project clean?