The Eight Ember Addons I Use On Every Project

The depth and breadth of the Ember addon ecosystem can be overwhelming to novice developers. Installing a new addon can feel like a gamble, since you often don’t know what the pitfalls are until after you’ve lived with it in your codebase for a while. Ember Observer does a good job providing some metrics, but there’s nothing like a referral from someone who’s dealt with an addon firsthand. With this in mind here’s my list of addons that, without exception, I install on every single Ember project I work on.

1. ember-power-select

I’ve yet to work on a project where I didn’t need to use a select menu. While the built in Ember helpers do a fine job with the basics, ember-power-select blows it away in terms of features and composability. It’s elegantly architectured so that it works well out of the box, but overriding any aspect is simple. Search, multi-select, and promise support are just the beginning. There’s a Bootstrap theme and Material theme, and any of the specifics can even be overridden with SASS variables. It’s very actively developed, issues are usually promptly addressed, and pull requests are quite welcome.

2. ember-cli-template-lint / ember-template-lint

There’s less to say about ember-cli-template-lint simply because it’s a “set it and forget it” sort of addon. It’s so simple and intuitive I usually forget to install it until an issue pops up and I’m left wondering why template-lint didn’t catch it (at which point I facepalm and get it installed). I wouldn’t be surprised if this becomes one of the default addons that ships with ember-cli at some point in the future.

3. ember-cli-document-title

Not particularly exciting, but no less important. ember-cli-document-title makes it dead simple to provide intelligent document titles on a route-by-route basis. You can roll up the titles to provide a nice breadcrumbs-esque document title (like “Home > Products > Widgets”), or provide dynamic segments in your title with data from your models. It may seem unimportant in the age of a gajillion browser tabs, but if you’ve ever looked at your “Back” menu only to see a long list of the same name you know how important accurate document titles can be.

4. ember-concurrency

Ember-concurrency is hard to summarize, but once you start using it, it completely changes the way you write your code. At it’s heart it exposes a Task primitive, which can be invoked like an action or called like a function. A TaskInstance can be cancelled, queued or restarted. You can easily access the property's last returned value, as well as its current state.

saveModel: task(function * () {
try {
yield this.get('model').save()
} catch(e) {
// Handle failure
}
}).drop()
<button onclick={{action (perform saveModel) disabled={{saveModel.isRunning}}>
Save
</button>

5. ember-cli-code-coverage / ember-cli-blanket

For the uninitiated, code coverage is the percentage of your code that’s hit while your tests are running. While it doesn’t give insight into the depth or quality of your tests, having an overview of the breadth of your tests can be crucial. Most CI solutions support failing the build if coverage drops below a certain metric, or drops from one commit to the next. These addons also make it easy to see which lines aren’t getting hit, and give you a file-by-file percentage so you can see which areas of your application need better coverage.

6. ember-cli-deploy

This addon is hands down amazing. While there’s quite a bit of decisions to be made in the setup, the documentation is excellent, and there’s a myriad of plugins available to support most configurations. It even supports the ability to instantly activate or rollback to a specific revision. Deployments are stressful times for everyone else, but those of us in ember-cli land can rest easy thanks to the hard work put in by the ember-cli-deploy team.

7. ember-cli-mirage

Mirage is a key part of writing acceptance tests. It’s essentially a mock server that can run during your tests, intercepting requests and spitting back fixture data. Mirage takes things a step further by introducing models, serializers, and a persistence layer on top of the route configuration. Mirage is such a de facto part of my workflow, I honestly don’t know how to write a complex acceptance test without it. The author was on a recent episode of Ember Weekend where he talked about the future of Ember Mirage. He’s got some exciting things coming down the pike, including automatic discovery of your Ember models, which will reduce even further the boilerplate needed to write an acceptance test. It sounds like when he’s done with it, the only setup needed to write an entire CRUD acceptance test will be a single this.resource('foo-model') entry in a configuration file!

8. ember-composable-helpers

This is a handy little collection of template helpers that can alleviate a lot of the boilerplate that can sometimes clutter up your components or controllers. Consider a typical controller with a a property like newModels: computed.filterBy('model.isNew') and a template like:

{{#each newModel as |foo|}}
{{foo.title}}
{{/each}}
{{#each (sort-by "title" (filter-by "isNew" model)) as |foo|}}

Honorable Mentions

It was hard to trim the list down to just the addons that I use on every project. Here’s a few honorable mentions that are worth checking out, but may not be necessary given the requirements of your application:

  • liquid-fire: Easy animations, including on a per-route basis.
  • ember-feature-flags: Easily turn on or off parts of your application. Includes test helpers for toggling them on the fly.
  • ember-cli-sass: Despite all the advances in CSS, I still prefer using a preprocessor like SASS. This addon makes it simple.
  • ember-component-css: Easily scope your styles to a component. Only not in the top 8 because I forgot it while I was writing this article!
  • ember-percy: Visual regression testing as-a-service! They’ve got a nice free tier to try it out.
  • ember-a11y: Accessibility helpers. Dead simple to make sure your application works with screen readers.
  • ember-cp-validations: Powerful validation library driven by computed properties.
  • ember-simple-auth: If you do any kind of authentication, you should check this out.
  • ember-sinon: Nice shim for Sinon for spies, stubs and mocks.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store