MooTools, il framework Ja­va­Script compatto

Nel 2005 lo svi­lup­pa­to­re Valerio Proietti ha pub­bli­ca­to un add-on con il nome di Moo.fx per il framework Ja­va­Script Prototype, che allora era il leader di mercato. Siccome non era sod­di­sfat­to con le pos­si­bi­li­tà che offriva Prototype, si è presto deciso a svi­lup­pa­re 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 svi­lup­pa­to­ri 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 ap­par­tie­ne quindi, dopo i leader del settore jQuery e Bootstrap, ai tool Ja­va­Script più popolari al mondo.

Il framework MooTools è una raccolta compatta con una struttura a moduli di strumenti Ja­va­Script destinata agli svi­lup­pa­to­ri Ja­va­Script avanzati e pro­fes­sio­ni­sti. MooTools è composto da una vincente com­bi­na­zio­ne di eleganti in­ter­fac­ce di pro­gram­ma­zio­ne (API) ben do­cu­men­ta­te, abbinate a una forte capacità di orien­ta­men­to agli oggetti. Il framework si con­trad­di­stin­gue prin­ci­pal­men­te per le sue pos­si­bi­li­tà fles­si­bi­li di ap­pli­ca­zio­ne: esso, infatti, mette a di­spo­si­zio­ne diverse funzioni e classi in grado di sup­por­ta­re gli svi­lup­pa­to­ri nella pro­gram­ma­zio­ne e nella pia­ni­fi­ca­zio­ne del design di progetti web moderni e di sem­pli­fi­ca­re no­te­vol­men­te il processo la­vo­ra­ti­vo. Oltre a ciò, grazie alla struttura modulare, il framework si può fa­cil­men­te estendere ul­te­rior­men­te. E, per finire, l’utente può in­cor­po­ra­re mi­ra­ta­men­te quei com­po­nen­ti di cui necessita veramente. Ma il motivo per cui MooTools gode di un alto indice gra­di­men­to è dato dalla chiarezza e dalla com­pat­tez­za delle sue ap­pli­ca­zio­ni.

Di­ver­sa­men­te dai comuni Ja­va­Script, i quali so­li­ta­men­te si basano su prototipi, MooTools si struttura invece su un sistema di ere­di­ta­rie­tà basato su classi che funge da base per la pro­gram­ma­zio­ne orientata agli oggetti e quindi anche per tutti i com­po­nen­ti contenuti nel framework. Questo sistema non è solamente il semplice emblema di una elevata esten­di­bi­li­tà, bensì rap­pre­sen­ta anche la pos­si­bi­li­tà di scrivere un codice sorgente riu­ti­liz­za­bi­le e fles­si­bi­le. Grazie a classi pre­de­fi­ni­te e mo­di­fi­ca­bi­li potete rea­liz­za­re oggetti analoghi come plug-in, elementi HTML, request Ajax, e così via, ri­spar­mian­do molto tempo. Nel seguente elenco vengono raccolti alcuni dei com­po­nen­ti con i quali è possibile estendere MooTools Ja­va­script:

• Core: MooTools Core co­sti­tui­sce il nocciolo del framework Ja­va­Script sul quale si strut­tu­ra­no tutti i com­po­nen­ti. Accanto all’im­ple­men­ta­zio­ne dei concetti di classe, Core contiene anche funzioni generali di as­si­sten­za.

• More: MooTools More è la raccolta di plug-in ufficiale del framework. More contiene diverse esten­sio­ni che sem­pli­fi­ca­no il processo di sviluppo e che ag­giun­go­no ulteriori feature.

• Class: Si tratta di una classe base che vi servirà per istan­zia­re, ovvero rea­liz­za­re, oggetti delle classi riu­ti­liz­za­bi­li e per mo­di­fi­ca­re classi già esistenti.

• Element: uno dei com­po­nen­ti più im­por­tan­ti con il cui aiuto potete attingere, in modalità com­pa­ti­bi­le alla mul­ti­piat­ta­for­ma, a elementi oggetti HTML oppure di­ret­ta­men­te rea­liz­zar­li. Contiene anche le funzioni dollaro $ e $$.

• Fx: il modulo degli effetti che serve come base per l’ani­ma­zio­ne di elementi e quindi per la rea­liz­za­zio­ne degli effetti di scrolling, sliding e altro ancora.

• JSON: il modulo per la codifica e la de­co­di­fi­ca di catene di simboli in formato JSON (JavaScript Object Notation).

Na­tu­ral­men­te alcuni moduli si svi­lup­pa­no uno sull’altro e quindi il modulo Fx.CSS pre­sup­po­ne, ad esempio, che abbiate in­stal­la­to anche il già men­zio­na­to modulo Fx. In generale, però, potete scegliere molto mi­ra­ta­men­te dai download i com­po­nen­ti di cui avete bisogno per poi sca­ri­car­li 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. È ugual­men­te possibile scaricare il pacchetto base completo o tutte le esten­sio­ni di­spo­ni­bi­li.

