C'est suite à la publication de Loic Bar et après être remonté à la source de cet exemple que j'ai décidé de faire ce billet.

L'idée de cet exemple est de faire un effet de "rollover" sur une ligne de tableau avec selection/deselection d'une ligne via click.

Rien de bien compliqué, cet exemple est juste là pour comparer l'utilisation de jQuery et de msAjax.

Je vous propose donc ici de voir cet exemple d'un autre oeil de façon à comprendre que ces benchmarks ne sont pas forcement pertinents.

Utilisateur des deux Framework mis en compétition, j'avoue avoir une préférence pour msAjax. Cependant, l'utilisation de jQuery est tout aussi agréable.

J'apporte ici juste une autre façon d'aborder le problème et surtout de le voir !

Regardons donc de plus près la partie scripting nous permettant de faire les effets mouseover, mouseout et click sur notre tableau.

jQuery - Nous utilisons ici la méthode $(document).ready() pour déclencher notre script au chargement de la page.
L'utilisation du "jQuery selector" nous permet de directement boucler sur tous les TR de la table afin d'y associer les évènements correspondants.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
$(document).ready(
    function() {
        $('table#<%= this.gv.ClientID %> tr')
            .mouseover(
                function() {
                    if (this.className != 'row-select') {
                        this.className = 'row-over';
                    }
                }
            )
            .mouseout(
                function() {
                    if (this.className != 'row-select') {
                        this.className = 'data-row';
                    }
                }
            )
            .click(
                function() {
                    this.className = (this.className == 'row-select') ? 'data-row' : 'row-select';
                }
            );
    }
);

msAjax - Nous utilisons ici la méthode Sys.Application.add_load() pour déclencher notre script au chargement de la page.
L'utilisation de la méthode Array.forEach() nous permet de directement boucler sur tous les TR de la table afin d'y associer les évènements correspondants au travers de $addHandlers().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
Sys.Application.add_load(
    function() {
        Array.forEach(
            $get('<%= this.gv.ClientID %>').getElementsByTagName('TR'),
            function(element, index, array) {
                $addHandlers(
                    element,
                    {
                        mouseover: function(eventElement) {
                            var tr = eventElement.target.parentNode;
                            if (tr.className != 'row-select') {
                                tr.className = 'row-over';
                            }
                        },
                        mouseout: function(eventElement) {
                            var tr = eventElement.target.parentNode;
                            if (tr.className != 'row-select') {
                                tr.className = 'data-row';
                            }
                        },
                        click: function(eventElement) {
                            var tr = eventElement.target.parentNode;
                            tr.className = (tr.className == 'row-select') ? 'data-row' : 'row-select';
                        }
                    }
                );
            },
            null
        );
    }
);

Comme vous pouvez le constater ci-dessus, la partie scripting diffère très peu entre jQuery et msAjax une fois cette dernière réecrite.

L'utilisation de la méthode Array.forEach() permet à la partie msAjax d'utiliser une syntaxe se rapprochant d'un "jQuery Like".

Voici donc les résultats associés à ces 2 pages :

jQuery : 134 KB

msAjax : 159 KB

Cela correspond aux différents tests déjà paru sur la toile ces derniers temps.

Je vais maintenant vous montrer comment cela peux devenir une question de point de vue !

En effet, si l'on creuse un peu pour comprendre ce qu'il se passe, la page msAjax charge beaucoup plus de scripts que nécessaire.

Effectivement, les scripts nécessaires aux UpdatePanel, PageMethods, Globalization, Localization sont inclus dans cette page exemple.

Cependant, nous n'avons besoin que du "Core Framework" pour réaliser cette démonstration.

Modifions donc notre ScriptManager de la manière suivante :

1
2
3
 
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="false" EnablePartialRendering="false"
    EnableScriptGlobalization="false" EnableScriptLocalization="false" ScriptMode="Release">
</asp:ScriptManager>

Que donne ce nouveau paramétrage ??

jQuery : 134 KB

msAjax - 129 KB

Etonnant, non ???

Je dirais pas tant que cela, il ne faut pas oublier que la qualité d'un Framework se juge par la connaissance qu'en ont ces utilisateurs. Connaissant très bien le Framework msAjax, il est très facile pour moi d'inverser le résultat de ce benchmark comme je viens de vous le démontrer.

Le meilleur avis que vous pouvez vous faire sur ces deux Framework sera en les utilisant au quotidien.

PS: Vous trouverez le code complet de ces exemples en attachement de ce billet.

Aurelien
Member of WygTeam