Angular.Js Performance, large dataset, ng-repeat, html table with filters and two way binding

Question

So I have a simple layout of a page which includes a panel of filters and a html table of records using ng-repeat. I am using MVC5 and an angularJs controller

I may have to deal with up to 100000 records. Filters will occur for most of the columns including dates and text fields The records need to deal with two way binding (user has to select records which will be returned to the server).

I'd like get opinions on the best design ideas for this....i.e.

• Would you load all the data to the browser upfront. If not when would more data be requested from the server.

• If all upfront should two arrays be held, one for display and one with all the data.

• Does AngularJs have limitations with what I am trying to do, should I be using something else?

• I've read limitTo and trackby can be useful for filtering large datasets but would like to get others thoughts.

Answer 1

I have recently ran into a similar issue with ~60k items, filterable, expandable, full of icons in each entry and stuff like this. It was extremely heavy and even though our team implemented some performance enhancements (like filtering, trackby, limitTo, pagination) it still was quite a mess especially in IE (even in IE11) which we unfortunately have to support.

From the aforementioned enhancements pagination helped the most (as Nitishkumar Singh also suggests) but still wasn't enough for a smooth UX. Nitishkumar's answer sums up perfectly each point you asked for I would just like to point you towards React (very great documentation imho) and ngReact which will help you achieve what you wish. Our team started to look into React and possible integration to our already extensive AngularJS project(s) and realized it is quite a common thing to do so. Several addons you will find (such as ngReact, angular2react, react2angular, etc.) which helps you with integration.

This is a codepen I worked on to test some features of React while learning how it actually works. I am no expert on React but after a few days of digging and learning I could come up with a solution that now loads 3*20k items with several features that runs smoothly even on IE9.

My answer is not supposed to be a 'I suggest React because it is so cool' especially since I am no expert on React either, just wanted to share this quite new (actually ongoing) experience and how we overcame it.

At the very end we ended up with this tiny snippet in our template (check the codepen for full, just had to copy some code):

ReactDOM.render(
   <Header parents={parentArray} suppliers={supplierArray} bsrs={bsrArray}/>,
   document.getElementById('app')
);

Some further reading on AngularJS + React which I found useful:

https://blog.logentries.com/2016/02/combining-angularjs-and-reactjs-for-better-applications/

Can angular and react play together?

https://www.quora.com/Why-would-someone-combine-AngularJS-with-ReactJS-when-they-do-the-same-thing

Answer 2

I would say you have really thought very well, will answer your questions one by one

• No Loading all data upfront won't work. Client browser will get hung or crashed. You should implement pagination feature, where you should get data in chunks. If possible don't hold more no of rows in browser memory at once. Since it will slow down your application in any case
• Maintaining two version won't help, it will simply increase complexity and maintenance for array. You will end up doing more code than expected
• I won't say angular have limitation as loading 100000 rows at once won't work for any of the framework such as react, vue etc.
• Yes you are right limitTo and trackby are the best options to use for angular in case of large dataset