Framework a confronto: jQuery, MooTools, Prototype

Javascript è un linguaggio talmente flessibile ed estensibile che ha permesso la nascita di una infinita collezione di framework, plug-in e librerie di tool più o meno complesse.

Questo perché ogni sviluppatore, una volta compresi i segreti racchiusi all'interno di Javascript, ha la piena libertà di escogitare le strategie di programmazione che meglio preferisce.

Tuttavia, realizzare librerie di codice Javascript avanzate è un compito tutt'altro che semplice. Per questo motivo, tra la vasta gamma di prodotti open source che abbiamo a disposizione, solo alcuni sono riusciti a raggiungere i massimi livelli di sviluppo: tra questi troviamo jQuery ("The write less, do more" framework), MooTools ("The compact framework") e Prototype.

In questo articolo analizzeremo i punti di forza di questi tre framework, cercando di capire quali vantaggi offrono rispetto alla concorrenza e di cosa necessitano per poter essere ulteriormente migliorati e potenziati.

Una nota importante: nell'articolo verranno analizzati i tre frameworks nelle loro versioni Core ufficiali, e le caratteristiche che verranno prese in considerazione saranno unicamente quelle offerte da queste ultime. Non verranno dunque considerati gli eventuali plug-in di terze parti.

Dopo aver analizzato nella prima parte jQuery e MooTools, parleremo nella prossima di Prototype, fornendo anche degli esempi comparativi di codice.

jQuery "the write less, do more" framework

Dati tecnici

jQuery è molto probabilmente il framework Javascript più utilizzato. A differenza di MooTools e Prototype, che estendono i prototypes dei tipi nativi (e non solo), jQuery è un framework "namespaced", ovvero basato sui namespace, che non altera i prototypes.

Immediatezza. jQuery deve principalmente il suo successo alla sua immediatezza nella scrittura di codice: a parità di risultato, molto probabilmente con jQuery si sarà scritto molto meno codice rispetto alla concorrenza, da qui lo slogan "write less do more".

A volte questa caratteristica, oltre a rappresentare ovviamente un vantaggio per lo sviluppatore nella fase di scrittura, costituisce un probabile svantaggio in fase di lettura: jQuery non offre getters e setters definiti, ma metodi unici che svolgono rispettivamente i due compiti a seconda dei parametri che gli vengono forniti.

Ad esempio, nel caso si stia lavorando con gli stili CSS di un elemento, il metodo css svolge sia il ruolo di getter sia quello di setter:

// recupera il valore della proprietà width
$("myElement").css("width");

// imposta il valore della proprietà width a 200px
$("myElement").css("width", "200px");

O ancora, per settare o azionare un evento si usa lo stesso metodo in due modalità differenti:

// setta l'evento click
$("myElement").click(function() {
	alert("You have clicked");
});

// aziona l'evento click
$("myElement").click();

Come si può notare, la velocità di scrittura è notevole, a discapito della leggibilità.

Facilità d'uso. A differenza di MooTools, e in larga parte anche di Prototype, che sono framework principalmente indirizzati ad un pubblico di sviluppatori esperti, jQuery si pone come framework "per tutti". Effettivamente la curva di apprendimento di jQuery è la più bassa tra le tre, dato che tutto il meccanismo ruota intorno al namespace jQuery (o al suo "alias" $) e il sito ufficiale offre molti tutorial e strumenti che permettono di iniziare da subito ad usare il framework.

Nonostante ogni giorno vengano sfornati moltissimi plug-in per jQuery, quest'ultimo è più che altro un prodotto "pronto per l'uso", che non offre lo stesso livello di estensibilità raggiunta in particolare dalla struttura Class-oriented di MooTools.

Website e community. Questo non è ovviamente un vantaggio appartenente al codice ma è innegabile: il successo di jQuery è in parte dovuto alla sua attivissima community. Il sito ufficiale, oltre agli strumenti usuali mirati all'apprendimento della libreria, offre gruppi di discussione, ospita una vastissima collezione di plug-in realizzati da terze parti e permette un'ottima integrazione tra utente e prodotto, il che non può che favorire lo sviluppo dello stesso.

Framework Ajax. Il framework Ajax presente nel Core di jQuery è molto probabilmente il più immediato tra tutti ed il più semplice da utilizzare. Questo punto potrebbe coincidere con quello sulla facilità di utilizzo complessiva, ma la componente Ajax di ogni libreria rapprensenta una caratteristica da analizzare a parte, dato che è il vero e proprio cuore del Web 2.0. L'engine Ajax di jQuery unisce semplicità di utilizzo ed immediatezza ad un set completo di funzionalità.

Selector Engine. jQuery possiede una gamma davvero ampia di metodi per selezionare set complessi di elementi, tra selettori e pseudo-selettori.

La presenza del nuovo Selector Engine Sizzle, inoltre, favorisce ottime prestazioni e permette di sbizzarrirsi con la complessità dei selettori. Non a caso, sembra che anche Prototype, come Dojo, sia interessato ad integrare questo script standalone.

