Parte della decisione sta nel domandarsi che cosa si vuole fare con JavaScript. Consideriamo il JavaScript base. Senza nessun framework; solamente vecchio e puro JS.
Mette a disposizione oggetti nativi come Strings, Numbers, Functions, Arrays, Dates, Espressioni regolari, e più. Inoltre predispone un modello di ereditarietà - un qualche esoterico modello chiamato ereditarietà prototipale (ne parlerò più avanti).
Questi blocchi portanti ed il concetto di ereditarietà sono pane e burro di ogni linguaggio di programmazione e non hanno assolutamente niente a che vedere con i browser o con il web o con CSS o HTML.
Si potrebbe scrivere qualsiasi cosa si voglia con JavaScript. Tris, scacchi, photo editing, un server web, qualunque cosa. Il fatto è che il 99% di tutto il JS che c'è in giro lo vediamo eseguito sui browser ed è in questo contesto che lo pensiamo. Ossia il linguaggio di programmazione per il browser.
Sapere che il browser, il DOM, è l'area dove la maggior parte delle volte utilizziamo JavaScript ma che quest'ultimo è anche un linguaggio di programmazione molto robusto ed espressivo aiuterà a capire le differenze tra MooTools e jQuery.
Non Solo il DOM.
Se si pensa a cosa si vuole fare con JavaScript in termini di "prendere elementi nella pagina per farne qualcosa" allora jQuery è probabilmente la scelta migliore. Eccelle nell'offrire un sistema molto espressivo per descrivere il comportamento nelle pagine in un modo che quasi non sembra programmazione vera e propria. Si può sempre continuare ad usare il resto in JavaScript per fare quello che si vuole, ma se si è focalizzati sul DOM - per cambiare proprietà CSS, animare elementi, recuperare dei contenuti via Ajax, etc - tutto quello che si vorrà fare sarà ottenibile tramite jQuery, più qualcosa - se mancante in jQuery - in vecchio e puro JavaScript. jQuery mette anche a disposizione metodi che non riguardano prettamente il DOM; ad esempio, offre un meccanismo per iterare sugli array - $.each(array,fn) - oppure, ad esempio, offre un metodo per il trim delle stringhe - $.trim(str). Ma non sono presenti molti metodi di questo tipo, che è un bene, perché, per la maggior parte, se si stanno solo prendendo elementi dal DOM, ci si itera sopra, e li si altera (aggiungendo HTML, cambiando stili, aggiungendo dei listener per eventi quali click e mouseover, etc) non serve molto altro.
Ma se si pensa al JavaScript nella sua totalità, si può notare come jQuery non si focalizzi in cose al di fuori del DOM. Questa è una delle ragioni per cui è così facile da imparare, ma altresì limita il modo in cui può aiutare a scrivere JavaScript. Vuol essere niente più che un solido sistema di programmazione per il DOM. Non prevede ereditarietà e nemmeno dispone di utilità per tutti i tipi nativi del linguaggio JavaScript, ma non ne ha la necessità. Se si vogliono fare magie con stringhe, date, espressioni regolari, array e funzioni, è possibile. Ma aiutare in questo non è compito di jQuery. JavaScript come linguaggio è quello che serve. jQuery rende il DOM il tuo ambiente, ma il resto del linguaggio JavaScript è fuori dalla sua ottica.
È qui la differenza maggiore rispetto a MooTools. Piuttosto che focalizzarsi esclusivamente sul DOM (comunque, e ci tornerò piu avanti, offre tutte le stesse funzionalità di jQuery ma consegue lo scopo in maniera totalmente differente), MooTools prende sotto suo dominio tutto l'intero linguaggio. Se jQuery rende il DOM l'ambiente operativo, MooTools mira a rendere tutto JavaScript come ambiente operativo, e questa è una delle ragioni per cui è più ostico da imparare.
L'Ereditarietà in JavaScript.
Il linguaggio di programmazione JavaScript offre alcune cose veramente fantastiche a riguardo. Per i principianti, è un linguaggio funzionale, significa che tratta le funzioni come oggetti di ordine superiore che possono essere passati come variabili praticamente come tutti gli altri oggetti - stringhe o numeri ad esempio. È progettato su questo concetto base e molti dei metodi e dei pattern presenti funzionano al meglio quando il codice viene scritto in questo modo. È la differenza tra:
for (var i = 0; i < myArray.length; i++) { /* fai qualcosa */ }
e:
myArray.forEach(function(item, index) { /* fai qualcosa */ });
JavaScript ha un modello di ereditarietà che non è unico ma piuttosto raro nei linguaggi di programmazione. Invece dell'ereditarietà a classi (una classe può essere sottoclasse etc) JS vira verso l'ereditarietà prototipale. Questo significa che gli oggetti ereditano direttamente da altri oggetti. Se si referenzia una proprietà in un oggetto che eredita da un altro oggetto, il linguaggio ispeziona l'oggetto figlio per quella proprietà e, se non la trova, la cerca nel padre. Questo è il modo in cui funziona sugli array. Quando si scrive:
[1,2,3].forEach(function(item) { alert(item) }); //alert di 1 poi 2 ed infine 3
il metodo "forEach" non è una proprietà dell'array che viene dichiarato ([1,2,3]), ma è una proprietà del prototipo per tutti gli Array. Quando si referenzia questo metodo il linguaggio cerca forEach nell'array, e, non trovandolo, guarda all'interno del prototipo 'padre' di tutti gli array. Questo significa che il metodo forEach non è in memoria per ogni array dichiarato; è in memoria soltanto per il prototipo degli array. In due parole: efficienza e potenza. (nota: l'alias utilizzato in MooTools per forEach è each)
Autoreferenza.
In JavaScript esiste una keyword speciale: "this". È difficile per me in poche parole definirla ma, di default, "this" è l'oggetto al quale il metodo corrente appartiene. Permette agli oggetti di riferirsi a se stessi all'interno dei loro metodi, in quanto altrimenti non avrebbero altri mezzi per farlo. Tutto questo inizia a diventare importante quando si creano oggetti figli e numerose istanze di quell'oggetto; come altro potrebbe il metodo di un oggetto riferirsi all'oggetto stesso? Quando la copia attuale del metodo esiste nel padre, non nel figlio, la keyword "this" permette a queste istanze di riferirsi al loro stato. (qui c'è una piu completa descrizione a riguardo, ed un'altra da Mozilla)
La keyword "this" permette agli oggetti che ereditano da altri oggetti di riferirsi a loro stessi, ma ci sono volte in cui si vorrebbe far riferimento a qualcos'altro attraverso il "this". Questo procedimento è chiamato binding, ossia quando si specifica un "this" diverso per un metodo. Il metodo "each" (del tipo Array) permette di specificare l'oggetto a cui far riferimento attraverso un secondo argomento. Qui sotto c'è un esempio che esplica il passaggio di un "this" differente:
var ninja = {
weapons: ['katana', 'throwing stars', 'exploding palm technique'],
log: function(message) {
console.log(message);
},
logInventory: function() {
this.weapons.each(function(weapon) {
//vogliamo che "this" faccia riferimento a ninja...
this.log('this ninja can kill with its ' + weapon);
}, this); //quindi passiamo "this" (che è ninja) ad Array.each
}
};
ninja.logInventory();
//this ninja can kill with its katana
//this ninja can kill with its throwing stars
//this ninja can kill with its exploding palm technique
Nell'esempio qui sopra, "leghiamo" ninja (che è il "this" dentro al metodo logInventory) al metodo che passiamo all'array in modo che ci si possa riferire alla proprietà log di ninja. Se non l'avessimo fatto, "this" sarebbe stato window.
Questi sono solamente alcuni esempi del potere e dell'espressività che JavaScript ha da offrire - ereditarietà, auto referenza e binding, ed efficienti proprietà prototipali. La brutta notizia riguarda il fatto che JavaScript puro non rende queste cose potenti molto usabili o accessibili, ed è qui che entra in gioco MooTools. Rende questi tipi di pattern semplici ed anche piacevoli da usare. Si finisce per usare codice piu astratto, ed a lungo andare, è una buona cosa - una cosa potente. Capire come questi patterns siano preziosi e come usarli correttamente richiede uno sforzo, ma la cosa positiva è che il codice che si scrive è molto più riusabile e facile da mantenere. Andrò nei dettagli a riguardo tra un minuto.
Se ti è piaciuto l'articolo, iscriviti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog:
Trovato questo articolo interessante? Condividilo sulla tua rete di contatti in Twitter, sulla tua bacheca su Facebook, in Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!
