Performance and the User Experience with xamWebGrid™ for Microsoft® Silverlight™ 3

Everyone talks about user experience today--it is a key differentiator in the new economy. When most people talk about the user experience of their application, the conversation is generally focused on the aesthetic design of their application, which while important is merely one aspect of the overall user experience. Often people neglect to think about an area of user experience that can have just as strong of an impact on the overall experience of their application as the application’s aesthetics--application performance!

At Infragistics, we take the user experience of your application very seriously, which means we not only focus on helping you provide a world class visual experience, but also the performance experience of our products in your application. In this whitepaper, you will learn how we approach the architecture and testing of our Silverlight xamWebGrid so we can deliver the fastest grid on the market.

Download a free xamWebGrid test drive of NetAdvantage® for Web Client: Silverlight controls right now to see its blazing speed for yourself.

Why does performance matters so much in the overall user experience?

• Higher Customer Satisfaction
• Improved End User Productivity
• Resource Efficiency in Hardware and Bandwidth

The customer does not want to be, nor should they be bothered with the details of how an application is developed; they just care about their experience when they use an application. They want an application that simply “makes sense”, which translates to an application that provides an intuitive user interface, and performs as the customer would expect – in other words – they shouldn’t notice or think about how it performs. When you choose the Infragistics xamWebGrid, you get a control that allows you to provide that “makes sense” experience to your end users, including the best performance on the market. And this is not at the cost of implementing a custom ORM (object relational mapper) solution or some custom data provider--this is out of the box Silverlight data binding. No changes to your data access strategies.

Exceptional Performance Best Practices

During our product life cycle, we test our controls at various stages as new features are added or use cases updated. We follow a series of best practices in the Planning, Configuration, Implementation and Review of our performance tests to ensure the controls are tested in the correct scenarios and that the results we generate are accurate.

• Planning. During planning we determine what we are testing against (a previous build, a competitor, etc) and consider the options and tools available for performance testing on the specific platform. We also identify the specific scenarios that we want to test, and how we can create competitive tests that use as equal a configuration as possible.
• Configuration. In this phase we configure a testing environment that simulates as close as possible what customers are using based on the scenarios that describe the product requirements
• Implementation. We implement the tests outlined in the test plan and execute them many times to generate the performance statistics
• Review. During review, we evaluate the test results for consistency, looking for anomalies that can indicate a problem in the testing environment that could be affecting test results. Based on the above described best practices we implement and execute automated performance tests against each nightly builds of our products. During the testing, performance results are automatically stored and reports are generated. This enables the development team to constantly monitor the performance through the development process.

Testing the xamWebGrid

For NetAdvantage® for Web Client: Silverlight, the majority of our performance testing was focused on the xamWebGrid, primarily because of its use in many data intensive applications and the large number of features it includes. Because we regularly talk to customers whose applications require grid controls that can load very large volumes of data at very high refresh rates, when setting our performance goals and designing our tests we are able to consider those real-world use scenarios to help guide us. To begin testing the xamWebGrid, the following test environment was created to execute the performance tests:

• Two physical machines (non-virtual), one server and one client--which would simulate a real life scenario.
• Both server and client are running Microsoft Windows Vista® Enterprise SP1, CPU 2.13GHz, 4 GB RAM.
• The server machine is running Microsoft SQL Server® 2005 as the backing data store.
• The client is running Internet Explorer® 7 for its default browser.
• Both server and client are using the same network switch, which is isolated from other corporate network traffic to help us focus on the performance of the grid apart from other performance-inhibiting factors that would be outside of our control.
• Both server and client are configured with a static IP address.
• Both server and client have Windows Update disabled.

To run the tests, we wrote code which ran all of the test scenarios 100 times. The scenarios ranged from simulated user clicks, to complete CRUD (Create, Read, Update, and Delete) operations with SQL Server 2005. Each run used our latest nightly build and the most recent build of competitor controls available. To determine test results, we recorded the time and memory consumption of each operation, and then calculated the differences.

Memory consumption was calculated using the GC.GetTotalMemory function, and time was calculated using normal TimeSpan functions.

Performance Results

The primary scenarios for the xamWebGrid identified the following areas as critical to the overall user experience of using a grid for data display and editing:

• Flat data binding
• Scrolling (real time, deferred)
• Sorting (string, numeric)

In this whitepaper, unless otherwise specified, we are showing the results of tests executing those scenarios using a data set that includes 10 columns and 1,000,000 rows of data.

Data Binding

To test the performance of basic data binding we created tests that measure the amount of time needed to bind the xamWebGrid to different ItemSources and render up to the LayoutUpdated event (or similar event). We believe this most accurately represents what and end user experiences when waiting for data to load.