Compatibility Mode. Dato che tra le tre librerie prese in considerazione in questo articolo, jQuery è l'unica che non altera i prototypes, essa è anche l'unica che può essere utilizzata in Compatibility Mode, ovvero in collaborazione con le altre librerie. Per quanto remota possa essere questa possibilità, esistono dei casi in cui ci si voglia avvalere di più framework nella stessa pagina. jQuery, attraverso apposite strategie (prima tra tutte quella rappresentata dal metodo noConflict) è in grado di lavorare in coppia con altri framework senza produrre risultati inattesi.

Cosa manca a jQuery

Il primo e più grande punto debole di jQuery riguarda la compatibilità cross-browser. Nonostante la lista riportata sul sito includa tutti i browser comuni, molte volte capita che diverse funzioni Core basilari (effetti, recupero degli stili, gestione degli eventi personalizzati) non funzionino correttamente con alcuni di essi.

A mio avviso deve essere inoltre migliorato l'engine interno del metodo css, utile al setting e soprattutto al getting delle proprietà CSS. Quella di recuperare i valori CSS è una pratica molto comune nelle applicazioni di ultima generazione, e molte volte capita che i valori restituiti dalla funzione siano radicalmente differenti a seconda del browser utilizzato.

Una delle possibili migliorie inoltre, potrebbe sicuramente riguardare l'engine per le animazioni, che lavora bene con gli effetti basilari ma mostra tutti i limiti del sistema di queuing utilizzato internamente quando si ha la necessità di creare effetti avanzati che coinvolgono set di elementi.

MooTools, "the compact framework"

Dati tecnici

Tra i tre framework analizzati in questo articolo, MooTools è sia il più giovane sia il più particolare. Inizialmente fortemente ispirato a Prototype, ha saputo in seguito guadagnare una vera e propria identità per le molte novità introdottte negli engine interni.

MooTools è un framework massicciamente "prototype-based" e soprattutto completamente Object-oriented, caratteristica rara per le librerie Javascript.

Leggibilità. MooTools è senza dubbio il framework più "leggibile" in assoluto. A mio avviso si possono apprendere molte più conoscenze dal codice stesso che dalla documentazione che viene fornita sul sito ufficiale. Questo perchè MooTools, a differenza di jQuery, privilegia una sintassi estesa che non bada a fare scrivere meno codice all'utente.

MooTools infatti, presenta getters e setters ben definiti in ogni ambito:

getStyle // recupera stile CSS
setStyle // imposta stile CSS
addEvent // imposta evento
fireEvent // aziona evento
removeEvent // rimuovi evento
// ...

Se da una parte questa sintassi favorisce una migliore leggibilità, dall'altra aumenta inevitabilmente la mole di codice necessaria per produrre i nostri script.

Estendibilità e modularità. Le strutture Object-oriented nascono per rendere il codice di qualsiasi linguaggio maggiormente estendibile e modulare. Forte di una struttura completamente basata su classi, MooTools offre il maggior livello di estendibilità e modularità: i plug-in possono essere spezzati in più parti (o classi) ed utilizzati a seconda dell'occorrenza.

Vasto kit di metodi. Essendo un framework "prototype-based", MooTools dispone di una vastissima quantità di metodi per ogni costruttore, quali Array, String, Function, Element, Hash e così via. Inutile dire che questi risultano essere molto utili in una moltitudine di situazioni. Non solo: è possibile estendere utleriormente tutti questi oggetti con metodi personalizzati.

In particolare, il costruttore Element è il più originale in assoluto, dato che, pur essendo una cosiddetta classe custom, si comporta e permette di essere utilizzato come gli oggetti nativi, rendendo di fatto la gestione degli elementi un compito piacevole da realizzare.

Cross-browser. I componenti del Core di MooTools si comportano in maniera adeguata con ogni browser indicato sul sito ufficiale, specialmente i metodi per il recupero delle proprietà CSS che forniscono valori comuni, rendendo possibile la realizzazione di applicazioni ampiamente cross-browser.

Animazioni. L'engine per creare animazioni offerto da MooTools è il più completo dei tre. Tra le feature di punta troviamo la possibilità di animare più set di elementi contrmporaneamente e con stili differenti. Inoltre, le classi ufficiali dedicate alle animazioni (come Slider, Scroller, Accordion e così via) svolgono molto bene il loro compito.

Cosa manca a MooTools

Prima di tutto, un sito più dettagliato e che fornisca maggiore interazione con l'utente e con la community. La documentazione, il blog e le demo perdono il confronto con la concorrenza.

Per quanto riguarda il codice, sicuramente la presenza di una più nutrita collezione di selettori custom farebbe molto piacere agli sviluppatori, cosi come l'aggiunta di shortcut relativi ai metodi più comuni offerti dal Core. Qualcuno richiede la presenza dei Live Events nel Core come nel caso di jQuery, ma a mio avviso questa funzionalità potrebbe essere fornita più adeguatamente tramite un apposito plug-in.

Inoltre, la nascita di un framework UI ufficiale, magari basato sugli elementi Canvas, porterebbe alla nascita di nuove prospettive focalizzate sulla libreria in questione.

Prototype

Dati tecnici