Un piccolo assaggio del modus operandi dei singoli com­po­nen­ti è dato dagli esempi in demo di MooTools ef­fet­tua­ti dal team di svi­lup­pa­to­ri sul sito web aryweb.nl. Qui non solo trovate rap­pre­sen­ta­zio­ni visive di funzioni drag&drop, di effetti e di formulari, ma potete anche dare un’occhiata alle stringhe di codice cor­ri­spon­den­ti in Ja­va­Script, HTML e CSS.

Quando a metà degli anni ’90 gli elementi dinamici hanno fatto ingresso nei progetti del World Wide Web, l’area di ap­pli­ca­zio­ne del codice sorgente si è spostata in maniera crescente in direzione del client, o meglio del browser. Ini­zial­men­te erano gli applet Java a essere il punto di ri­fe­ri­men­to; nel 1995, in al­ter­na­ti­va a questi mini-programmi, Brendan Eich sviluppò il pre­cur­so­re Ja­va­Script Li­ve­Script per il browser Netscape 2.0. Le più grandi dif­fe­ren­ze tra i due linguaggi ri­sie­de­va­no nel fatto che Ja­va­Script so­sti­tui­va le classi con i prototipi e che le stringhe pro­gram­ma­te di codice non erano svin­co­la­te bensì di­ret­ta­men­te im­ple­men­ta­te: ca­rat­te­ri­sti­che che sono rimaste invariate fino ad oggi.

In un primo momento Ja­va­Script, in quanto lin­guag­gio di scripting per browser, fungeva in­nan­zi­tut­to da con­cor­ren­te 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’in­ter­fac­cia DOM a partire dal 2005. Tutt’ad un tratto era possibile caricare contenuti sul back end tramite Ja­va­Script, per cui nacquero le prime in­ter­fac­ce dinamiche per browser senza plug-in, diversi framework e librerie Ja­va­Script, che hanno portato alla costante necessità della co­mu­ni­ca­zio­ne con il server: in questo modo nel corso degli scorsi decenni Ja­va­Script si è evoluto fino ad af­fer­mar­si come il lin­guag­gio di scripting più uti­liz­za­to dello sviluppo web. Allo stesso tempo il sito web medio è diventato sempre più una complessa ap­pli­ca­zio­ne web con un elevato fattore di in­te­rat­ti­vi­tà; un fatto che ha reso Ja­va­Script e i framework nello stesso lin­guag­gio, come appunto MooTools, ancora più fon­da­men­ta­li per la pro­gram­ma­zio­ne di nuovi progetti. Da alcuni anni il lin­guag­gio di scripting funziona anche lato server.

I classici siti web statici og­gi­gior­no non stanno vivendo un momento par­ti­co­lar­men­te felice: la presenza di elementi in­te­rat­ti­vi è ormai da tempo data per scontata, perciò diventa ancora più im­por­tan­te tentare di colpire l’utente usando concetti in­no­va­ti­vi e user-friendly. Na­tu­ral­men­te anche il tempo di ca­ri­ca­men­to di una pagina web gioca un ruolo fon­da­men­ta­le, che spesso dipende dalla frequenza con la quale l’ap­pli­ca­zio­ne web deve attingere dal server per elaborare le richieste in entrata nel browser.

Un tipo di progetto web che entra in azione con più ef­fi­cien­za e che sembra essere fatto apposta per un framework Ja­va­Script, come può essere MooTools, è la co­sid­det­ta “Single-page ap­pli­ca­tion” (SPA), ovvero l’ap­pli­ca­zio­ne su singola pagina, al­tri­men­ti co­no­sciu­ta come “sito web one page”. Si tratta di un sito web formato da un solo file HTML che rap­pre­sen­ta l’intero contenuto su una singola pagina. Invece di avere delle sot­to­pa­gi­ne, questi progetti sono strut­tu­ra­ti a sezioni ed eventi che il vi­si­ta­to­re può rag­giun­ge­re o mettere in funzione scrol­lan­do oppure cliccando i pulsanti.

Par­ti­co­lar­men­te popolare è l’aspetto dello sto­ry­tel­ling, in cui le in­for­ma­zio­ni vengono pre­sen­ta­te con l’aiuto di elementi in­te­rat­ti­vi sotto forma di una breve storia. Per la rap­pre­sen­ta­zio­ne dell’ap­pli­ca­zio­ne su singola pagina sono pochi i dati che ne­ces­si­ta­no di essere scambiati con il server web, as­si­cu­ran­do così una per­for­man­ce generale elevata. Per via dell’ampio supporto di Ja­va­Script le ap­pli­ca­zio­ni MooTools sono uti­liz­za­bi­li da qualsiasi piat­ta­for­ma e browser senza problemi.

