How does Angularjs databinding and Dirty-check work?

Asked

Viewed 152 times

2

How the Angular data-Binding works underneath the scenes and how it can update the HTML so quickly an input to the declaration with {{}} and not only in Angular, but also in other cases like Emberjs. I know he uses Dirty-checking, but how exactly these two cases work?

javascript angularjs emberjs

1 answer

4


First I will answer regarding Dirty-checking, in the case of angular, once an object is bound to the scope, all values of the current state of the object are saved and the object is "marked". Every cycle of $digest, the angular checks the changes and replicates for all the places that referred to the same variable in the scope.

When you use the {{expressao}} at the angle, what it does is mark this replacement position on the screen, so that after the cycle of $digest, if there is a change, it shall be applied in the words.

As for Emberjs, it uses "change listeners" that make an analysis of the change only, and not of all objects demarcated in the scope, this brings a great gain in relation to the performance that I will talk below.

So, given the two concepts, what is the difference and what this implies?

In the Angular case, all the attributes contained are compared with their respective original versions to tell whether something has been changed or not, this is good in the aspect that everything has been checked, is a comparison, there is no way to go wrong, on the other hand, it is bad in performance. When a change is found, the angular takes charge of effectively firing the event informing that it has changed, and the listeners on the screen perform the update.

In the case of Emberjs, a change triggers an update event in the specific points of the application, it is not necessary to check if something has changed, because there is already a Reader who is warned when this happens. This clearly implies a performance improvement. The question here is in browser support, which is not always done in the same way.

If you want to extend the question a little more, I leave this link that besides explaining about the technique used in Angular and Ember, still explains about React: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

  • The linked article was added to my pocket for a slow read. But the answer is excellent. Thank you.

  • If you have any additional questions, be sure to supplement the question.

Browser other questions tagged javascript angularjs emberjs

You are not signed in. Login or sign up in order to post.