Monday, October 17, 2011

Web Application Performance Tuning

In my actual project I have to do the performance tuning of a Microsoft Dynamics CRM System. From a technical viewpoint this is just an ASP.NET WebForms and WCF Services application. Therefore I was looking for some tools to monitor and analyse a web application. The customer don't want to spend any money on a tool, therefore it has to be free, open source or at least under $100.-. Here is a list of what I have found and what I use now.

IE Developer Toolbar
Used to analyse the HTML that is rendered in the browser. Very usefull to fix design bugs.

Fiddler2
Used to analyse what is sent and received over the wire. Analyse traffic, header information, etc.

DynaTrace Ajax Edition
Used to analyse what's going on on the client. Used to analyse CPU and memory usage, JavaScript, etc.

IntroScope
Used to analyse what happens on the server. Used to analyse CPU and memory usage, code, queries to the db, etc.

Not used yet
- HttpWatch
- NetMon
- Windows Performance Monitor
- Windows Resource Monitor
- Visual Round Trip Analyser
- Performance Toolkit for Microsoft Dynamics CRM 2011

Any further recommendations are very welcome. Write your comment!

Tuesday, October 11, 2011

jQuery Mobile 1.0 RC1 released

The future is mobile.

At the Microsoft conference Build last month, ASP.NET MVC 4 was announced and with it the jQuery Mobile Framework. Since a few days jQuery Mobile 1.0 RC1 is released. But what is jQuery Mobile?

There Website tells us:
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

So let's see what it does and how it can be used. I build a small demo web application with ASP.NET MVC 4. Based on the AdventureWorks database and the vendor table I got a form that looks in the Windows Phone emulator like that.

Looks not too bad but not really phone like. Via NuGet I install jQuery.Mobile.MVC which is based on jQuery.Mobile. After the installation I already have a new design because of the new MasterPage that was installed with the package. The site looks like:


Much better already. But where does this changes come from? If we take a look at the new mobile MasterPage we'll find the following code: 

In this code snippet we see two new attributes (data-role and data-theme) which belong to jQuery Mobile and they are the reason for the new formatting.

If we like to format the Create New link on top of the side, so it will be a touchable button instead of the normal link, it's that simple. Just add the attribute data-role="button" and if you also like an image next to it data-icon="plus". After that small change it looks like:

Pretty easy, isn't it. There are a lot more functionality and design stuff in jQuery Mobile. Check out there website and attend my session at TechDays in Bern.