ASP.NET was an easy choise for a server side code, but what about client side ?
The heavy viewstate, endless event handlers and infinity number of server side requests just to make the GUI  friendly – well, it just didn’t sound as a proper way to do it.

So, what do we have ?
.NET as a server side platform, but despite  all it’s powerful abilities it has nothing to do with client side. At the end of the day all those fancy control are just HTML and JavaScript.

JavaScript is still the engine that runs at the client side and it’s great, but we all know how many lines of code we have to write and time to spend to make it fast, modular and cross browser.

jQuery – it’s a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Indeed, we can do a many things with jQuery and it realy simplify the coding, but what if we have to build a product list with complicated HMTL, complex logic and real time manipulation ?

As i mentioned before, ASP.NET and UpdatePanels are just to heavy and JavaScript is to long.

So, i did some research and find a couple of JavaScript Template Engines.
The first one i bumped in was jsRepeater. At first it seemed like a great solution but after a few tests i found all kinds of bugs related to the syntax conflicts with HTML and JavaScript.

After a few days of googling, tests and googling again i found the one and only –  jTemplates.
jTemplates is a template engine for JavaScript, wich is wraped in a jQuery Plugin.
The syntax is very simple and  intuitive. It’s support parameters, includes, if/else, loops, JavaScript functions and many other nice and usable features.

Let’s say we want to list all our products. What we have to do is to write the template (HTML), pass the data and we have a product list.

Look how easy this is. You just write HTML and werever you need to insert some data you put {$.T.P.ColumnName}.

So, how we use it ?
Just add some textarea to your page, give it some id, set it’s display style to none and write your template inside.

<textarea cols="0" rows ="0" style="display:none;" id="ProductListTemplate"><!--
{#foreach $T.Product as P}
	<div style=”float:left;width:150px;height:150px”>
		<div>{$T.P.Title}</div>
		<img src=”{$T.P.Url}” alt=”{$T.P.Title}” style=”width:10px;height:10px” />
		<hr />
		<div>Price : {$T.P.Price}$</div>
	</div>
{#/for}
--></textarea>

Add some empty container that will hold the result.

<div id="ProductListContainer"></div>

Execute setTemplateElement and execute processTemplate while passing the data into it as a parameter

$("#ProductListContainer").setTemplateElement("ProductListTemplate");
$("#ProductListContainer").processTemplate(data);

Easy, isn’t it ?
I must say that the above example is a simple one, but I’ve been using jTemplates to create complicated lists, grids, trees, popups and even an image editing web application. Use it, I’m sure you will love it.

A couple of days ago, I had to create some web application with a very rich client side UI.
It worked like a charm in Google Chrome, Firefox… but IE7, after few dozens of nyroModal popups it just went dead.

Most of the styles are gone, JavaScript functions began to throw exceptions till it just stoped working, decided it can’t tolerate this kind of abuse any more and closed it self without any warning.

The first thing i did is to open Performance Monitor and what I see… every nyroModal popup i open cost me about 5Mb, so after a few clicks my IE7 virtual memory was about 789Mb. Terrifying, isn’t it ?

I’ve searched a bit and found the source of this problem was in one (of many) memory leaks IE7 proudly has – cleaning memory for removed HTML elements.

And now the fix.

1). Open your jQuery.js and find the next lines of code

    jQuery.extend({
        cache: {},

and add new function “discardElement”

    jQuery.extend({
        cache: {},

        discardElement: function(element) {
            var jqGCID = 'jqGarbageCollector';
            var jqGC = document.getElementById(jqGCID);
            if (!jqGC) {
                jqGC = document.createElement('div');
                jqGC.id = jqGCID;
                jqGC.style.display = 'none';
                document.body.appendChild(jqGC);
            }

            // place the element to the Garbage Collector
            // and clear it's HTML contents
            jqGC.appendChild(element);
            jqGC.innerHTML = '';
        },

2). Find the next lines of code in the opened jquery.js

	remove: function( selector ) {
		if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
			// Prevent memory leaks
			jQuery( "*", this ).add([this]).each(function(){
				jQuery.event.remove(this);
				jQuery.removeData(this);
			});
			if (this.parentNode)
				this.parentNode.removeChild( this );
		}
	},

and replace “this.parentNode.removeChild( this );”
with “jQuery.discardElement(this);”

	remove: function( selector ) {
		if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
			// Prevent memory leaks
			jQuery( "*", this ).add([this]).each(function(){
				jQuery.event.remove(this);
				jQuery.removeData(this);
			});
			if (this.parentNode)
				// this.parentNode.removeChild( this );
				jQuery.discardElement(this);
		}
	},

That’s it, now you (and every plugin) can do $(‘element’).remove() without being worry IE will eat all of your memory.

AForge.NET is a C# framework designed for developers and researchers in the fields of Computer Vision and Artificial Intelligence – image processing, neural networks, genetic algorithms, machine learning, robotics, etc.

The framework is published under LGPL v3 license and comprised by the set of libraries and sample applications, which demonstrate their features:

• AForge.Imaging – library with image processing routines and filters
• AForge.Vision – computer vision library
• AForge.Neuro – neural networks computation library
• AForge.Genetic – evolution programming library
• AForge.MachineLearning – machine learning library
• AForge.Robotics – library providing support of some robotics kits
• AForge.Video – set of libraries for video processing

The framework is provided not only with different libraries and their sources, but with many sample applications, which demonstrate the use of this framework, and with documentation help files, which are provided in HTML Help format.

As you can see this framework contains varied libraries, but as for me i was especially interested in the image processing routines and filters.

Let’s see  the  CannyEdgeDetector in action.

using AForge.Imaging.Filters;

// Loading some file
using (Bitmap SampleImage = (Bitmap)Image.FromFile("test.jpg"))
{
    // We must convert it to grayscale because
    // the filter accepts 8 bpp grayscale images
    Grayscale GF = new Grayscale(0.2125, 0.7154, 0.0721);
    using (Bitmap GSampleImage = GF.Apply(SampleImage))
    {
        // Saving the grayscale image, so we could see it later
        GSampleImage.SaveAsJpeg("testBW.jpg", 100);

        // Detecting image edges and saving the result
        CannyEdgeDetector CED = new CannyEdgeDetector(0,70);
        CED.ApplyInPlace(GSampleImage);
        GSampleImage.SaveAsJpeg("testEDGED.jpg",100);
    }
}

// SaveAsJpeg is an extension method i wrote to be able to save
// Jpeg images with parametrized quality
// You can use Image.Save ("image.jpg", ImageFormat.Jpeg) instead

Now, let see the results ( click the image to see full size )

The result is great, and of course we can modify the threshold levels to gain even better results.
As for other filter and effects there are many of them in this library.
There are Noise generators, color correction filters, smoothing filters and more.

Sure, it’s no Photoshop, but i must say it’s very close to it.

Hope you will find this useful, I did.

Coming soon…