Angular, Ember, And Backbone: Which JavaScript Framework Is Right For You?

You’ve got the perfect idea for a JavaScript-based application or website. Now all you have to do is pick the right open source framework.

If you’re reading this, I’m assuming that you’re a beginner or novice developer, or else you’re hiring somebody else to develop your idea for you. But while you’ve probably heard the words Angular, Ember, and Backbone, you might not know what they are, or why they help web development.

Developers use JavaScript for lots of different Web applications because it can really make the client side—that is, the user’s side—look and work beautifully. But while it may not look old, the JavaScript language has been around for nearly 20 years, and it has the variety and vastness to prove it. If you keep adding more and more (see: redundant) code to make it work in multiple browsers and use cases, it can quickly become a big, confusing mess.

Enter JavaScript frameworks. Frameworks like Angular, Backbone, and Ember bring structure to your JavaScript code and keep it organized. They’re all open source, so they’re constantly being improved by the community. They also save you time because they’re each built on top of JQuery, a powerful library that makes some of JavaScript’s tricker operations easier to perform and more readable.

Here’s an example of how referencing JQuery might enhance the coding process: Instead of writing the tedious lines of code to generate a table, you could insert a reference to a JavaScript library that generates the table with just one line of code. Even better, these shortcuts don’t just help you work faster, they make your code work in multiple environments, too.

However, picking your JavaScript framework isn’t like picking between three different-colored T-shirts. In fact, it’s more like choosing between three completely different articles of clothing: Each piece helps to cover you, but they all function and look very differently. Carrying the metaphor even further, you wouldn’t wear a bathing suit in a cold climate, or a winter coat at the beach. Likewise, different JavaScript frameworks are better for different types of applications.

Here is a rundown of each of the three hottest frameworks, and what they’re best for:

AngularJS

Initially released in 2009, AngularJS is the oldest of the three frameworks. Probably as a result, it also has the largest community.

In 2013, Angular had the fourth-largest number of contributors and third-largest number of stars (kind of like Facebook “Likes”) on GitHub. On Built With AngularJS, you can check out all of the applications currently being developed with Angular.

Some of the most well-known companies that credit AngularJS as the JavaScript framework include Google and Nike. Beginning in August 2013, General Motors cars feature applications that were built in Angular. You’ll also notice a lot of news sites using AngularJS on their front pages, like the Guardian, the Huffington Post, and MSNBC.

According to Igor Minar, lead developer on AngularJS at Google, it’s more about Angular’s adaptability than anything to do with the news.

“I don’t think that Angular is more suitable for news sites than for other sites and apps. But there definitely is a bunch of them,” Minar said. “I think it’s just that these are high-visibility sites maintained by companies in highly-competitive market which means they keep their technology stack fresh in order to be efficient at making changes and providing great user experience.”

Why are sites that use Angular good at making quick changes? Probably because Angular, more aggressively than any other framework, nudges developers to create easily testable code and test it often. Though some developers might find this guidance annoying, it pays off in catching little coding errors before they have a chance to become big ones.

Another peculiarity of Angular is that it has a lot of its own terms and jargon. Minar thinks this is because the framework includes some features no other JavaScript solution does.

“Some terms we use commonly are specific to Angular and might come across as jargon or strange,” he said. “The good news is that the web standards are catching up and giving ‘official’ names to some of these concepts.”

If you code with Angular, you’re coding on Angular’s rigid terms, but Google Trends points to that not being such a bad thing. You’ll have to use Angular’s jargon and it might take time to make your code more testable, but the result is adaptability later on.

Backbone.js

Backbone came out in June 2010, and its community is nearly as large as Angular’s.

Many popular applications use the Backbone framework, including Twitter, Foursquare, and LinkedIn Mobile. Also worth noting is that a number of music apps were built with Backbone, including Soundcloud, Pitchfork, and Pandora.

However, there’s something about Backbone that’s very, very small compared to other frameworks—and that’s its download size. Compressed and minified, AngularJS is about 36K; the Ember starter kit is even bigger, at 69K. But Backbone, compared to its contemporaries, is downright puny, at just 6.4K.

Backbone’s diminutive size is typically its biggest selling point, since it only depends on one JavaScript library instead of several. As a result, Backbone is extremely lightweight, which means it’s good for building fast and responsive applications—but it’s most effective if those web applications are themselves small and single-page, or better yet, only part of a page, like many of the music apps using Backbone right now.

Here’s another characteristic that makes Backbone special: Its framework is remarkably hands-off, or as some developers put it, Backbone doesn’t “hold your hand.” This means experienced JavaScript developers can quickly get started, but less experienced developers might find themselves writing a lot of “boilerplate,” or repetitive code.

According to Backbone creator Jeremy Ashkenas, concerns about needless boilerplate coding are “a silly marketing campaign.”

“If you’re writing a lot of ‘boilerplate’ code in Backbone, then you don’t know how to use it,” Ashkenas said. “In general, in programming, if you’re writing the same thing over and over again—you write a function to do it automatically for you.”

If you’re having trouble, however, Backbone has an especially active community rife with free tutorials for getting started with the framework. Plenty of developers have taken to GitHub to upload useful examples and how-tos that take the place of other frameworks’ hand-holding.

If you’re working on a single-page application or widget—and you’re comfortable with being a self-starter—Backbone is likely the lightweight framework for you.

Ember.js

Ember is the newest kid on the block, but it’s already making waves. Initially released in 2011, Ember just hit version 1.0 last year. It also recently become Code School’s latest course, and given that Code School already offers courses for Angular and Backbone, it’s likely the newest course will grow to become equally popular.

LivingSocial, Groupon, Zendesk, Discourse, and Square are some of the most well-known applications that have adopted Ember. Ember creators Tom Dale and Yehuda Katz say it’s easy to see when a site is using Ember because of its loading speed.

“They feel like normal websites, they’re just far faster than what you’re used to,” Dale said. “It’s because all the rendering happens in the browser. It may look like a regular website, but under the hood, it’s architected like an iOS or Android app that isn’t being rendered by the server.”

At 69K minified and zipped, Ember is the largest framework of the three, but Katz points out that often medium-sized jpegs are just as large.

“The reason I feel confident that the features we’re baking in are things you need anyway is because I frequently look at the compiled size of Ember apps alongside other apps in the wild, and they’re all roughly the same size,” said Katz, implying that developers who use other frameworks often download additional libraries and tools during the building process.

Ember’s larger library size partly explains why it’s the largest download of the three Javascript frameworks, but another reason is because Ember comes with a lot of built-in support for standard code features. If you’ve ever tried to click the “back” button on a website only to get no response, you know all about what happens when JavaScript applications break. Ember’s support features are there to keep small but annoying errors like those from happening.

Ember’s library size and support network are its two greatest strengths, but if you’re only trying to create a small widget or single-page app, it might be overkill for you. If you’re working on a multipage, navigational, long-term project, Ember might be your pick.

When developers discuss these three frameworks online among their contemporaries, the discussion often devolves into one of personal preference. But from a non-developer perspective, it’s clear that different applications—and different needs—make each framework shine its brightest.

Images by Madeleine Weiss for ReadWrite