Ember Best Practices: Brace Expansion for Computed Properties

braces
Doug Yun

Engineering Manager

Doug Yun

As an Ember developer, I can count on fresh features popping up almost every other month within a new release. There are numerous benefits to this, which certainly are out of the scope of this blog post. However, I will briefly cover one particular gem from 2014 - an oldie, but goodie - of a feature.

How many times have you written something like this?

import Ember from 'ember';

const {
  Component,
  computed,
  get
} = Ember;

export default Component.extend({
  farmSentence: computed('animal.species', 'animal.noise', 'farmer.name', 'farmer.location', {
    get() {
      let animal = get(this, 'animal');
      let farmer = get(this, 'farmer');

      return `At ${get(farmer, 'location')}, Farmer ${get(farmer, 'name')} owns a ${get(animal, 'species')} that says "${get(animal, 'noise')}!"`;
    }
  })
});

Notice how we consume animal.species, animal.noise, farmer.name, and farmer.location? There are a lot of shared dependent keys. Gross.

Computed Property Brace Expansion

Well, [back in 2014, “brace expansion” was introduced][brace expansion]. Let’s use this feature and tidy up our component!

import Ember from 'ember';

const {
  Component,
  computed,
  get
} = Ember;

export default Component.extend({
  farmSentence: computed('animal.{species,noise}', 'farmer.{name,location}', {
    get() {
      let animal = get(this, 'animal');
      let farmer = get(this, 'farmer');

      return `At ${get(farmer, 'location')}, Farmer ${get(farmer, 'name')} owns a ${get(animal, 'species')} that says "${get(animal, 'noise')}!"`;
    }
  })
});

Why use Brace Expansion?

Isn’t that much nicer? I prefer using brace expansion, because it organizes the dependent keys and makes it easier to read. Goodness forbid a coworker of yours writes dependent keys without ordering them alphabetically:

...

// This ordering isn't ideal
farmSentence: computed('animal.noise', 'farmer.name', 'animal.species', 'farmer.location', {
  get() {
    let animal = get(this, 'animal');
    let farmer = get(this, 'farmer');

    return `At ${get(farmer, 'location')}, Farmer ${get(farmer, 'name')} owns a ${get(animal, 'species')} that says "${get(animal, 'noise')}!"`;
  }
})

...

To those new to Ember, hope you learned something new! And to those experienced in Ember, hope this was a refresher! And to my coworkers that don’t use brace expansions, shame on you!

Thanks for reading.

[brace expansion]: http://emberjs.com/blog/2014/02/12/ember-1-4-0-and-ember-1-5-0-beta-released.html#toc_property-brace-expansion)

Newsletter

Stay in the Know

Get the latest news and insights on Elixir, Phoenix, machine learning, product strategy, and more—delivered straight to your inbox.

Narwin holding a press release sheet while opening the DockYard brand kit box