AngularJS vs. Ember.js

I was on a complex AngularJS project and it was an awful experience. Here’s a write-up from a consultant’s point of view, to help answer the question: Which javascript framework should my organization invest in and put to use?

I. AngularJS

A. Pros

1. Ease of writing tests

• Caveat: May be necessary to write tests because the framework relies on weak typing (see below). The Javascript interpreter can’t find errors very easily.

In practice, however, I found that a lot of time was taken getting the test environment functioning.

[At this point in my research, there were too many cons and they were show-stoppers: I could no longer recommend AngularJS to my clients.]

B. Cons

1. It’s a Google project

• Is it just a “flavor of the month”?

• Google doesn’t seem to use it on any public apps. (!)

• Can’t find any busy well known apps using it. (The YouTube app on PS3 is the biggest production app I could find.)

2. Coding Style

• Weak typing

Makes it hard to debug. Error messages aren’t very clear: Unhelpful or wrong line numbers. E.g, my error was in controllers.js, but this isn’t listed in the error message.

• Generic functions don’t describe their purpose

E.g. to create an app:

(i) shoeStore = angular.module('shoeStore', []);

(ii) This code doesn’t make clear that it’s creating an “app”, the Angular project’s name for it. Note also the redundant app name and required empty options array. 

vs. Ember:

(i) shoeStore = Ember.Application.create();

E.g. to create a service:

(i) myApp.factory('weatherBureau', function() { return { message: "Today's weather" }})

(ii) Same issue here. Nothing to indicate this is a “service”. This is also an Angular neologism to learn. However, this term doesn’t usually appear in the code itself.

• Not DRY

3. Docs

• Docs & Videos don’t show real-world syntax.

• Academic, harder to read, and neologisms.

4. Framework

• Need to manually build “Active Tab” navigation support.

• The “Dot” issue violates Principle of Least Surprise. http://www.egghead.io—DTx23w4z6Kc

“Lots of tutorials show this [potentially incorrect] way to code”.

“You’ve [inadvertently] destroyed the scope inheritance.”

• The design exposes implementation details & requires app devs to understand the implementation.

5. Gotcha’s

• Controllers don’t execute, and report no error, if the partial is just an empty file.

C. Examples

1. http://builtwith.angularjs.org/

(But this is actually just tutorials and demos. Couldn’t find many/any production sites here)

2. DQ Cakes

Angular.js product chooser

http://www.dgcakes.com

II. Ember.js

A. Pros

1. Built-in support for “Active Tab” navigation.

2. Strongly typed.

• The interpreter often gives helpful error output.

3. DRY.

4. In use by high-volume, well known apps

• Square

• Travis CI

• Zendesk

• Groupon

• Living Social

5. Framework

• Seems to avoid exposing implementation details. App devs work via the public API.

• All framework features are exposed via well named API methods.

Makes the code easy to read and understand.

• Uses HTTP caching to avoid redundant server requests It’s faster out of the box; caching built-in.

B. Cons

1. Gotcha’s

• Attributes fail silently if they’re not set up as “bound” or “unbound”

2. Framework

• The REST adapter is not considered ready for production use.

• Has gone under rapid development in the past few months. The API is now at a stable 1.0, but lots of docs & S.O. posts online are outdated.

• Code errors can sometimes result in no output and no error message.

One comment

  1. antoine90Antoine

    Would you go for ember on another project?

    I haven’t used angularjs yet and I was planning to do it for my next project, I might reconsider it now.

    However, I used ember for a project, and I found their documentation particularly awful. It was really a pain to find useful information sometimes
    The framework itself is pretty nice, but I won’t use it again unless they start writing a real doc.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s