Negli ultimi anni i framework javascript hanno avuto una forte espansione ed è ormai impensabile la realizzazione di un sito/applicazione web che faccia un uso del javascript che vada oltre il banale, senza l’utilizzo di uno di questi framework.
In questo articolo voglio mostrare le differenze tra due di questi framework, che come avrete capito dal titolo sono MooTools e JQuery. Il motivo per cui ho scelto di mettere a confronto proprio queste due librerie è per mostrare come mai ritengo MooTools superiore a jQuery, che al momento è senza dubbio il framework più diffuso.
Fama immeritata
Per qualche ragione a me ignota MooTools ha la fama di essere un framework complicato da usare, o per un target di utenti più esperti. In realtà, e illustrerò con esempi, il codice javascript scritto con MooTools è nella maggioranza dei casi di più facile lettura e ha una semantica più intuitiva, senza per questo essere più complicato o lungo da scrivere.
Diversi negli obiettivi
Va chiarito, a dirla tutta, che i due contendenti non si pongono gli stessi obiettivi e per questo alcune loro scelte fatte in fase di design del linguaggio sono state influenzate dal diverso utilizzo immaginato per la libreria.
Nel dettaglio jQuery si prefigge l’obiettivo di manipolare il DOM in maniera semplice e rapida scrivendo poco codice, mentre MooTools ha ambizioni più ampie: Estendere il linguaggio javascript per permettere la scrittura di codice Object Oriented anche se sappiamo bene che JavaScript è un linguaggio prototipato.
Il fatto che forse non viene considerato quando si sceglie il framework in base a queste premesse, è che l’obiettivo di MooTools non esclude che questo sia anche semplice e di rapido utilizzo per manipolare il DOM.
Il codice scritto con jQuery non è poi tanto meno…
…non tanto da giustificare la grossa perdita di leggibilità del codice comunque. jQuery ha infatti questo brutto vizio di avere funzioni che fanno cose completamente diverse a seconda dei parametri che gli vengono passati.
A livello logico posso anche accettare il fatto che se chiamo la funzione $('element').click() senza parametri, invece che impostare un evento, lo “triggero”, ma il codice diventa molto meno chiaro da leggere e, soprattutto, diventa molto più facile sbagliare.
Di contro…
Il codice scritto con MooTools è facile da leggere
La sua sintassi è proprio pensata per essere compresa con un’occhiata anche da chi non ha dimestichezza col framework.
[javascript title=”Esempio jQuery”]
$(document).ready(function() {
$(‘#element’).css(‘color’,’blue’).click(function() {
alert($(‘#element’).css(‘color’));
});
});
//[…]
$(‘#element’).click();
[/javascript]
[javascript title=”Esempio MooTools”]
window.addEvent(‘domready’, function() {
document.id(‘element’).setStyle(‘color’,’blue’).addEvent(‘click’, function() {
alert(document.id(‘element’).getStyle(‘color’));
});
});
//[…]
document.id(‘element’).fireEvent(‘click’);
[/javascript]
Da notare che avrei potuto usare $('element') in MooTools al posto di document.id('element') che però trovo molto più chiaro. Allo stesso modo avrei potuto usare jQuery('#element') in jQuery che invece non rende in alcun modo più evidente il significato del codice.
Il paradigma ad oggetti non ha rivali
Come già detto in precedenza, MooTools, aka My Object Oriented (JavaScript) Tools, da la possibilità di seguire il paradigma di programmazione orientata agli oggetti in javascript con gli ovvi vantaggi derivati dalle sue proprietà: Incapsulazione, Ereditarietà e Polimorfismo. Non riesco a immaginare di poter programmare una qualsiasi funzionalità che vada oltre un “Hello World” in semplice programmazione strutturata.
[javascript]
var Cat = Class({
razza: “Gatto”,
verso: “Miao”,
speak: function() {
return “Il “+this.razza+” fa “+this.verso;
}
});
var Dog = Class({
Extends: Cat,
razza: “Cane”,
verso: “Bau”,
initialize: function(razza) {
if (razza)
this.razza = razza;
}
});
var cat = new Cat();
var dog = new Dog();
var mydog = new Dog(“Pitbull”);
cat.speak(); // Il Gatto fa Miao
dog.speak(); // Il Cane fa Bau
mydog.speak(); // Il Pitbull fa Bau
[/javascript]
Il bello è che questo modello viene applicato anche ai prototipi base del JavaScript consendendoci di estendere il linguaggio base.
Immaginiamo per esempio di aver bisogno di una funzione che ci permette di verificare se una stringa inizi con un’altra stringa specificata. In javascript semplice scriveremmo il seguente codice:
[javascript]
function starts_with(s1, s2) {
return s1.substr(0,s2.length)==s2;
}
var foo=”abcdef”;
starts_with(foo, “abc”); //True
[/javascript]
In MooTools invece possiamo estendere la “classe” String, aggiungendo il metodo che ci serve:
[javascript]
String.implement({
startsWith: function(s) {
return this.substr(0,s.length)==s;
}
});
var foo=”abcdef”;
foo.startsWith(“abc”); //True
[/javascript]
Molto più pulito non trovate?
I plugin scritti per MooTools sono quindi solitamente delle classi che racchiudono tutte le funzionalità e che possono a loro volta essere estesi per aggiungere/modificare a seconda delle proprie esigenze, mentre in jQuery i plugin non sono altro che delle funzioni dichiarate all’interno del namespace globale jQuery.fn e non è possibile riprodurre la funzione startsWith in jQuery. Un altro esempio:
[javascript]
jQuery.fn.colorize = function(color) {
this.each(function() {
this.css(‘color’, color);
});
return this;
};
[/javascript]
Conclusioni
Ci sarebbe molto altro da dire su entrambi i framework ma in definitiva trovo che MooTools lasci molta più libertà allo sviluppatore e allo stesso tempo offra molto di più. jQuery invece consente di scrivere meno codice a discapito della leggibilità e dispone di molti più plugin già pronti, grazie al fatto che il suo uso è molto più diffuso e quindi la comunità conta di più sviluppatori che, IMHO, non hanno capito niente.
Post-Scriptum
Al di là delle affermazioni provocatorie trovo che jQuery sia un ottimo framework javascript, sicuramente meglio di molti altri rappresentanti della concorrenza come Prototype, ma MooTools è troppo meglio!
