Angular JS vs Ember JS

 There are wide varieties of java script frame works used in the software industry nowadays. While I was learning one of those frameworks called “Angular JS” I got to know a bit about one other framework called “Ember JS”. I have played a bit around angular code but when it comes ember JS I’m yet to go into detail of how to implement/ how to write code in ember JS.

Anyway let me share what I have found on “Angular JS vs Ember Js”. And this basic understanding might help us to choose among multiple available frameworks.

Common features of Angular and Ember

1)      Two way binding- In two way binding the view and the model is fully synchronized. That means when we update the view the model will be updated automatically and vice versa. Only a few java script frameworks support two way binding and angular & Ember are among them.

2)      Routing support – Angular and Ember both support routing but having said that Ember has a robust routing process.

Strengths of Angular JS

1.  Clear separation of view and model- Our html code and java script code is not mixed as in Jquery.      We  put the script logic/model in separate file(s) and bind them to the html using some angular tags called “directives”.
2.     Code Expressiveness – There is a feature called “Template expanding directives” in angular which helps developers to move a part of html code to a new html file and allow us to load that sub html file dynamically in the main file. This increases the readability of the code. And it makes the code reusable.
3. Simple bootstrapping- Angular has the simplest bootstrapping process of any modern framework I can think of. Just include one JS file, and add an ng-app directive to the page and you're in business.   
4. Constructor-based Dependency Injection- This framework is built around its own IOC container that actually uses a pseudo-constructor-based DI approach that is generally preferred by developers from most contemporary backgrounds (such as Java or C#). This makes Angular highly testable, as well as providing the ability for Angular to easily detect circular dependencies.
5. Reusable components –Please refer the second point #2 above. 
6. Easy to learn

Strengths of Ember JS

1.  Standard code – In angular the developer has more flexibility and the developer might end up writing in-efficient or not so good quality code. But in Ember JS the frame work itself forces us to write a good code.
2.  Support for old browsers
3.  Robust routing 
4.  Convention over configuration- Ember uses convention to help the developer organize their code. For example, a route named "test" would automatically look for a "test.js" file under the controller’s directory, and a "test.hbs" Handlebars template under the templates directory. Likewise with files for models and the route itself.

When we consider the performance of the application, theoretically it is said that Ember is better than angular because of its two way data binding process.

Angular uses a mechanism called “Dirty checking”.

What is dirty checking and how it’s done in angular application?

               Like we have private, public and other scopes in our programs, there is a concept called scope in angular too. It’s basically the same as our DOM structure. When an angular application loads, all the directives (angular binders which used to bind the behavior to the view (html) file) will be registered to the particular scope ($scope) and watch ($watch) will be created to watch all the expressions (fields) inside the scope. When an event like key down (typing some input) or click is detected the event will be passed to the angular context and it will trigger a process called “digest cycle” which will check the current values of the objects with the previous set of values (angular keeps track of old values of data) and if there are any changes it will call the update process. The issue with this approach is every time it’s going to go through the loop of all objects in the scope and do the check where we might expect a performance problem.

In Ember JS it doesn’t use dirty checking but it uses assessors and change listeners to update the changes in two way binding.

Even though dirty checking approach seems inefficient having said that if we have more than 2000 objects in a page only we may experience/notice the performance issue and in most of the practical applications it may not be the case. Anyway there are several ways to overcome this. One is to identify that kind of situations and use non-angular way to do the binding there.

You may refer these links

http://stackoverflow.com/questions/9682092/databinding-in-angularjs

http://java.dzone.com/articles/improving-angular-dirty

 

Hope this gave at least an idea about angular and ember.