Vertical Scrolling

The xamWebGrid offers two options when it comes to scrolling with the scrollbar thumb--Deferred and Real Time (Immediate). When you have hundreds of thousands of rows, deferred scrolling lets your users preview the record’s value as they scroll (for example, in a tool tip) without having to populate all of the cells until the user has reached the point in the data grid where they want to go. We created tests to measure the performance of both options.

Deferred Scrolling

We could only test one competing Silverlight-based data grid control with deferred scrolling, as it was the only one that offered this feature.

Real Time Scrolling

As you will see in the performance results in table 4, real time (or immediate) scrolling is a big problem in Silverlight. Most vendor samples you see will load limited amounts of data because the scrolling performance of the control is very poor.

Sorting

Sorting performance can vary based on the data type that is being sorted but based on feedback from customers; we test numeric and string sorts against an IList and ObservableCollection data source.

Achieving Amazing Performance

So how do we achieve such amazing performance in our xamWebGrid? The simple answer--a rock solid architecture that leverages UI Virtualization for almost every user interaction operation. UI Virtualization allows the xamWebGrid to create the minimum set of UI objects necessary to render the grids viewable area. Additionally, our UI Virtualization infrastructure not only reduces the number of UI elements needed by the xamWebGrid, but it also recycles UI objects when the viewable area changes, vastly reducing the number of object instantiation and garbage collection operations the control must perform. For large data sets with hundreds or thousands of rows and tens or hundreds of columns these object operations can have a significant impact on the performance of the application.

In the figure below you can see how the xamWebGrid’s UI Virtualization infrastructure recycles both Row and Column UI elements as they scroll out of the visible area of xamWebGrid.

When working with data sets of any size, UI Virtualization is the key to an exceptional user experience.

Understanding the Visual Tree

Silverlight uses a concept called a Visual Tree to track all of the visual elements in an application. Any object that offers a visual representation (anything that derives from FrameworkElement) must be added to the Visual Tree in order to have Silverlight render it. UI elements can have other UI elements as children, thus forming a tree-like hierarchical structure of elements that Silverlight renders to the screen. As you can imagine for all but the simplest applications the number of nodes (or UI elements) in the Visual Tree can grow very large.

As an example, let’s take a look at the main screen of the NetAdvantage for WebClient: Silverlight line of business samples application.

This single screen loads over 800 individual UI elements into the application’s visual tree. As you can imagine, when you start to add data-bound controls that repeat themselves like ListBoxes and DataGrids, it’s quite easy to quickly get several thousand UI elements in the applications visual tree.

Allowing the Visual Tree to grow too large, or causing a lot of churn within the tree by adding and removing tree nodes, can cause Silverlight’s rendering performance to decline. xamWebGrid leverages its UI Virtualization to keep an extremely lightweight UI element footprint, adding only the UI elements that are visible to the end user to the Visual Tree.

Choose Infragistics xamWebGrid to Maximize ROI

In order to get an idea of what the overall ROI (return on investment) is for a high performing grid in a typical line of business application, let’s take to a look at the normal operations an end user might experience during the daily use of the applications you build.

Imagine that a call center uses your application and each employee process a customer for 5 minutes. Usually, in order to process a customer, a call center application needs to do following operations:

• Load data (binding)
• Search
• Sorting
• Scrolling
• Add new record
• Modify record
• Filtering of records
• Paging
• etc.

Let’s compare xamWebGrid against “Competitor I” (for “Competitor II” the advantage of xamWebGrid is even greater).

Using xamWebGrid you could save 30 seconds per operation. At the end of the day, the call center will have a minimum of 10% increase in productivity, which could result in tens of thousands of dollars a week and potentially millions of dollars per year in savings.

Summary

You can see that by employing a solid performance testing framework, you can further drive value in terms of actual saved time and perceived experience. We achieve this by using a solid architectural foundation based on a virtualized element behavior. We also follow strict best practices methodology of setting up and running tests - each test is performed on the latest releases of Infragistics and our competitor’s latest service releases.

By using xamWebGrid your applications will not only look better and be easier to use, but they will outperform anything available on the market today. This leads to higher end user satisfaction and actual dollar savings in productivity of the applications that you deploy.

To get xamWebGrid today, you can download it and Infragistics many other Silverlight line of business UI controls in NetAdvantage for Web Client: Silverlight controls for a free xamWebGrid test drive.

Copyright © 2008-2009 Infragistics, Inc. All Rights Reserved. Infragistics and NetAdvantage are registered trademarks of Infragistics, Inc. xamWebGrid is a trademark of Infragistics, Inc. All other trademarks or registered trademarks are the property of their respective owner(s).