In the last few days I've read a lot of blog post about Asp.Net MVC Performance. Following the Simone’s post and Rudi’s post i started to test the Asp.Net MVC engine. First of all i wanted to test using the same Apache Bench Tool used by Rudi and wanted to store and compare different results.
After playing with the command prompt a little I started a quick & dirty test runner with c# (I’m working all day with c++ && MFC so I’m always looking for a way to write some .Net code ; D ) and the result is … ABAnalyzer
I want to test the performances of client-side rendering vs server-side rendering so i want to monitor the overall “Request per second” and “Document length” meters. The source code is published in the public code repository of DotNetMarche hosted by Google Code so you can download and play with it (maybe adding functionalities you need). The solution has 2 projects the frontend gui and the services layer (bench runner, analyzer, simple storage) so you can use ABAnalyzer.Services to write your own test tool.
This is the first release (there are few minor bugs I’ve to fix as I can) with just the minimum functionalities I needed to run my tests.
If you want to play with the tool just download the precompiled release (link at the end of this post).
How it works
The “Loaded tests” combo is the list of the test in the current archive (currently only one archive containing an arbitrary number of test addresses); just enter “google” as the test name (and graph label) and fill the others values following the shapshot.
Note: use with care, don’t hammer any website! Stress test should be on local servers.
The “Bootstrap” flag fire a single request before running the test to the test address (to bootstrap the appdomain without affecting the results). The “Add” button just append the test in current list (only one test for single key is allowed), “Start” add the test and run immediately spanning a new process for ab.exe.
The result is shown in plain text (what in the sources I call RawData) (just have to select the test in the combo.. to fix)
The two indicators I want to check are displayed using the Microsoft Chart Control
Redo the test with ibm.com, microsoft.com; now you have 3 loaded test to analyze just for fun: we’ll use the tool to test the same local page and measure the performances of our Asp.NET MVC after each code optimization.
Download: ABRelease-0.1.0.0.zip
While i was developing a simple demo for a friend of mine i found a bug on the jQuery annotated script for VS intellisense. I found that the parent > child selector give bad results. I issued the bug on jQuery bug tracker and today i want to move first steps with QUnit to create a non regression test for my demo.
First of all i created a simple html page with two span, one inside a div and one outside.
<html>
<head>
<title> test </title>
</head>
<body>
<div id="container">
<span>Inside div</span>
</div>
<span>Outside div</span>
</body>
</html>
Then added all the stuff for testing
<html>
<head>
<title> test </title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/qunit/testsuite.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/qunit/testrunner.js"></script>
<script type="text/javascript">
$(function(){
test("inside span", function() {
expect(2);
var list = $('#container > span');
equals( list.length, 1, "span count inside the div = 1" );
equals( list[0].innerHTML, 'Inside div', "innerHTML of inside span" );
});
test("outside span", function() {
expect(2);
var list = $('span').not('#container > span');
equals( list.length, 1, "span count outside the div = 1" );
equals( list[0].innerHTML, 'Outside div', "innerHTML of outside span" );
});
test("all span", function() {
var list = $('span');
equals( list.length, 2, "all span count = 2" );
});
});
</script>
</head>
<body>
<div id="container">
<span>Inside div</span>
</div>
<span>Outside div</span>
<div id ="test_results">
<h1>QUnit example</h1>
<h2 id="banner"></h2>
<h2 id="userAgent"></h2>
<ol id="tests"></ol>
<div id="main"></div>
</div>
</body>
</html>
Let’s run the test opening the page in the browser
Now let’s switch to –vsdoc2.js annotated file and re-run the tests…
The ‘#container > span’ selector returns all the span in the page!
Code
Ticket
Warming up this morning with a code snippet: we want to change the mailto: link in a gravatar enabled link using jQuery. First of all surf to http://en.gravatar.com/site/implement/url to understand how the gravatar link is formed. So we need ad md5 of our email addresses, just go to http://www.semnanweb.com/jquery-plugin/md5.html and download the MD5 plugin for jquery.
All we need to do is just find all the mailto link using a simple selector $('a[href^=\"mailto\"]') and then manipulate the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gravatar demo</title>
<script type="text/javascript" src="jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript" src="jquery.md5.js"></script>
<script type="text/javascript">
function unescapeEmailAddress(email) {
return email
.replace(new RegExp(" !dot! ", "g"), ".")
.replace(new RegExp(" !at! ", "g"), "@")
.replace('mailto:', '');
}
$(function() {
$('a[href^=\"mailto\"]').each(function() {
var self = $(this);
var email = unescapeEmailAddress(self.attr('href'));
var md5 = $.md5(email);
var gravatar = 'http://www.gravatar.com/avatar/' + md5 +'?d=monsterid';
self
.html('<img src=\'' + gravatar + '\' alt=\'' + email + '\'/>')
.attr('href', 'mailto:'+email)
;
});
});
</script>
</head>
<body>
<a href="mailto:mtb !dot! snowboard !at! gmail !dot! com">mtb !dot! snowboard !at! gmail !dot! com</a>
<a href="mailto:prova !at! prova !dot! com">prova !at! prova !dot! com</a>
</body>
</html>
In occasione del 9° Workshop DotNetMarche ho realizzato una mini applicazione demo utilizzando Asp.Net MVC e jQuery per dimostrare alcune modalità di utilizzo di jQuery per la manipolazione JSON e l’utilizzo di client-side templates.
Il codice è disponibile via subversion al repository DotNetMarche http://dotnetmarcheproject.googlecode.com/svn/trunk/src/Projects/Blackboard.
L’applicazione (incompleta) ad ora permette la creazione di presentazioni contenenti testo e grafica, la selezione, lo spostamento e l’allineamento in blocco degli elementi, la definizione del testo, del colore e della dimensione dei blocchi <span> ed un browser di immagini che permette l’inserimento di icone. Nelle prossime settimane cercherò di completare il progetto e di bloggare step by step la realizzazione dell’applicazione sotto forma di tutorial… stay tuned!
