Librerie JavaScript: jQuery o MooTools?

Una guida alla scelta della migliore libreria JavaScript per il vostro sito.

Il primo problema da considerare per chi vuole sfruttare le potenzialità di JavaScript è la scelta del framework a cui appoggiarsi. Le soluzioni a disposizione sono tante: spesso può anche non servire sfruttare un’intera libreria, ma per progetti complessi a volte è la scelta più conveniente.

Tra le varie possibilità, jQuery e MooTools sono due tra i migliori framework da considerare. Per facilitarvi, consiglio la lettura di questa pagina, che vuole aiutare a trovare una risposta alla domanda: “quale scelgo?”.

Le caratteristiche dei due framework

jQuery – sito ufficiale

  • dimensione della libreria (solo Core): 55.9kb
  • centinaia di plugin disponibili su plugins.jquery.com, più innumerevoli altri disponibili in rete
  • community diffusa e molto frequentata
  • facilità di apprendimento

MooTools – sito ufficiale

  • dimensione della libreria (solo Core): 64.3kb
  • qualche decina di plugin ufficiali su mootools.net/more, più altri non ufficiali (meno rispetto a jQuery) disponibili in rete
  • miglior mantenibilità del codice
  • facilità di riutilizzo

Quale utilizzare?

La scelta può essere sintetizzata in una frase:

jQuery focuses on expressiveness, quick and easy coding, and the DOM while MooTools focuses on extension, inheritance, legibility, reuse, and maintainability.

E’ questa la giusta chiave di lettura per iniziare a lavorare con uno dei due framework. jQuery è probabilmente più facile da imparare ed è semplice da gestire, ma potrebbe presentare qualche problema di troppo per il riutilizzo del codice ed il suo mantenimento. MooTools ha meno difficoltà da questo punto di vista, ma è più complesso da imparare.

Alcuni esempi pratici

Per avere un’idea non solo teorica dei due framework, questi sono alcuni siti che utilizzano l’uno o l’altro. Sono presenti slider, carousel, accordion e menu con navigazione a tab: i risultati sono in ogni caso ottimi.

Web Designer Wall – jQuery

Web Designer Wall

Marius Roosendaal – Mootools

Marius Roosendaal

Viget Labs – jQuery

Viget Labs

Vimeo – Mootools

Vimeo

Komodo Media – jQuery

Komodo Media

Macheist – Mootools

Macheist

Per quanto mi riguarda su tomstardust.com utilizzo MooTools, ma per altri progetti ho sfruttato anche jQuery, soprattutto per i numerosi plugin a disposizione. Sono entrambe due ottime librerie: a questo punto la scelta dipende solo dalle vostre necessità.

Galleria di effetti Javascript

Una rassegna di Javascript: slider, popup e altre animazioni notevoli.

Javascript e AJAX hanno senza dubbio invaso la rete negli ultimi anni. Se in passato era molto più raro vedere degli effetti sulle pagine web, ormai i framework utilizzabili sono numerosi, ed ancora di più gli effetti disponibili.

Ecco una breve rassegna di soluzioni eleganti, che potrete prendere come fonte di ispirazione.

Coda

Coda - effetto javascript

Il sito di CODA, l’editor per Mac, sarà già noto a molti. Gli effetti Javascript di questa pagina sono due, un elegante popup ed uno slider orizzontale. L’accessibilità è tutelata in parte: le tab restano navigabili anche con Javascript disabilitato, ma non è stata rivolta grande attenzione a questa possibilità.

Mancub

Mancub - screenshot

Questo sito è stata una rivelazione. Semplice ma accattivante, ha un effetto decorativo sul menu di navigazione che invita a giocarci e a soffermarsi più di un momento. E’ presente anche un effetto popup sui siti del portfolio, ed in questo caso con Javascript disabilitato si nota la cura dei dettagli. Le informazioni contenute nel popup appariranno infatti sotto gli screenshot. Ottimo lavoro.

Stragulp

Stragulp - effetto Javascript

Una segnalazione tutta italiana per un effetto slider realizzato con Mootools. Le potenzialità di questo framework mi hanno sempre interessato, anche in questo esempio l’animazione presente è fluida e piacevole da vedere.

Marius Roosendaal

Marius Roosendaal - effetto javascript

Un altro sito più che noto, recentemente rinnovato con un terzo foglio di stile disponibile nello style switcher. Anche in questo caso la libreria utilizzata è Mootools, con il celebre accordion che consente di sfogliare il portfolio.

Conoscete altri effetti Javascript interessanti da segnalare? Fatelo nei commenti, potrebbero emergere altre risorse notevoli.

Aggiornamenti: Mootools, favicon e segnalazioni

Ho effettuato alcuni aggiornamenti minori al sito, per migliorare la velocità di caricamento ed il consumo di banda.

La novità più importante riguarda finalmente l’aggiornamento dello script per il pannello di controllo. Adesso utilizzo la libreria Mootools di Valerio Proietti, ed ho abbandonato Prototype. Se non l’avete ancora esaminata a fondo, vi consiglio di studiare le potenzialità di questo framework javascript.

Altro piccolo cambiamento riguarda la favicon del sito, modificata grazie al FavIcon Generator su Dynamic Drive. Basta uploadare un’immagine, anche con delle trasparenze, ed il vostro file .ico è pronto in un attimo.

Queste risorse sono fin da subito disponibili nella pagina utility, che ho appena aggiornato. Ho aggiunto anche un riferimento al plugin Democracy AJAX Poll per WordPress, che in questo momento utilizzo per il sondaggio nella homepage.

Infine per gli appassionati del manageriale Hattrick c’è anche un’utile estensione di Firefox chiamata Firehat, che permette di personalizzare i menu di navigazione secondo le proprie esigenze.

Se volete segnalarmi qualche altra risorsa interessante fatelo senza problemi, la aggiungerò nell’elenco.