Object.observe() and AngularJS

# Miško Hevery (6 years ago)

AngularJS (angularjs.org) is a framework for building web-applications, and which supports data-binding. In order to make data-binding work without the use of wrapper objects which provide accessors to data, we have to use dirty-checking to detect model changes. We have reimplemented our dirty checking algorithm with Object.observe as a proof of concept herewww.google.com/url?q=https%3A%2F%2Fgithub.com%2Fmhevery%2Fangular.js%2Fcommit%2F5fb650998a240523170674c50df71b70109ca412&sa=D&sntz=1&usg=AFQjCNFJNh4ynRiS4_tRoyIRPosaPAMy5A[1].

The integration work was surprisingly straight forward, because the Object.observe async nature maps well to Angular's existing model. The only place where we could not use Object.observe is in watching computed values / functions, but this is an already understood issue.

To measure performance improvements we have created a crude benchmark of a table of 20 columns (a repeater) and 100 rows (another repeater) and placed a binding in each cell for a total of 2000 cells. We then proceeded to change a small portion of the model to see the performance characteristics of the update. The result is summarized below.

Dirt checking: 40ms per update Object.observe: 1-2ms per update (improvement of 20x-40x faster)

[1] www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fmhevery%2Fangular.js%2Fcommit%2F5fb650998a240523170674c50df71b70109ca412&sa=D&sntz=1&usg=AFQjCNFJNh4ynRiS4_tRoyIRPosaPAMy5A