Data Binding Internals and Mobile Performance

[pltod]

Hello Evan,

I read the Vue.js guide and really like the ideas behind the framework and the combination made inspired by other existing frameworks.

I do not have dev experience with it so far but really want to give it a try in a project. So I am curious about data binding and dirty checking internals and the implications they would have on mobile apps with huge amount of data.

In this talk http://www.confreaks.com/videos/3221-mwjs-be-predictable-not-correct Pete Hunt is saying something like this:

Mobile memory is even more important than mobile CPU

Some frameworks (such that use key value observers for data binding or special mechanisms for dirty checking based on directives) perform well when the application works with small amount of data. On the other hand they decrease their performance and use a lot of memory when the application data is more. In the presentation he uses the terms size of the view vs. size of the model

There are more interesting things in the talk as well...

Anyway I have seen that you care about performance and you have performance benchmark as well. It would be nice if you mention briefly about your approach to achieve the two way data binding as well as what is your feeling about the performance of Vue.js on mobile apps with a lot of data.

Thank you for taking the time to answer me!

[yyx990803]

Vue.js' data binding implementation actually falls in the KVO camp (similar to Ember), but with auto dependency tracking (similar to Knockout). As shown in Pete's talk, KVO have really fast warm updates because under the hood it's just callbacks, and you pay slightly more for the initial render because of the need to setup the data observation and dependency graph.

I don't really see fundamental memory issues for KVO on mobile from the talk, because it simply doesn't make sense to render 10k items at the same time on a mobile device (and in that worst case scenario it uses 30mb of memory). A sanely-designed mobile app probably has less then a tenth of that many items at any point, left alone in the viewport. As seen in the talk at 1k items / 10k DOM nodes, the memory usage difference is 14.6mb vs 13mb, which is not significant at all. I'd argue that worrying about memory issues for KVO on mobile is like worrying about >16ms render time for React, both are rare edge cases and can be avoided when done right.

[pltod]

Thanks for the classification of Vue.js in respect to data binding approach! It was interesting to read your comments on the video as well...

[ravindranathakila]

FYI this page comes up #4 for Googling "vuejs mobile" 👍