Posted On

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

With so many different JavaScript frameworks to choose from, picking the right one for your project can quickly become a rather daunting and overwhelming task. These days, developers are spoiled with choice when it comes to selecting an MVC framework for structuring and organizing their JavaScript web apps.

In fact, it’s got to the point where we are seeing new libraries and frameworks being released by the JavaScript community on such a regular basis that its hard to keep up.

But just how do you decide on which to use in a sea of so many options? The answer to that question has a lot more to do with what kind of application you are building rather than choosing which framework is better. I wrote this article to help you choose between the two most popular MVC frameworks, AngularJS and EmberJS, built with Javascript to create single-page applications (SPAs).

Why JavaScript MVC Frameworks?

The massive growth in rich, JavaScript-heavy web applications has lead to a huge array of frameworks designed to help you build apps.

As the web has progressed, and as technology enhances, what we are seeing is a trend in the web where a lot of what was taking care by back-end servers is now being tasked to the client side.

Front-end frameworks are becoming very established in terms of being able to do more complex tasks, and automate a lot. The crucial difference between single-page applications and standard ones is the one-page interface and moving logic from the server to the client side.

Most of the application logic is written with client-side technology using JavaScript and is executed in the browser. HTML markup, JavaScript and CSS are loaded once when the application starts, while all the other required resources are retrieved dynamically when needed.

JavaScript MVC Frameworks are a big topic now that we use JavaScript to bind data, send it back and forth between server and client. A software framework is used to make the process of application development faster since it contains considerable housekeeping and utility code in order to help bootstrap your application.

These frameworks follow roughly what's known as an MVC pattern which separates the concerns in an application down into three parts: model, views and controllers. Models deal with data, fetching it from databases and returning it. Views then display the data, and controllers link the models and views together.

Of course, that's a very simplified explanation, but the idea in essence is to keep the presentation and the data completely separate, which brings huge benefits as your code starts to grow in complexity. If you've ever worked with a framework like Rails, the MVC approach will be familiar to you.

Both EmberJS and AngularJS are alike on a number of levels, but also differ in several elements. For example, AngularJS displays a large static data set more quickly than EmberJS. On the other hand, EmberJS will make it far more easy to add interactivity to that large data set, handling changes more efficiently.

At the end of the day, each architecture has its own trade-offs. Simply evaluate your application’s needs versus the strengths of each framework when determining which framework is right for you.

What is AngularJS?

AngularJS is a very powerful, front-end MVC framework, developed and maintained by Google designed to make your front-end development as easy as possible.

AngularJS is a complete solution for rapid front-end development. There are plenty of frameworks and plugins available. As such, it can sometimes prove difficult to sift through all of the noise to find useful tools. Recently, AngularJS has received a lot of attention, especially after Google got involved in the development and today still is actively maintaining the project.

AngularJS is crammed full of features such as two-way binding and built-in directives. Two way data binding happens when a model variable is bound to a HTML element that can both change and display the value of the variable connecting the HTML and JavaScript together. This means that when the user interacts with the DOM, changes automatically are reflected into the JavaScript model, and if you do something to the JavaScript model the changes reflect back into the DOM. In general, we could have more than one HTML element bound to the same variable.

Directives is the Holy of holies of AngularJS. It is AngularJS’s core feature and one of the most powerful feature of AngularJS; also a big weakness because so many people find it difficult to write them.

They allow you to extend HTML to answer the needs of web applications. Directives let you specify how your page should be structured for the data available in a given scope. In other words, a directive is a way of teaching HTML new tricks. Even though HTML is really powerful, sometimes we need more.

Without a doubt, you can do pretty amazing things with AngularJS without even needing that much knowledge. The basics of it are easy to pick up, but it does have a steep learning curve once you’ve passed this initial hurdle. There is an extensive amount of documentation but some of it is rather cumbersome and in some cases, incomplete. The good thing is that it does have a great community to quickly get started.

Also, because AngularJS is built by Google, you can be sure that you're dealing with efficient and reliable code that will scale with your project. If you're looking for a framework with a solid foundation, AngularJS is your choice!

What is EmberJS?

