I currently am working on a web application based on AngularJS. On few screens, I have to repeat an array object to display multiple tiles on screen.
The data however is not much but the rendering on DOM is taking too much time, due to multiple directive compilation for each of the tiles.
On another screen, I am using highcharts library to plot 4 series for each such object in the array.
So, to improve the performances, I am thinking on the lines to restrict DOM rendering only to view-port area. I have gone through few external libraries in jQuery that provides such implementation but I am looking for a pure and simple AngularJS based idea.
One thing I tried was using limitTo in ng-repeat. It reduces DOM manipulation to limited data. However, I am looking for a technique that would fetch data from server as and when required as per user scrolling.
Is there a simple method to do so on Client side? Should I go for handling scroll event and call server for data.
An easy way to improve performance is indeed by paging the results. If you want to page items by scrolling you might want to take a look at ngInfiniteScroll.
Related
I would like to know what is the maximum data that angular framework can handle. Say, I am displaying a chart using angular and some charting framework like chartjs. I'd like to know up to how many data can the browser display properly, with slowness, or up to when it crashes.
Your question has no simple answer, but I will try to flatten it and give a simple answer, or at least simple things to consider...
Angular (at runtime), like many other frameworks is simply JavaScript,
So let us reduce the question to "Limitation of JavaScript and browsers with regards to data loaded",
JavaScript has no upper limit of memory or storage it can handle,
I've seen JavaScript applications that require more than 15GB of RAM,
and they performed well too.
So assume data size itself is not an issue (unless your application is poorly implemented, leaking memory or just not very efficient, of course).
The main challenge as I see it, is displaying and manipulating the information
without causing unnecessary delay or unresponsiveness.
Displaying the information - let's say you have a list (or a table) containing 1,000,000 possible gifts which you then want to display for the user to select.
Adding the list items to the document one by one is tempting, but will require the browser to repaint after each addition (causing a delay or full unresponsiveness until finished), another way is adding the elements to some DOM element (denoted by N) still being kept in memory, then adding all elements corresponding the list items to the element N (still, just an in memory operation), finally adding N to the document containing the entire list - the will be a much better solution for displaying the large amount of data.
Manipulating the information - displaying is indeed not enough. you would like to move, drag, sort and filter the data being displayed. And as mentioned before, it is a bad idea removing many elements directly from DOM. You should instead remove container from the document's DOM to memory, manipulate the data in it, and then add the container right back to the document. Angular does this kind of magic for you.
(Toggling the 'display:none\block' css attribute of many elements has a similar blocking effect as I recall).
A good practice is implementing an application/page showing only the amount of data that can be processed by a human at a single glance. The rest of it should be considered in the application data-layer, in memory, and should be loaded to display given the appropriate need or request.
To conclude, you can deal with huge amounts of data as long as you provide a mechanism that efficiently filter the displayed information.
I hope it helps...
for further reading:
Slow and fast ways of adding elements to DOM
A question emphasizes the lack of memory limit used by JS
CSS display attribute performance
A good discussion about the reasons for slow DOM
About using HTML5 correctly - old but still true
Once the DOM creation procedure is understood - it much easier to display data without affecting performance / user experience
Hi fellow Javascripters,
I am using both Angular and D3 in my project (no jQuery, which I intend to keep this way). One thing that I want to support is to enable users to play with 'raw' tabular data. So, data from a CSV is loaded into my app and displayed in a plain old fashioned table (currently with Angulars ng-repeat). However, I now want to be able to animate that columns of the table get reshuffled. So, as a simple example, I would programmatically want to switch column 2 with column 4 and this transition must be D3-like. Furthermore, easily dragging whole columns to other positions should be possible.
Since I am not really experienced with working with jqLite inside Angular directives, my preference would go out to a solution based on D3. I can then see two possible solutions:
Render all of the data in a regular table using the D3 append functionality. Whenever column order changes, somehow reconstruct the table and create a smooth transition.
Simulate a table with div's and css (not looking forward to that though), to enable easy repositioning of data.
Since both solutions are far from trivial (I would say), I would really like to have some opinions. Do you see any other solutions for me? And if one of these two solutions seems right for you, how would you go about implementing them?
Thanks in advance!
Recently I had to make an interface that necessitated many items with numerous checkbox fields to be displayed and interacted with (here is a link to a screengrab of a small portion of such a list http://i.imgur.com/hMtGSL4.png).
My issue was that AngularJS would get unreasonably slow pretty quickly. My question is What steps could one take to optimize ng-repeat and displaying items with many fields?
I have tried with varying degrees of improvement (based on what I could come up with and other stackoverflow posts):
Formatting the data before it gets to the view so as to not use any AngularJS filtering/sorting.
Simplifying the data as much as possible (checkbox fields being arrays of booleans, etc)
Splitting the data into groups that, when clicked, loaded the relevant items (hence the gray bars in the picture). This is more of a pragmatic solution though, rather than straight up AngularJS optimization.
Lazy loading scroll, scrolling to the bottom of the screen loads more items below the fold (also, more of a pragmatic solution).
Using directives to dynamically generate a form, and then use jquery for saving the data after manipulation. Without $watch on items anymore it certainly was more efficient, but largely defeated the benefits of using AngularJS.
Thank you, and hopefully this question and its answers can serve as a good resource for AngularJS specific techniques one can use in such a situation.
which one is best table sorter choice i wanted to do
Default filter
Sorting
Pagination
Filter
Which one is the best choice for the table filtering that do above all things?? and Most Important Not Jquery one...!!
This is what I am using : Table_Sort
May I suggest the dojo DataGrid.
The DataGrid (and all related classes/widgets) are separated from the actual data so you can put a filter on the data source in any way you would want. There is a big choice of data stores like a REST store or a simple CSV store.
Sorting can be done in the grid itself, delegated to the store or delegated to the server. Depending on what your need it is it might be wise to sort your set on the server to keep performance high in the browsers.
The page does do paging but not in the conventional way that you can flick through the pages. There might be a plug-in component on the grid to make that possible though but I don't know. The current implementation just renders the pages that are visible and when you scroll it will render additional pages.
For more info and examples:
http://docs.dojocampus.org/dojox/grid/index?action=show&redirect=dojox/grid
In my experience with dojo grid I think you will be best off using the dojox.grid.Enhanced grid. It is a bit faster then the DataGrid and new plug-ins and features are constantly added. And with a bit of reading and hanging out in #dojo it is quite possible to write your own plug-in.
I have 3 sets of tabular data I want to display with a JavaScript framework in ASP.NET MVC. I know I can embed a separate grid in a tab, but this seems inefficient especially when large datasets are involved since I imagine 3 separate grids would be created. I haven't found a JavaScript datagrid which emulates what a spreadsheet does with multiple tabs. This example from YUI might come close though:
http://developer.yahoo.com/yui/examples/datatable/dt_dynamicfilter_source.html
I'm a little familiar with jQuery, but would be willing to switch to any framework which makes this easy. I don't really need to edit the data. Any suggestions?
EDIT: I didn't mean this to be about jQuery. Maybe some details about my scenario would help, as suggested in one of the comments. I want to display tabular data from an ordering system containing thousands of records. I'd like 3 tabs:
All orders entered in the system which haven't been paid for yet.
All orders from a specific vendor.
All orders which have been paid for.
Since each category has thousands of rows, I only want to load data if the user starts paging.
I thought having 3 tabs with 3 separate grids (one within each tab) wouldn't be performant. I haven't actually tried though, so I'm probably guilty of prematurely optimizing. I'm looking for a grid with tab support built-in. I don't think there's one for jQuery. Perhaps ExtJS?
Since you tagged this with Ext JS, I'll mention that it's quite simple to render grids into tabs using Ext JS. It also supports deferred load/render, so that only the first tab/grid would load initially, then the others would be loaded on first access. Without knowing your specific requirements it's hard to comment further.
EDIT (based on edited question): Ext grids don't directly support tabbing, but they can be embedded within a TabPanel as I mentioned for the same effect. However, based on your description, it sounds more like a filtering scenario to me. I don't see the point in having the overhead of multiple grids when only one will ever be visible, and each one's purpose is to show a specific view (i.e. filter) of the same data. I would just have a single grid with a toolbar or some other method of providing your toggle between filters, and use Ext's built-in store filtering/querying to create your views on demand. The Ext grid supports paging out of the box (client or server, in your case it would be server for thousands of records). There is also a very popular plugin called LiveGrid that provides for virtual scroll-paging of large data sets.
I'm not necessarily advocating Ext over any other framework -- I just happen to be most familiar with it and I think it could solve your problem quite nicely. I would suggest trying it out for yourself to be sure.
jQuery Grid is kinda what people use a lot. I use it and it's pretty good.
jqGrid Link
I wouldn't draw a grid with three tabs. I'd use a single grid with a tab control and then load data via jQuery as required.
Or maybe have three PartialViews that you can load dynamically when you hit a tab.
You could also use dhtmlx grid.
You could use JS tab object to create tabs.
And use javascript grid framework to create grids and populate data into grids.