Observers and Computed Properties with Ember.js

September 25, 2015 by Damien White

Looking Through Binoculars

Two powerful tools in the Ember.js world are computed properties and observers. If you aren’t familiar with these, don’t worry as examples of both will be given.

Computed Properties

First, let’s look at a computed property:

fullName: (function() {
  return this.get('firstName') + ' ' + this.get('lastName');
}).property('firstName', 'lastName')

This example is a very simple property. It just takes a model’s firstName and lastName and combines them. This property will be updated any time the model’s firstName or lastName changes. This is signified by the collection specified in the property method (the last line of the sample code). We could then take this property and use it in a template.

Read More »

Setting Up VirtualBox for Running ruby_odata's SampleService

April 23, 2015 by Damien White


I was asked how to setup the SampleService used for integration testing the ruby_odata library (with Cucumber). If you’re not familiar with ruby_odata, it is a RubyGem used to communicate with OData services through Ruby. I’m happy to say that it’s been used in some rather large projects. The ruby_odata project contains tests that run in isolation (unit tests and acceptance tests), but there are also full integration tests that work against a “SampleService.” This service needs to run on Windows, and a lot of developers, including myself, use Linux or OS X as their development machine. In order to fully test ruby_odata, we’ll set up a virtual machine using VirtualBox and run the SampleService from there.

Initial Steps

I’m not going to bore you with the installation details of Windows, as I’m sure you’ve installed it before. I’m going to be installing Windows 8.1 Pro on a VirtualBox machine with 4GB of RAM. You can of course use another version of Windows, like Windows 7, but I figured I’d go with the latest release for this example. Once you have Windows installed, be sure to install the VirtualBox Guest OS Additions. Once you install the additions, make sure you reboot the virtual machine.

Figure 01: VirtualBox Guest Additions
Figure 01: VirtualBox Guest Additions
Read More »

Integration and Acceptance Testing with Ember.js

April 22, 2015 by Damien White

Ember: Tested

If you’ve been following along with my last couple of posts, welcome back. If not, I’d recommend you check out JavaScript Testing 101. You should especially read Unit Testing Ember.js since we’ll be continuing to build off the app we started in that post. In that post, we created a new Ember-CLI application and started unit testing our models (of which we only have one, contact), our controllers (where we have one, ContactsController), and our route (again, we have one, contacts). I have posted the complete code on GitHub for your convenience.

Integration != Acceptance Testing

Some people use the terms integration and acceptance testing interchangeably, but they are wrong. While the tests may look similar, that does not make them the same. Integration tests are tests between systems, ensuring that everything works in harmony. On the other hand, acceptance tests, are written from the point of view of a user. For example, we might write an integration test to verify that we can pull a list of contacts from the API. While if it were an acceptance test, we would test whether or not a list of contacts appear on a page. In this case, often, they may result in testing the same things, but from a different point of view. I just wanted to clarify the differences in case you were not aware of them. We are going to focus acceptance tests in this post because we want to focus on user interactions, and our tests will test the application end-to-end.

Read More »

Unit Testing Ember.js

March 20, 2015 by Damien White

Unit Testing Ember


In my last post, I introduced you to testing JavaScript code with QUnit. Today I’ll be walking you through another example, but this time we’ll be using Ember.js as our framework. We’ll be building a small contact management application from the ground up using TDD along the way. Let’s get started!

New Ember Application

We’ll start by creating a new Ember.js application. We’ll do this using Ember-CLI, the preferred way to start a new Ember application (per the website, Figure 01)

Figure 01: Snippet of the Ember Homepage
Figure 01: Snippet of the Ember Homepage

To get started with Ember-CLI, you’ll need Node.js and NPM installed, it’s as simple as going to the Node website and clicking the big Install button on their homepage. Easy-peasy. Then it’s simply two commands:

npm install -g ember-cli
ember new contacts

Then change into the contacts directory. Open that folder in an editor of your choice.

Finally, run the command ember serve to have your app served up on port 4200. Navigate to, and you should see a simple “Welcome to Ember.js” message.

Read More »

JavaScript Testing 101

March 06, 2015 by Damien White

Thumbs up for testing


If you’ve been working with a lot of JavaScript or another dynamic language, you probably have come to the conclusion that you should have automated tests for your code. If you haven’t come to the realization yet, I suspect you’d like to make your life easier. Wouldn’t it be nice to know that your latest round of changes didn’t break your application without you having to manually go through every page in your application looking for issues? In this post, we’ll get started writing tests for our JavaScript code. For testing we’ll use the QUnit library. Why QUnit? First, it’s the oldest of the JavaScript testing frameworks. Also, Ember.js relies on it and in future posts I’d like to go into testing Ember code. Having this QUnit primer will help you test any JavaScript code, not just Ember code. Let’s get started!

