Ember.js Validations the Easy (and Fast!) Way

Almost all modern single-page web applications need to receive and validate data. Often, this is in the form of user inputs, but it can also be data derived from sources that we have no control over. In this post, I will describe Ember-CP-Validations, a fantastic Ember.js validation library that I have used to make writing Ember validations very easy, and also very fast.

What Is a Validation?

Wikipedia describes data validation as “the process of ensuring that a program operates on clean, correct and useful data.” Examples of common validations we see every day:

• Presence: Confirms that something exists (for example, the user must provide a password when logging in).
• Numericality: Validates that the value is a number.
• Matching: Matches a value against some regular expression (for example, to confirm that a string is an email address or ip address).

Why Use Ember-CP-Validations?

There are many libraries out there for doing Ember validations, such as ember-validations, ember-model-validator, and ember-simple-validate, to name a few. So, why use Ember-CP-Validations? There are three huge reasons:

1. It contains no observers. At all.
2. It supports both Ember Data models and regular Ember.Objects.
3. It includes generators. Generators are command line tools for easily creating a validation and a unit test for the validation (supports Mocha testing, too!).

Besides that, Ember-CP-Validations contains a pretty standard DSL for defining the validations, inspired by validators in Ruby on Rails’ Active Record. Let’s examine each point.

No Observers

To understand what is so terrible about observers in a validation library, a developer needs to know the key difference between an observer and a computed property in Ember. Stephen Penner gave a nice talk on this topic, The Observer Tip Jar, but the TL;DR summary is that observers are eager and do work before anyone consumes their value, while computed properties are lazy–nothing happens until something watches them (they do their computation on demand).

Every validation library works by watching for changes on the data. When the data changes, the validation checks if it passes or fails and reports failures to the client. Because observers are eager, any validation implemented with them will fire every time the value changes, regardless of whether or not anyone is watching that value. In a large, complex app there can be hundreds of data models, each with validations. Developers can quickly run into performance problems when observer-based validations run even though the data isn’t being consumed.

Ember-CP-Validations uses computed properties exclusively, so the validation only runs when a data change has occurred and the data is watched. I personally have worked on an application with ~50 models (each with some validations) that saw major improvements in loading time by moving to Ember-CP-Validations.

Supports Ember.Objects

Some Ember validation libraries only work on Ember-Data DS.Model types. Ember-CP-Validations works on any plain old Ember.Object by creating a mixin for each set of validations as follows:

import Ember from 'ember';
import { validator, buildValidations } from 'ember-cp-validations';

const Validations = buildValidations({
  username: validator('presence', true),
  password: [
    validator('presence', true),
    validator('length', {
      min: 4,
      max: 8
    })
  ],
  email: [
    validator('presence', true),
    validator('format', { type: 'email' })
  ]
});

In the above code, buildValidations takes in the set of validations required and returns an Ember.Mixin that can be mixed in to any Ember.Object. Simple and flexible!

Includes Generators

Generators are convenient, command-line routines that make creating the files and basic scaffolding automatic. In the Ember-CP-Validations case, you can create a validator called foo with some basic scaffolding to help you get started. Just type ember g validator foo and ember g validator-test foo. This really helps take tedious tasks out of development and supports the style of test-driven development that we prefer at Atomic Object.

Ember-CP-Validations has been a joy for me to use, I encourage you to check out the github repo. That page also contains a demo application and great little tutorial video (that this post borrows heavily from!) authored by Offir Golan. I’d love to hear any additional libraries you have found useful for Ember development.