EmberJS, formerly known as Sproutcore 2.0, is still relatively new compared to AngularJS. EmberJS is an increasingly popular opinionated, convention-based framework more suitable for large-scale, more ambitious and long-lived projects, while AngularJS appears perfect for smaller applications or components added to the already existing applications.

Similar to AngularJS, EmberJS has a rather steep learning curve, requiring a higher level of investment to learn the basics as it’s changing so rapidly and a lot of the documentation can be out of date. If you have experience in developing Rails applications, you might want to think hard about EmberJS because the conventions are so similar. The reason is one of the core contributors to EmberJS was both jQuery and Rails teams, basically making EmberJS friendly to Rails developers in terms of built tools and developer experience.

EmberJS is huge on convention over configuration, promoting maintainability, productivity, and collaboration. These standards effectively eliminate "spaghetti" code and confusion. Ultimately, you spend more time on the building business logic of your application instead of writing boilerplace code.

Evaluating the Frameworks

Before you start work on your next project, evaluate the frameworks using these parameters to help you decide on the framework you will be using:

  • Getting started
  • Size
  • Developer productivity
  • Community support and popularity
  • Testing

Getting started

AngularJS is very easy to start with. It has a very high "wow" factor at the beginning. You can do some awesome things like two-way bindings and out-of-the-box directives and filters – without having to learn much. And it looks quite easy at first sight.

From there, the learning curve becomes steep. It is a complex framework with lots of peculiarities. Reading the documentation is not easy as there is a lot of AngularJS specific jargon and a serious lack of examples. However, once you know AngularJS well you be can very productive with it, no doubt about that.

EmberJS also has a steep learning curve like AngularJS, if not steeper. EmberJS requires some learning to get started and there needs to be a high learning investment at the beginning to get basic things done. EmberJS lacks the early "wow" factor. It is highly opinionated about how certain things should be done including how you name your objects and how you organize your files.

Size

The size of the framework is a very important parameter because it adds to the overall size of your application. This is an important consideration if you are doing mobile development.

The size of the framework affects performance and the trade-off is between features and flexibility. The more flexible the framework is, less is the size but developers will have to write a lot of code.

On the other hand, the more ambitious and feature-rich a framework is, the more is the size and difficulty integrate it.

As far as external dependencies, AngularJS does not have any while EmberJS needs jQuery and Handlebars.

Currently, the size library alone (no dependencies, just min) for AngularJS is 126KB and EmberJS is 408KB.

Developer productivity

AngularJS may be difficult to learn but once you get the hang of it, you can be very productive with it. Due to its inherent flexibility, however, it does require you to write a lot of boilerplate code which is something that goes against developer productivity.

This is where EmberJS really shines. Because it is full of strong conventions it does a lot of stuff automatically for you. All you would need to do is learn and apply those conventions. Then, trust EmberJS to do the right thing.

How easy is to find help, tutorials and experts?

Both the AngularJS and EmberJS communities are pretty big. AngularJS leads EmberJS in community support for debugging tools. AngularJS is a clear winner. However, don’t overlook the fact that EmberJS is a relatively new framework, and its growth among developers remains steady.

Testability

If you are a developer with a Rails background, you will really like AngularJS’s terms of testing. Yes, other web frameworks support testing, but AngularJS goes beyond that and has built-in dependency injection; a big plus on AngularJS’s side if you really care about testing.

Dependency injection is one of AngularJS's best patterns, and actively discourages you from doing things in any other way. This usually leads to code that is easier to test.

In the front-end framework race there are many contenders, but each JavaScript framework has its unique set of advantages and disadvantages and it would be unfair to say that one is better than the other. As with most things, the framework you choose often comes down to personal taste.

Building a fairly complex web application needs a very careful planning. Not just at the application level, but also at maintainability and efficiency level. So how complex is your app? Creating simple applications is easier to do with AngularJS than it is to do with EmberJS. Conversely, creating a complex application is easier to do with EmberJS than it is to do with AngularJS.

If are still undecided between EmberJS and AngularJS, roll a dice, because each of them can probably get the job done and you’ll learn something.

Now over to you. Which framework would you choose for building your application and why? Share your thoughts and lessons in the comment section below.