1

Recently I've walked through several StackOverflow questions related to AngularJS optimization techniques:

AngularJS really slow at rendering with about 2000 elements?

How does data binding work in AngularJS?

Most of the answers were proposing an optimization technique called One-time binding, but my use case dictates that I can't use this approach, all of my data is interactive, the changes are pushed from server to client, plus there's quite a lot of data is required to be displayed. When server notification happens UI updates are required. So if I were to use the one-time binding it would break my page.

I've tried to analyse the reasons that make AngularJS slow in my case and I've found out that it's not the dirty checking itself that is slowing down the process. Modern javascript engines are able to dirty check tens of thousands object properties in just milliseconds. The root reason that make AngularJS slow is $watch expression itself, each $watch call is backed up with setTimeout calls plus some AngularJS internal overhead. The main problem is that these calls pass control to browser's internal message loop, which from program's perspective does nothing except imposing latency into each step of data displaying process.

So my question is the following: in contrast to one-time binding, I would like to have a way to group my one way binding expressions {{ someObj.someProperty }} into one $watch call, something like

{{ myBulkWatch::someObj.someProperty1 }}
{{ myBulkWatch::someObj.someProperty2 }}
...
{{ myBulkWatch::someObj.somePropertyN }}

I understand that there's no such functionality yet, but maybe it's possible to at least emulate the feature with existing Angular's instruments?

Any thoughts on this subject?

Thank you in advance!

Community
  • 1
  • 1
Lu4
  • 14,873
  • 15
  • 79
  • 132
  • any samples about how interactive your data is? – YOU Mar 21 '15 at 16:07
  • Well, it's new technology, it is not yet publicly announced, but will be soon, it allows sending a facet of the database data (called the "snapshot", the data that is allowed for the user) to client-side. The data is usually an application's business entities that are under 10 to 50 mb in total. As soon as the change in the database occurs it is automatically being pushed to client so there is no need in querying data from the server/database. The technology is similar to Meteor.js except that it works with any database and has a ton of other nifty features that won't fit into current answer. – Lu4 Mar 21 '15 at 16:21
  • So answering your question @YOU the data is really interactive, as soon as the change in database occurs it is automatically displayed on UI, making it bind-once ruins the whole idea... – Lu4 Mar 21 '15 at 16:22
  • how many items in ng-repeats? and how many ng-model inside your dynamic contents? also ng-includes? – YOU Mar 21 '15 at 16:28
  • There is several approaches, as far as I know, like using infinite-scroll to display updated data, or by using another rendering engine like reactjs (ngReact), inlining ng-includes, wraping with ng-if until data come in. changing ng-show and ng-hide to ng-if. And ofcourse rolling own directive that dont do $watch much is most people doing, I believe. (I also have [experimental](https://github.com/S-YOU/doTA) approach, that parse html and render before angular come in, but its pretty fragile on html parsing) – YOU Mar 21 '15 at 16:45
  • It's really hard to answer your question @YOU, I've did some optimizations already so it depends on actions made by the user. Here I've uploaded a screen recording showing the amount of watches being created in result of user actions: https://www.youtube.com/watch?v=Y_8p_hFKgu8&feature=youtu.be – Lu4 Mar 21 '15 at 16:57
  • There is a lot of data, but it looks like making a directive for detail contents - (Route, Company, Type) with isolated scope, and only pass data by reference or $index to that directive when user click it, shouldn't have many watches like 2000, I think. – YOU Mar 21 '15 at 17:14
  • 1
    Yeah this is what I was afraided of, didn't wanted to create my own `ng-bind` – Lu4 Mar 21 '15 at 17:25
  • I am not sure how much your template is complex, but my experimental approach I commented above, have watching data and auto re-rendering template. it willl only have one watch. just it only support very simple htmls and attributes. – YOU Mar 21 '15 at 17:33
  • Hm, interesting, I haven't caught previously what you were prosing, nice idea, I think it should work, I'll try and respond what was my results – Lu4 Mar 21 '15 at 17:39
  • That's one kind of large library, I see it will take some time... – Lu4 Mar 21 '15 at 17:43
  • btw, If you check this plunk - http://plnkr.co/edit/CFu0ZijRnc8uVSVGt9w3?p=info - you will see it is usable in your project or not. – YOU Mar 21 '15 at 17:47
  • 1
    This approach gave me few interesting ideas that can benefit with additional performance gains into that new technology I was referring to initially. Thanks man, really positive discussion! – Lu4 Mar 21 '15 at 17:55
  • Will keep you in touch – Lu4 Mar 21 '15 at 17:55
  • take a look @ [react.js](http://facebook.github.io/react/). it can be paired with angular.js – Kirill Slatin Mar 22 '15 at 08:05

0 Answers0