EmberJS vs AngularJS : performance testing

author-avatar
Paul Shan Mon Dec 23 2013
Performance testing is really a tough task. If the matter was to compare ember and angular, with their given features, simplicity or number of lines in the code, it really become simple as it atleast has a platform. But measuring performance depends on browser, number of environmental factors, data transfer, type of your app, code quality, logic and much more. And the judgement factors are simply the speed and accuracy. But it's really a variable thing to judge, as the test cases play their roles. Today with few chosen test cases I would like to show you the visible difference between ember and angular. How according to implementation cases their behavior changes, how they exactly works and these things will help you to choose the right one between ember and angular  for your application.

Rendering:

Test App Links:

Ember Output: http://jsbin.com/AzaceNo/1/ Angular Output: http://jsbin.com/ucopUca/1/ Ember Editable: http://jsbin.com/AzaceNo/1/edit Angular Editable: http://jsbin.com/ucopUca/1/edit

Test Objective:

Let's say I have a lot of elements in my app, which the framework has to render to the DOM. Here I am testing with 10,000 elements.

How To Test:

Open the links of Ember Output and Angular Output, given above. Now Click on the "Render" button of each example and see how much time each of them takes to render 10,000 elements to the DOM. The elements will be displayed once they are rendered to the DOM.

Description:

You will find, to render the elements Ember is taking almost 4 times more duration, than that of Angular. Angular is really fast on rendering. Cause, they don't put any overheads like observers or something while rendering the elements. But in the other hand, Ember sets observers each time it creates an elements. So due to this overhead Ember is taking more time here.

Data Binding:

Test App Links:

Ember Output: http://jsbin.com/IYAdIVEP/2/ Angular Output: http://jsbin.com/AGIJUmOj/1/ Ember Editable: http://jsbin.com/IYAdIVEP/2/edit Angular Editable: http://jsbin.com/AGIJUmOj/1/edit

Test Objective:

Let's say I have a lot of elements in my app, and I want to change some elements with my input text field or in some other ways. The simple data binding which is called. Here I am testing with 10,000 elements.

How To Test:

Open the links of Ember Output and Angular Output, given above. Now type something in the input box. You will see the databinding is really nice with both the frameworks. Now Click the render button of each framework app and let the elements to render. Now try to write something in the input box.

Description:

You will find, in case of Ember the data binding is really smooth and real time. While the Angular one is stuck; or you can say really slow to bind the objects. This is because, while rendering the elements Ember put an observer to each elements. So whenever the value of an element is changed, it directly pings the control and ember handles the databinding very nicely. But as Angular follows the Dirty Checking to find the change, so it has to scan each and every element with its previous value to find whose value has been changed. That's why Angular is taking so much time.

Operation flow:

Test App Links:

Ember Output: http://jsbin.com/UCuJiH/1/ Angular Output: http://jsbin.com/uTuqOsO/1/ Ember Editable: http://jsbin.com/UCuJiH/1/edit Angular Editable: http://jsbin.com/uTuqOsO/1/edit

Test Objective:

Let's say I have 400 objects in my App. And I want to continuously update them. The change will be made to all those elements with a time interval.

How To Test:

Open the links of Ember Output and Angular Output, given above. You will find 400 elements there on each example. Now click on the buttons "Animate with EmberJS" and "Animate with AngularJS". Look at the animations carefully.

Description:

You will find, the Ember animations are not as smooth as the angular one. This is because, in case of angular, what is does is, it first changes the values of all 400 elements, and after that the $apply() function is called, and the view is changed. But in case of ember, it takes the help of observers. So whenever a value is changed, the corresponding view is also changed. This is similar to call the $apply() function 400 times.

Conclusion:

In my Angular vs Ember vs Backbone also I've said that you can never say a framework is good or bad. It all depends on your app. According to the app you have to choose the framework. In case of performance also it's same. If you have to make the bootstrapping of the app faster, angular may be good, but for quick response among lots of elements ember will go handy. Consider the app's size, need, response factors, then choose your framework; this is the only way to get great performance.
angularjsemberjs

Written By

Paul Shan

Collections

  • E

    ES6

  • R

    React JS

  • C

    CSS

    Cascading style sheets only

  • S

    SEO

    Search engine optimization

  • E

    ES7

  • C

    CMS

    wordpress, drupal, jumla, magento and more


Show All

Tags

vue-js
advanced js
youtube
Web development
vue css
social share buttons
real-life-example
react datetime picker
progra
Online
MathJax
jsfiddle
jquery chart library
instant search using vue
handlebars
event loop
Design
console.log
best practices
imorph

Show All