Read More »

Ember + Emblem JS = Happiness

December 31, 2014 by Damien White

I’ve talked about Ember in my past few posts, and figured I would continue. Today we’ll look at an alternative templating library to Handlebars, Emblem.js.

Alternate Templating Engines

If you work with Ember, you’re very familiar with Handlebars. Handlebars makes it easy for us to add expressions to HTML. Writing HTML is great and all, but it’s very verbose. There are alternate templating engines available for server-side frameworks like ASP.NET MVC, and Rails. Two of these templating engines are Ruby Slim and HAML, both of which allow you to write slimmed down versions of HTML. But of course all of the engines render straight HTML as that is what browsers understand. Writing slimmed down HTML is advantageous for a few reasons. It definitely saves typing and thus time. Both Ruby Slim and HAML are sensitive to whitespace, meaning that your markup needs to be properly indented as indentation is important to determining hierarchy. With HTML, you can write all sorts of messed up code and how fun is that to maintain? We as developers usually try to keep our code properly indented, but these alternative templating engines, force us to maintain that standard. Finally, these alternate templating engines just make your code look nicer as well as easier to maintain. Why should the server get all the templating love? Now if only there were just a client-side version of something like Ruby Slim ;)

Read More »

Using X-Editable with Ember JS

November 12, 2014 by Damien White

In a couple of apps I’ve worked on, we’ve used the jQuery plugin X-Editable for entering values instead of bulky textboxes. X-Editable works nicely with Bootstrap and pops-up an editor in order to fill in a value. If you aren’t familiar with X-Editable, I encourage you to check out their demos. Figure 1 shows a simple screenshot of what a typical pop-up looks like.

Figure 01: X-Editable Popup Form
Figure 01: X-Editable Popup Form

Figure 2 shows that X-Editable can also do inline forms if you choose instead of a popup.

Figure 02: X-Editable Inline Form
Figure 02: X-Editable Inline Form

X-Editable works great, but what if you want to use it with Ember? That’s where I ran into a problem. You see, X-Editable changes the value that you have for you. We don’t want that. We want it to flow through Ember so everything is properly bound. Let’s start with how we might accomplish this goal. Read More »

Setting Up Foundation and FontAwesome with Ember-CLI

October 02, 2014 by Damien White

If you followed along with my previous posts on Ember CLI, you were able to setup Emblem and CoffeeScript as well as Sass and Compass with Ember CLI. In this post we’ll start using some styling libraries, like Zurb Foundation and Font-Awesome.

Laying the Foundation

We already have Bower and a bower.json file from Ember CLI, so adding a Bower dependency is easy.

bower install --save foundation
Read More »

Setting Up Sass and Compass with Ember-CLI

September 04, 2014 by Damien White

If you followed along with my previous post on Ember CLI, you were able to setup Emblem and CoffeeScript with Ember CLI. Now let’s move on to some styling with Sass. Well, SCSS and Compass.

Setting Up Sass

Sass is super easy to setup thanks again to Broccoli:

npm install --save-dev broccoli-sass

Now you can change the styles/app.css file to app.scss. Restart your server and you’re now using SCSS.

Read More »

DLL Hell Strikes Again

August 10, 2014 by Damien White

I was working on an old MVC4 project that was running on .NET 4. I couldn’t upgrade it to 4.5 because this app runs on a Windows 2003 server and .NET 4.5 doesn’t support Windows 2003. Thus, I was stuck targeting good old .net 4. Not the end of the world, or so I thought. I then went to upgrade Kendo UI for MVC by Telerik. I used the MVC 4 version of Kendo since I’m using MVC 4 and that’s just the logical thing to do. I built and got a warning that prevented me from using the Kendo.Mvc DLL.

The primary reference "Kendo.Mvc, Version=2014.2.716.440, Culture=neutral,
PublicKeyToken=121fae78165ba3d4, processorArchitecture=MSIL" could not be resolved
because it has an indirect dependency on the assembly "Newtonsoft.Json, Version=,
Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed" which was built against the
".NETFramework,Version=v4.5" framework. This is a higher version than the currently
targeted framework ".NETFramework,Version=v4.0"
Read More »