Why Ember fails over Angular

Performance
1

Please check the following code,

Ember : http://jsbin.com/AzaceNo/1

Angular: http://jsbin.com/ucopUca/1

Why Ember couldn’t render fully and fast ?

Is Angular dirty checking is good than Ember’s getters and setters ?

1 Like
2

There’s lots of articles on here about Ember’s list rendering performance. The short answer is, “yes it’s slower than Angular”. The longer answer includes:

  1. Why are you rendering 10,000 items.
  2. Why are you not using a virtualizing list like ember list view? (https://github.com/emberjs/list-view)
  3. Have you tried to improve performance (e.g. in your example changing pushObject to pushObjects makes a noticeable difference)

Either way for this specific example that you’ve used I agree that Ember should be faster than it is now. The good news is that when htmlbars lands it will be.

4 Likes
3

In this example AngularJS is no doubt much faster than Ember. But things always have double side.

As @jonnii mentioned there’re several ways to improve Ember’s performance. And for a real world app there are many things affect the performance. It can not be simply emulated by rendering XXX items.

However, I want to explore the other side of these 2 popular frameworks. That’s AngularJS is not that fast as you think.

Here I modified your examples a little:

AngularJS http://jsbin.com/visim/1/edit

Ember http://jsbin.com/mabata/2/edit

Some changes are:

  1. Reduce 10000 items to 4000 (as you know Ember is slow and I don’t want to wait so long time).
  2. For each items, add a <input> field and bind item.number to it.
  3. Code style changes, remove unnecessary code, modify indentation etc.

In this case each example have about 8000 bindings. Compare to old example’s 10000 bindings we don’t reduce too much.

For each example try these steps:

  1. Press “render” button to add 5000 items.
  2. After list is rendered. Change number in any text field.

You’ll notice 2 things:

  1. For rendering list AngularJS is still MUCH FASTER.
  2. But when you type something in text field, AngularJS is MUCH SLOWER.

Why?

Because AngularJS’s dirty checking re-checks every bindings whenever anything which bind to page changes. In this example AngularJS checks all 8000 bindings every time when you type a character in text field. Actually with 2000 items (4000 bindings) you start to fell lag.

But Ember handles this situation well. Because it uses observers to change values. One advantage is Ember only re-render changed values. So in this example when you change a number in a text field, only that number changes.

This is just a brief comparision with the difference between these 2 frameworks. I don’t want it become another AngularJS VS Ember thing. Because I think both frameworks are awesome so just pick anyone suit for you. It’s just I prefer Ember more.

Currently half of Ember’s performance issues are because of Handlebars. So when HTMLBars is ready the performance will be highly improved. Even currently I didn’t meet any performance issue from Ember in my app.

For any framework that is popular. You don’t need to worried about it. Because the core team is worried about it more than you think.

Generally speaking, in short term Ember will be benefit with HTMLBars and in long term will be benefit with Object.observe. And AngularJS will be benefit with Object.observe maybe in 2.0 version.

13 Likes
4

@susai @jonnii @darkbaby123

I think that is better to have a great tool to measure it,

it is not doubt that if you want to use FOR in emberjs is good idea to use Ember.beginPropertyChanges(); you can see details here EmberObject - 4.6 - Ember API Documentation

So see the test below and Yes it was in 2012, so still rules because a lot people have been updating it.

http://jsperf.com/angular-vs-knockout-vs-ember/61

The image below talk by itself. (Operations per Second, Higher is better)

3 Likes
5

Ember was far faster there bud?