MooTools, il framework JavaScript compatto

Nel 2005 lo sviluppatore Valerio Proietti ha pubblicato un add-on con il nome di Moo.fx per il framework JavaScript Prototype, che allora era il leader di mercato. Siccome non era soddisfatto con le possibilità che offriva Prototype, si è presto deciso a sviluppare un proprio framework. Il progetto è poi apparso nel dicembre 2006 nella versione 0.87 con la Licenza MIT e con il nome di MooTools (My Object Oriented Tools). Ad oggi c’è un team di più di 20 sviluppatori e designer che si occupa dello sviluppo del framework che, stando a w3techs.com, viene attivato per ben il 3,3 % di tutti i progetti web (stato: ottobre 2016) e appartiene quindi, dopo i leader del settore jQuery e Bootstrap, ai tool JavaScript più popolari al mondo.

Il framework MooTools è una raccolta compatta con una struttura a moduli di strumenti JavaScript destinata agli sviluppatori JavaScript avanzati e professionisti. MooTools è composto da una vincente combinazione di eleganti interfacce di programmazione (API) ben documentate, abbinate a una forte capacità di orientamento agli oggetti. Il framework si contraddistingue principalmente per le sue possibilità flessibili di applicazione: esso, infatti, mette a disposizione diverse funzioni e classi in grado di supportare gli sviluppatori nella programmazione e nella pianificazione del design di progetti web moderni e di semplificare notevolmente il processo lavorativo. Oltre a ciò, grazie alla struttura modulare, il framework si può facilmente estendere ulteriormente. E, per finire, l’utente può incorporare miratamente quei componenti di cui necessita veramente. Ma il motivo per cui MooTools gode di un alto indice gradimento è dato dalla chiarezza e dalla compattezza delle sue applicazioni.

Diversamente dai comuni JavaScript, i quali solitamente si basano su prototipi, MooTools si struttura invece su un sistema di ereditarietà basato su classi che funge da base per la programmazione orientata agli oggetti e quindi anche per tutti i componenti contenuti nel framework. Questo sistema non è solamente il semplice emblema di una elevata estendibilità, bensì rappresenta anche la possibilità di scrivere un codice sorgente riutilizzabile e flessibile. Grazie a classi predefinite e modificabili potete realizzare oggetti analoghi come plug-in, elementi HTML, request Ajax, e così via, risparmiando molto tempo. Nel seguente elenco vengono raccolti alcuni dei componenti con i quali è possibile estendere MooTools Javascript:

• Core: MooTools Core costituisce il nocciolo del framework JavaScript sul quale si strutturano tutti i componenti. Accanto all’implementazione dei concetti di classe, Core contiene anche funzioni generali di assistenza.

• More: MooTools More è la raccolta di plug-in ufficiale del framework. More contiene diverse estensioni che semplificano il processo di sviluppo e che aggiungono ulteriori feature.

• Class: Si tratta di una classe base che vi servirà per istanziare, ovvero realizzare, oggetti delle classi riutilizzabili e per modificare classi già esistenti.

• Element: uno dei componenti più importanti con il cui aiuto potete attingere, in modalità compatibile alla multipiattaforma, a elementi oggetti HTML oppure direttamente realizzarli. Contiene anche le funzioni dollaro $ e $$.

• Fx: il modulo degli effetti che serve come base per l’animazione di elementi e quindi per la realizzazione degli effetti di scrolling, sliding e altro ancora.

• JSON: il modulo per la codifica e la decodifica di catene di simboli in formato JSON (JavaScript Object Notation).

Naturalmente alcuni moduli si sviluppano uno sull’altro e quindi il modulo Fx.CSS presuppone, ad esempio, che abbiate installato anche il già menzionato modulo Fx. In generale, però, potete scegliere molto miratamente dai download i componenti di cui avete bisogno per poi scaricarli come framework personale di MooTools composto su misura. A questo scopo i singoli moduli sono elencati all’interno dei settori più grandi, Core e More. È ugualmente possibile scaricare il pacchetto base completo o tutte le estensioni disponibili.

Un piccolo assaggio del modus operandi dei singoli componenti è dato dagli esempi in demo di MooTools effettuati dal team di sviluppatori sul sito web aryweb.nl. Qui non solo trovate rappresentazioni visive di funzioni drag&drop, di effetti e di formulari, ma potete anche dare un’occhiata alle stringhe di codice corrispondenti in JavaScript, HTML e CSS.

Quando a metà degli anni ’90 gli elementi dinamici hanno fatto ingresso nei progetti del World Wide Web, l’area di applicazione del codice sorgente si è spostata in maniera crescente in direzione del client, o meglio del browser. Inizialmente erano gli applet Java a essere il punto di riferimento; nel 1995, in alternativa a questi mini-programmi, Brendan Eich sviluppò il precursore JavaScript LiveScript per il browser Netscape 2.0. Le più grandi differenze tra i due linguaggi risiedevano nel fatto che JavaScript sostituiva le classi con i prototipi e che le stringhe programmate di codice non erano svincolate bensì direttamente implementate: caratteristiche che sono rimaste invariate fino ad oggi.

