2

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.

Improve this question

2 Answers 2

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I ran into a similar situation once, and this is exactly what we did back then. Use React for one part in a big Angular application. And it really got rid of the performance issues. +1 for a detailed explanation. I second this approach.
Thank you for this, great pointer which I will put some research into. I would like to ask if you have any experience with angular 2\4? I ask as I have a working knowledge of it so may be easier to upgrade to ang2\4 than learn react. I really want to avoid a religious debate between angular and react lol, just wanted to know if angular 2\4 might solve the performance issues as well as react
I am no expert with A2/4 either but I don't think it would help you as spectacularly as using react. A2/4 runs quicker when handling large sets of data but that was not the main problem in our project but the browser rendering during interaction which did not rely on the .js file running quickly or not. React lightened the burden on the browser's rendering greatly and that was the main impact on speed not the code running quicker. Although if you are also modifying huge sets of data at the same time then A2/4 will help you out there (with react still being useful for the rendering part).
Many thanks for a fantastic post. Has really helped me and Im sure others!
Happy to hear you found it useful. If you happen to fork the codepen and find possible enhancements or new ideas then share it here for future reference (and for my learning as well :))
1

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
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.