When creating a new web application it is very easy to overlook how the system will handle large amounts. This is in part due to the fact that most of the systems we create are brand new, and completely empty. However, this type of oversight can quickly lead to systems that are completely unusable once they are put into production.  I remember a project I was working on many years ago were the designer had implemented a combo box selection for “type” selection on a particular page. The selection was for adding types of wire to an order.  Well, on paper it sounded and looked great, and even as we added a few types of wire to the system, it worked perfectly.  However, once we started to migrate the company’s data into the system, we realized that they have over 4k types of wire.  Obviously we had to figure out a new way to handle this section.   Sure we could have left it a combo box selection, but then the system would not have been making the user’s job any easier, in fact, i think it would have been more unusable than the old system they had in place. 



image image
15k User names in a combo…unusable.     
~666.5KB returned
  Using some simple JQuery, you can fix this easily, implementing an auto complete feature.
~110KB returned

Stay Lean

When using Ajax, it is really important to make sure you are only sending the client what they need.  For example, if you run a search via Ajax, and get 1k results.  Should you return all 1k results to the client?  Does your results page show that many results at once?  Then why send all that data down, only to be ignored?  This is where delayed execution can really come in handy.  You can build your query up, and then the very last thing you can do is grab the page of results the client is requesting with something like:

   1: .Skip(currentPage*PageSize).Take(PageSize)

This prevents 1k objects from being created on your web server, which saves it some work, and at the same time your response will be smaller, and faster.  Saving the user time, and saving you bandwidth, which can get $$ :)   Another thing that seems to get abused when doing AJAX is returning the full object instead of a subset of properties to the client.  You can easily set which properties get serialized by setting an attribute on the property:


First add the needed namespace:

   1: using System.Web.Script.Serialization;

then add the attribute to the properties that can be ignored:

   1: [ScriptIgnore]
   2: public IList<Foo> Foos
   3: {
   4:     get;
   5:     set;
   6: }

This can save really help a lot with response time, especially if your object has any collections, as the JSON serializer will attempt to serialize the entire object graph.


Show Them What They Need

When designing UIs it is always a good idea to create something that will enable your client to be more productive at what they do.  Every step of the design phase should be about minimizing how much they need to interact with your system to get what they need.  Consider creating a dashboard, that allows them to easily and quickly get to the things they need to use/see on a daily basis,   while still allowing them to get to everything else easily when they need to.  All to often I see systems give a user an overwhelming grid of information, and sometimes that might be exactly what is needed, but more often than not, there is a better way to design that system. 


This is a mock up of the dashboard I will use in the asset manager I am creating.  The goal is to allow the user to get in, and out as fast as possible.


In the next few blog we will look at keeping a site responsive, even when there is a large amount of data in the system. So check back soon! :)

About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts


Comments are disabled in preview mode.