A speed comparison between web grids for ASP.NET

When creating web apps, the responsiveness of your app should be priority 1, 2, and 3. If your app spends a minute to load on your CEO’s iPhone, you might as well ask him to carry around the app’s source code, written out on paper. Hence, having accurate data before starting your project, is key to your success  -  And since the most commonly used UI element is probably “the grid”, or “data grid”, I thought I’d write up a speed comparison in the tooling space which is relevant for you when creating ASP.NET web apps.

Telerik KendoUI grid for jQuery

Telerik is one of the largest web component vendors on the ASP.NET stack. They employ thousands of developers, and their components have all the features you can dream of. As always, you pay for what you don’t use, and the specific cost for the Telerik KendoUI grid is exactly 1.4MB of JavaScript, according to their example page. This implies that if you’re trying to consume their grid on a low bandwidth connection, on for instance your phone or something, on an empty cache  -  You can expect to require minutes to load your page initially. On my 50Mb connection the time it takes to simply load their example page, which contains no more than 91 items for the record, is a staggering 7.63 seconds.

Infragistics ASP.NET Data Grid

The “Multi-Column Footers” example from Infragistics, that you can find here, requires a total of 1.3MB of JavaScript. It spends roughly 8 seconds to load on my 50Mb connection, on an empty cache. Yet again, the Infragistics Data Grid has all the features you can imagine, and yet again you pay a staggering price for things you’d highly likely never use. But its feature set is pretty amazing, which allows you to “Filter excel style”, having “Mult-column footers”, “Multi-Column Headers”, etc, etc, etc …

It seems the only thing this thing cannot do, besides from splitting atoms, is to actually have it load on your page, before your users falls asleep. The “wait cursor” is its most frequently seen UI element, as it was with Telerik too.

ExtJS grid

This grid component is in its own category to some extent, since it’s not an ASP.NET datagrid, but rather a generic JavaScript component for any backend you might want to use. However, since it’s so popular in usage, I wanted to include it here none the less. Sencha does not have an example page though, which only illustrates the usage of their grid  –  However, since they often tend to encourage their users to package all of their JavaScript components into a single file, their own usage example is still quite relevant. 1.1MB of JavaScript and 3.5 seconds to load on an empty cache, yet again on a 50Mb connection, which is highly unlikely available on your phone, as you’re waiting for the train, to go to work, and you need to check up when the next train is due …

Phosphorus Five datagrid

This grid is special. First of all, I am its author and creator, so I am probably biased  –  Secondly, it builds upon a unique model of “Managed JavaScript”, which among other things implies that it never downloads more than 4.8KB of JavaScript. It is also the only example that actually uses a “serious dataset”, with more than 315,000 records. Telerik, Infragistics, and ExtJS’ examples pages have somewhere between 100 and 300 records  –  Which makes you wonder if they even work with “real data”. The video below illustrates 315,002 records in its Camphora Five generated app. The initial page load is 4.8KB of JavaScript, and hence arguably more than 200x faster to load than any of the above components. Although I am testing this on localhost, not having an example server to run it in  –  I think the numbers of 4.8KB of JavaScript speaks for itself …

The code necessary to create a grid

Another important fact when creating web apps, is how much time a developer needs to spend to actually implement his application. For Telerik, Infragistics, and ExtJS  -  This implies thousands of lines of code, in 3–4 different languages, in dozens of different source code files. In addition to that you’ll need to learn JavaScript, CSS, jQuery, the component API/Framework, etc, etc, etc. Since I don’t know any ways to illustrate this, since developers tends to not believe me when explain it to them  -  I am compelled to illustrate how to create a data grid in Phosphorus Five using a video …

Summing up

As I said above, I am biased, being the creator of Phosphorus Five  –  However, you can create, consume, and deploy a web app with Phosphorus Five, with a data grid, allowing you to sort and filter hundreds of thousands of records, in milliseconds  –  And you can create your solution 100,000x faster, it will perform roughly 200x better, and you can put real data in it, and not simply tiny sample data of some few hundred records  –  And it simply works …

and you can do it in 2 minutes!

But Telerik, Infragistics, and ExtJS have really beautiful grids  -  I’ll give them that. If you want to build a working app though, with real data though …

you can download Phosphorus Five here (it’s Open Source).

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.