Polymer's MDV performance vs AngularJS data binding

[Aleksander Koza]

Hi,

I was curious if Polymer’s MDV is significantly faster than Angular data binding, thanks to its basis on Object.observe and  DOM Mutation Observers standards already implemented natively in Chrome.
So I have modified slightly bouncing balls demo written in AngularJS, and tried to adopt it in PolymerJS.
Here is my Angular version and here Polymer version.
As you can check Polymers is comparable to AngularJS, it is a little faster but under my expectations. I know that it polymer is pre-alfa version and probably it’s too early for any comparison, however in Chrome it should by natively accelerated.

Maybe it can be better written ?

[Erik Arvidsson]

It is unclear from your post. Did you enable Experimental JavaScript or not? Experimental Web Platform features?

Follow us on Google+ : plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
erik

[Rafael Weinstein]

On Mon, Aug 12, 2013 at 8:40 AM, Erik Arvidsson <a...@google.com> wrote:
> It is unclear from your post. Did you enable Experimental JavaScript or not?
> Experimental Web Platform features?
>
>
> On Mon, Aug 12, 2013 at 6:37 AM, Aleksander Koza <ole...@gmail.com> wrote:
>>
>> Hi,
>>
>> I was curious if Polymer’s MDV is significantly faster than Angular data
>> binding, thanks to its basis on Object.observe and DOM Mutation Observers
>> standards already implemented natively in Chrome.
>> So I have modified slightly bouncing balls demo written in AngularJS, and
>> tried to adopt it in PolymerJS.
>> Here is my Angular version and here Polymer version.
>> As you can check Polymers is comparable to AngularJS, it is a little
>> faster but under my expectations. I know that it polymer is pre-alfa version
>> and probably it’s too early for any comparison, however in Chrome it should
>> by natively accelerated.
>>
>> Maybe it can be better written ?

Aleksander,

You are correct that both Polymer and MDV are still early and most of
the performance work that we will do is still ahead of us.

It's important to think critically about what kind of performance you
care about. In the example you've chosen, EVERY piece of observed data
changes EVERY cycle. This is actually a case where dirty-checking will
always be at least as fast as Object.observe. IOW, If everything is
always going to change, there's little point in directly observing it,
because you know it changed. You might as well just go look at the new
value every cycle.

The converse of this type of benchmark is one where the set of things
you are observing is very large, but the number of things which
changes each cycle is very small. Most web-apps fall into the this
later category, and it's the use-case for which Object.observe is
designed.

Put another way, If you want to write a video game, data-binding your
scene graph is probably a poor design choice.

[Aleksander Koza]

I tried with Experimental JavaScript enabled and disabled on Chrome without big difference. Chrome Canary also with Experimental JavaScript enabled is even slower than classic Chrome.  

Rafael – thanks for clarifications, now I see how it works. I was even able to prove easily your statement in the same examples. I loaded 3000 balls but put into move only every 1000 ball (3). Now PolymerJS/MDV is 2 -3 times faster than AngularJS. ( Here modified Polymer example and here AngularJS example )

BTW I don’t know also how to freeze rendering for the time of balls position changing. It should work faster if rendering was done once during Platform.performMicrotaskCheckpoint method – is it possible ?