In un primo momento JavaScript, in quanto linguaggio di scripting per browser, fungeva innanzitutto da concorrente agli applet Java. Tuttavia il vero successo arrivò solamente con l’avvento del web 2.0, dello sviluppo ulteriore dei browser ad esso collegato e, infine, dell’interfaccia DOM a partire dal 2005. Tutt’ad un tratto era possibile caricare contenuti sul back end tramite JavaScript, per cui nacquero le prime interfacce dinamiche per browser senza plug-in, diversi framework e librerie JavaScript, che hanno portato alla costante necessità della comunicazione con il server: in questo modo nel corso degli scorsi decenni JavaScript si è evoluto fino ad affermarsi come il linguaggio di scripting più utilizzato dello sviluppo web. Allo stesso tempo il sito web medio è diventato sempre più una complessa applicazione web con un elevato fattore di interattività; un fatto che ha reso JavaScript e i framework nello stesso linguaggio, come appunto MooTools, ancora più fondamentali per la programmazione di nuovi progetti. Da alcuni anni il linguaggio di scripting funziona anche lato server.

I classici siti web statici oggigiorno non stanno vivendo un momento particolarmente felice: la presenza di elementi interattivi è ormai da tempo data per scontata, perciò diventa ancora più importante tentare di colpire l’utente usando concetti innovativi e user-friendly. Naturalmente anche il tempo di caricamento di una pagina web gioca un ruolo fondamentale, che spesso dipende dalla frequenza con la quale l’applicazione web deve attingere dal server per elaborare le richieste in entrata nel browser.

Un tipo di progetto web che entra in azione con più efficienza e che sembra essere fatto apposta per un framework JavaScript, come può essere MooTools, è la cosiddetta “Single-page application” (SPA), ovvero l’applicazione su singola pagina, altrimenti conosciuta come “sito web one page”. Si tratta di un sito web formato da un solo file HTML che rappresenta l’intero contenuto su una singola pagina. Invece di avere delle sottopagine, questi progetti sono strutturati a sezioni ed eventi che il visitatore può raggiungere o mettere in funzione scrollando oppure cliccando i pulsanti.

Particolarmente popolare è l’aspetto dello storytelling, in cui le informazioni vengono presentate con l’aiuto di elementi interattivi sotto forma di una breve storia. Per la rappresentazione dell’applicazione su singola pagina sono pochi i dati che necessitano di essere scambiati con il server web, assicurando così una performance generale elevata. Per via dell’ampio supporto di JavaScript le applicazioni MooTools sono utilizzabili da qualsiasi piattaforma e browser senza problemi.

Utilizzando JavaScript come linguaggio di programmazione, il framework MooTools si trova in buona compagnia: numerosi alternative di successo come ad esempio AngularJS o Ember.js dimostrano che la domanda di framework JavaScript è molto alta. Il linguaggio di scripting è uno standard web indiscusso che viene supportato da tutti i browser esistenti e che si adatta perfettamente alla realizzazione di componenti interattive per siti web. Di conseguenza il linguaggio appartiene alle delle nozioni fondamentali che ogni sviluppatore web deve possedere, nonostante conformemente agli standard gli manchi, ad esempio, un sistema di ereditarietà basato sulle classi. MooTools risolve questa problematica e semplifica così la programmazione di elementi ricorrenti.

A prima vista porre l‘attenzione su un codice sorgente eseguibile lato client sembra essere solo un vantaggio anche per il visitatore del progetto web: gli elementi JavaScript promettono un’elevata interattività dell’applicazione web e contemporaneamente una velocità di prestazione molto buona. Il fatto che il compito della stesura del codice nelle applicazioni MooTools rientri tra i doveri del client, nasconde anche problemi e rischi. In questo modo, infatti, viene richiesto un particolare contributo alle risorse, motivo per cui può facilmente capitare che con client e apparecchi poco performanti si generino delle mancanze nella prestazione o addirittura il crash del sito web. Specialmente i dispositivi mobili come gli smartphone, tramite i quali avviene la maggior parte della connessione al world wide web, risultano essere colpiti in questo senso. Inoltre con questi mezzi spesso si creano complicazioni relative a componenti specifici del dispositivo come possono essere il touchscreen o gli schermi proporzionalmente troppo piccoli, che in precedenza non sono stati testati abbastanza o non lo sono stati affatto.

Siccome applicare il codice porta con sé anche il rischio di un attacco esterno, che sia tracking, phishing, o altro ancora, l’utente finisce per essere particolarmente esposto in caso di progetti web contraddistinti da una molteplicità di programmazioni lato client. Per questo motivo una certa parte degli utenti del web si rivolge a cosiddetti script blocker come NoScript o JS Blcoker che bloccano script in JavaScript e altri se il sito web in questione non è stato inserito manualmente nella “whitelist”. Ciò significa che dovete fare attenzione alla sicurezza della vostra applicazione MooTools per riuscire a costruire la base di fiducia necessaria e anche per riuscire a raggiungere quegli utenti con la vostra offerta.

MooTools porta l’impostazione orientata agli oggetti di JavaScript a un livello più alto, estendendo il popolare linguaggio di scripting web con classi adattabili e riutilizzabili come ad esempio si è già visto in Java o nel PHP. Con l’utilizzo del framework aumentate enormemente l’efficienza della programmazione di applicazioni JavaScript. Qui sono ben chiari i punti di forza dello strumento a raccolta.

L’impostazione di intere applicazioni sulla base di MooTools è possibile, anche se non risulta propriamente adatta a ogni tipo di progetto. Nonostante gli effetti, le animazioni e i componenti AJAX stiano acquistando sempre più importanza nello sviluppo web moderno, dovreste sempre tenere in considerazione la user experience durante la realizzazione del vostro progetto. A questo scopo MooTools e JavaScript si rivelano generalmente ottime basi, anche se vanno utilizzati con la giusta moderazione, perché altrimenti possono far sì che la vostra applicazione web mandi presto in tilt i mezzi tecnici die client dell’utente utilizzati.