Uti­liz­zan­do Ja­va­Script come lin­guag­gio di pro­gram­ma­zio­ne, il framework MooTools si trova in buona compagnia: numerosi al­ter­na­ti­ve di successo come ad esempio AngularJS o Ember.js di­mo­stra­no che la domanda di framework Ja­va­Script è molto alta. Il lin­guag­gio di scripting è uno standard web in­di­scus­so che viene sup­por­ta­to da tutti i browser esistenti e che si adatta per­fet­ta­men­te alla rea­liz­za­zio­ne di com­po­nen­ti in­te­rat­ti­ve per siti web. Di con­se­guen­za il lin­guag­gio ap­par­tie­ne alle delle nozioni fon­da­men­ta­li che ogni svi­lup­pa­to­re web deve possedere, no­no­stan­te con­for­me­men­te agli standard gli manchi, ad esempio, un sistema di ere­di­ta­rie­tà basato sulle classi. MooTools risolve questa pro­ble­ma­ti­ca e sem­pli­fi­ca così la pro­gram­ma­zio­ne di elementi ri­cor­ren­ti.

A prima vista porre l‘at­ten­zio­ne su un codice sorgente ese­gui­bi­le lato client sembra essere solo un vantaggio anche per il vi­si­ta­to­re del progetto web: gli elementi Ja­va­Script pro­met­to­no un’elevata in­te­rat­ti­vi­tà dell’ap­pli­ca­zio­ne web e con­tem­po­ra­nea­men­te una velocità di pre­sta­zio­ne molto buona. Il fatto che il compito della stesura del codice nelle ap­pli­ca­zio­ni MooTools rientri tra i doveri del client, nasconde anche problemi e rischi. In questo modo, infatti, viene richiesto un par­ti­co­la­re con­tri­bu­to alle risorse, motivo per cui può fa­cil­men­te capitare che con client e ap­pa­rec­chi poco per­for­man­ti si generino delle mancanze nella pre­sta­zio­ne o ad­di­rit­tu­ra il crash del sito web. Spe­cial­men­te i di­spo­si­ti­vi mobili come gli smart­pho­ne, tramite i quali avviene la maggior parte della con­nes­sio­ne al world wide web, risultano essere colpiti in questo senso. Inoltre con questi mezzi spesso si creano com­pli­ca­zio­ni relative a com­po­nen­ti specifici del di­spo­si­ti­vo come possono essere il tou­ch­screen o gli schermi pro­por­zio­nal­men­te troppo piccoli, che in pre­ce­den­za non sono stati testati ab­ba­stan­za 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 par­ti­co­lar­men­te esposto in caso di progetti web con­trad­di­stin­ti da una mol­te­pli­ci­tà di pro­gram­ma­zio­ni lato client. Per questo motivo una certa parte degli utenti del web si rivolge a co­sid­det­ti script blocker come NoScript o JS Blcoker che bloccano script in Ja­va­Script e altri se il sito web in questione non è stato inserito ma­nual­men­te nella “whitelist”. Ciò significa che dovete fare at­ten­zio­ne alla sicurezza della vostra ap­pli­ca­zio­ne MooTools per riuscire a costruire la base di fiducia ne­ces­sa­ria e anche per riuscire a rag­giun­ge­re quegli utenti con la vostra offerta.

MooTools porta l’im­po­sta­zio­ne orientata agli oggetti di Ja­va­Script a un livello più alto, esten­den­do il popolare lin­guag­gio di scripting web con classi adat­ta­bi­li e riu­ti­liz­za­bi­li come ad esempio si è già visto in Java o nel PHP. Con l’utilizzo del framework aumentate enor­me­men­te l’ef­fi­cien­za della pro­gram­ma­zio­ne di ap­pli­ca­zio­ni Ja­va­Script. Qui sono ben chiari i punti di forza dello strumento a raccolta.

L’im­po­sta­zio­ne di intere ap­pli­ca­zio­ni sulla base di MooTools è possibile, anche se non risulta pro­pria­men­te adatta a ogni tipo di progetto. No­no­stan­te gli effetti, le ani­ma­zio­ni e i com­po­nen­ti AJAX stiano ac­qui­stan­do sempre più im­por­tan­za nello sviluppo web moderno, dovreste sempre tenere in con­si­de­ra­zio­ne la user ex­pe­rien­ce durante la rea­liz­za­zio­ne del vostro progetto. A questo scopo MooTools e Ja­va­Script si rivelano ge­ne­ral­men­te ottime basi, anche se vanno uti­liz­za­ti con la giusta mo­de­ra­zio­ne, perché al­tri­men­ti possono far sì che la vostra ap­pli­ca­zio­ne web mandi presto in tilt i mezzi tecnici die client dell’utente uti­liz­za­ti.