Prototype è il framework più anziano tra quelli che stiamo analizzando e molto probabilmente il primo che sia riuscito a diffondersi a livello internazionale e a tramandare la cultura dei framework Javascript. Per questo motivo, Prototype è considerato il "papà" di tutte le librerie Javascript.

Full-featured. Supporto per le animazioni a parte, Prototype offre un kit completo di strumenti per interagire con il linguaggio nativo in maniera semplificata e per lavorare con gli elementi DOM della pagina. Difficilmente un compito che preveda la manipolazione di dati o elementi non potrà essere realizzato con Prototype.

Vasto kit di metodi. Proprio come nel caso di MooTools, Prototype offre una quantià smisurata di metodi offerti nativamente (soprattutto nel caso degli Element.Methods, che coprono qualsiasi esigenza), senza contare la possibilità di aggiungerne di personalizzati tramite l'estensione dei prototypes.

Solida struttura Class-based. La struttura Object-oriented da cui è caratterizzato Prototype, oltra a vantare la maggiore maturità rispetto alla concorrenza, è costituita da solide gerarchie che favoriscono un'ampia estendibilità e modularità delle applicazioni. Inoltre, proprio questa particolare struttura OOP è stata la prima in assoluto a diffondersi per qualità del codice e robustezza, rappresentando la mera ispiratrice di un'infintità di applicazioni, tra cui lo stesso MooTools.

Cosa manca a Prototype

La caratteristica mancante più evidente di Prototype è senza dubbio il supporto nativo per le animazioni. Siamo d'accordo sul fatto che questo non rientra tra gli obiettivi prefissati dal Core della libreria, ma la concorrenza fornisce supporti per la creazione di animazioni completi di ogni caratteristica. Non dimentichiamo inoltre, che le animazioni (oltre che alle richieste Ajax) rappresentano il cuore del Web 2.0 e della maggioranza delle applicazioni di nuova generazione. La libreria Scriptacuolous non è in grado di competere ne con MooTools ne tantomeno con jQuery, sia per la scarsa fluidità degli effetti che per l'ormai sorpassata metodologia per la creazione degli stessi, senza contare i vari flickering e memory leaks risultanti.

L'introduzione di nuovi oggetti nativi ed extra interessanti nel Core, porterebbe inoltre nuova linfa vitale al framework.

Framework in pratica

Ora che abbiamo analizzato a fondo tutti i punti di forza e di debolezza dei tre framework, passiamo ad osservare (a puro scopo illustartivo) come questi ultimi si presentano "in pratica" nelle nostre applicazioni, prendendo in esempio tre situazioni molto comuni: l'aggiunta di eventi, la creazione di una richiesta Ajax ed infine la manipolazione del DOM.

Aggiunta di eventi

// jQuery
$("#myEl").click(function() { 
	alert("You have clicked"); 
}).mouseover(function() { 
	alert("Hovered"); 
});

// MooTools
$("myEl").addEvents({
	"click": function() { 
		alert("You have clicked"); 
	},
	
	"mouseover": function() { 
		alert("Hovered");
	} 
});

// Prototype
$("myEl").observe("click", function() { 
	alert("You have clicked"); 
}).observe("mouseover", function() {
	alert("Hovered");
});

Richiesta Ajax

// jQuery
jQuery.get("myPage.php", function(resp) {
	alert("Request completed!");
	$("#response").html(resp);
});

// MooTools
var req = new Request.HTML({
	url: "myPage.php",
	onComplete: function(t, e, resp, js) {
		$("response").set('html', resp);
	}
});

req.get();

// Prototype
var req = new Ajax.Request("myPage.php", {
	method: 'get',
	onComplete: function(resp) {
		$("#response").update(resp.responseText);
	}
});

Manipolazione DOM

// jQuery
$("#myOtherEl").append("<div id="myEl"> the text </div>");

// MooTools
var newEl = new Element("div", {id: "myEl"});
myEl.set('html', 'the text').inject(myOtherEl);

// Prototype
var el = document.createElement('div');
el.id = "myEl";
$("myEl").insert(myOtherEl, {position: "after"}).update("the text");

Conclusioni

La conclusione principale che si può trarre da questo articolo è una sola: tutti e tre i framework presi in considerazione sono prodotti di ottima qualità, completi di moltissime features che permettono di creare applicazioni di ultima generazione e semplificare enormemente il lavoro dello sviluppatore Javascript.

Fare una scelta è molto difficile, dato che nessuno è in grado di dire con esattezza quale sia il miglior framework Javascript open-source esistente al mondo. Tuttavia, da quanto riportato nei paragrafi precedenti, emergono delle notevoli differenze tra i software, soprattutto tra jQuery e MooTools/Prototype. Il primo, è indicato per un pubblico meno esperto, si presenta con una curva d'apprendimento molto bassa e pone la sue basi nella gestione del DOM. Gli altri due sono principalmente indicati per sviluppatori intermedi/avanzati, offrono sicuramente maggiore estensibilità e controllo dell'applicazione (fattore che deriva dall'estensione dei prototypes) e pongono le proprie basi sul linguaggio Javascript nativo stesso.