Il 14 gennaio 2009 è stata rilasciata l'ultima versione dell'ormai celeberrimo framework JavaScript JQuery: la 1.3. Si tratta dell'aggiornamento più consistente da quando il framework è stato rilasciato e ha riguardato praticamente tutte le componenti interne. In questo articolo analizzeremo le novità e i miglioramenti introdotti.
I punti di forza
Nuovo selettore CSS: Sizzle
La novità principale di questo rilascio riguarda l'utilizzo all'interno di JQuery di un nuovo selettore CSS di nome Sizzle. Esso è stato sviluppato tenendo conto di quali sono le selezioni più frequenti che vengono effettuate; è stata infatti svolta una vera e propria analisi su alcuni siti web per capire le reali esigenze degli sviluppatori (l'esito di questa ricerca può essere analizzato su questa pagina del sito di John Resig, team leader di JQuery).
Grazie a questa analisi le performance del motore di selezione sono notevolmente migliorate rendendo di fatto ad oggi Sizzle il più veloce selettore CSS esistente.
Sizzle è stato sviluppato come progetto completamente autonomo da JQuery tant'è che esso può essere utilizzato anche senza il fratello maggiore. La homepage di questo sotto progetto è http://sizzlejs.com/. La motivazione principale di questa scelta è stata quella di garantire una maggior flessibilità ed estendibilità del motore e di permettere ad altri framework di appoggiarsi a Sizzle. Tra i principali prodotti che si sono interessati al nuovo selettore troviamo Prototype, Dojo, Yahoo UI, MochiKit e TinyMCE.
Live events
Con questa nuova versione di JQuery sono stati introdotti i cosiddetti Live Events. Grazie ad essi è possibile assegnare callback allo scatenarsi di determinati eventi anche ad elementi della pagina futuri che al momento del bind non sono ancora stati creati.
Immaginiamo di assegnare un evento click a tutti gli elementi p della pagina. Eventuali /p aggiunti in un tempo successivo a questo bind, grazie ai Live Events, presenteranno la stessa callback all'evento click degli elementi p creati in precedenza.
Per approfondire rimando alla documentazione dei metodi .live (http://docs.JQuery.com/Events/live) e die (http://docs.JQuery.com/Events/die).
Nuovo oggetto event
L'oggetto event viene passato in maniera automatica alle varie callback bindate agli elementi della pagina e incapsula alcune informazioni relative al comportamento dell'utente. Con questa nuova release di JQuery l'oggetto in questione rispecchia maggiormente le specifiche dettate dal W3C.
Per approfondire potete consultare questa pagina della documentazione.
Riscrittura motore HTML
Tutti i metodi che riguardano l'inserimento nel documento di nuovi frammenti HTML (append, prepend, before e after) sono stati riscritti da zero. Questo ha portato ad un miglioramento complessivo di ben sei volte rispetto alla versione precedente.
Riscrittura del metodo offset
Il metodo offset appartiene alla componente CSS di JQuery e permette di ottenere il posizionamento assoluto di un elemento della pagina ritornando un oggetto composto dalle proprietà top e left. In questa nuova release il metodo è stato riscritto completamente per garantire una maggior coerenza tra i diversi browser.
Feature detection e oggetto JQuery.support
L'ultima grande novità presente in questa release è una di quelle caratteristiche nascoste all'utilizzatore e riguarda la possibilità di JQuery di comportarsi in maniera coerente tra i diversi browser presenti oggi nel panorama web.
Fino all'ultima versione del framework le incongruenze venivano gestite tramite l'oggetto JQuery.browser che permetteva, tramite un'analisi dello userAgent inviato dal browser, di capire con quale browser veniva aperta la pagina e quindi comportarsi di conseguenza. Questa tecnica prende il nome di “browser sniffing” e prevede che qualsiasi versione del browser presenti gli stessi difetti delle altre.
Dalla versione 1.3 l'approccio è stato totalmente cambiato. Si è infatti deciso di utilizzare una tecnica chiamata “feature detection” con la quale si verifica effettivamente che esistano o meno dei bug agendo direttamente su di essi e non ipotizzandoli conoscendo a priori la versione del browser.
Tutti i controlli di questo tipo effettuati da JQuery sono incapsulati in questo nuovo oggetto, JQuery.support che non è nient'altro che una collezione di parametri che permettono di capire come si comporta il browser in determinati casi. Alcuni esempi di proprietà sono boxModel, riguardo all'uniformità o meno del browser rispetto agli standard W3C riguardo appunto il box model e opacity, riguardo al supporto della proprietà CSS opacity.
Per approfondire le proprietà dell'oggetto JQuery.support rimando alla documentazione ufficiale: http://docs.JQuery.com/Utilities/JQuery.support.
Chi volesse invece leggere riguardo alla tecnica del feature detection suggerisco questo articolo di Peter Michaux.
L'oggetto JQuery.browser viene comunque mantenuto all'interno del framework per i troppi richiami che esistono ancora ad esso nei numerosi plugin.
Le altre novità
JQuery core
Sono stati inseriti due nuovi metodi per gestire le code e per gestirle come workflow separati (metodo queue) e dequeu) e due nuove proprietà di introspezione su un oggetto JQuery: selector (per sapere quale selettore è stato utilizzato) e context (per conoscere il contesto sul quale è stato effettuato il filtro).
Per eventuali approfondimenti: http://docs.jquery.com/Core/queue, http://docs.jquery.com/Core/dequeue e http://docs.jquery.com/Core/selector, http://docs.jquery.com/Core/context.
Selettori CSS
Oltre al precedentemente citato nuovo motore Sizzle, la versione 1.3 di JQuery presenta un miglioramento riguardo al selettore not ora in grado di gestire anche selettori multipli e condizionali.
Per approfondire: http://docs.jquery.com/Selectors/not.
Attributi
Il metodo toggleClass ora presenta un nuovo parametro boolean per forzare il cambiamento di classe.
Eventi
Oltre alle modifiche analizzate precedentemente (live events e nuovo oggetto event) è stata introdotta una modifica nel comportamento della funzione trigger. Essa veniva invocata per forzare l'invocazione di un evento sugli elementi selezionati. Con la nuova versione, verranno scatenati anche gli eventi degli elementi gerarchicamente superiori.
Per approfondire: http://docs.jquery.com/Events/trigger.
L'intera gestione degli eventi è stata ulteriormente migliorata grazie anche alla rimozione dei listeners in fase di unload della pagina.
Effetti grafici
Oltre ad un notevole miglioramento delle funzioni show e hide (ben 2.5 volte più veloci rispetto alla precedente release) le animazioni sono state rese più fluide (agendo non solo su altezza/larghezza e opacità, ma anche su margini e padding) ed è stata introdotta una nuova proprietà (Jquery.fx.off) per interrompere tutte le animazioni in maniera atomica.
Anche in questo caso il rimando è alla documentazione.
Utilities
è stata introdotta la funzione Jquery.isArray per determinare se un particolare oggetto è o meno un array. Maggiori informazioni su questa pagina.
Altre novità
Il codice di JQuery è ora minimizzato con l'ormai difusissimo YUI Compressor.
La documentazione online delle API è stata totalmente riscritta utilizzando la nuova versione. Essa introduce alcune novità tra le quali la possibilità di salvare alcune pagine per una consultazione successiva più rapida, la colorazione dei codici di esempio e la possibilità di eseguire gli esempi in diretta. Inoltre è disponibile il download dell'applicazione per la piattaforma Air di Adobe. La guida è visionabile a questo indirizzo: http://api.jquery.com/.
Aggiorniamo le nostre applicazioni
La versione 1.3 di JQuery è gia disponibile per il download sia in versione minimizzata, sia debuggabile. Il framework è inoltre disponibile sui server di Google APIS a questo indirizzo:
http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js
La nuova release non è completamente retrocompatibile con le versioni precedenti. Questo può sembrare un fattore negativo ma invece rappresenta la volontà degli sviluppatori di effettivamente introdurre cambiamenti importanti e non solo un aggiornamento della versione 1.2 di JQuery. I principali cambiamenti che possono intervenire negativamente con script e plugin realizzati sulla versione precedente sono relativamente pochi e banali.
Innanzitutto il selettore degli attributi non utilizza più il carattere speciale @; $(“a[@href=pagina.html]”) deve essere sostituito con $(“a[href=pagina.html]).
La scatenazione di eventi ora viene propagata anche agli elementi della pagina gerarchicamente superiori al chiamante come è stato anticipato prima riguardo la funzione trigger.
La funzione ready non assicura che al momento della sua invocazione siano stati caricati tutti i fogli di stile.
In caso di selezioni multiple di elementi (tramite l'utilizzo della virgola) gli elementi vengono ritornati in ordine in base alla struttura del documento nei browser che supportano la funzione querySelectorAll (Safari, Firefox 3.1, IE 8) mentre nelle versioni precedenti l'ordine sarà dettato dal selettore. Questo verrà però risolto con la versione 1.3.1 di JQuery.
Il metodo privato jQuery.event.trigger non ritorna più un riferimento all'evento, ma un boolean come definito dall specifiche W3C.
Conclusioni
In questi tre anni di vita, JQuery ha saputo dimostrare un elevata maturità ed un'ottima capacità di adattarsi alle reali esigenze degli sviluppatori web. Grazie a questo è diventato senza ombra di dubbio il framework JavaScript più utilizzato nel web soprattutto grazie alla sua leggerezza, usabilità e estendibilità che ha favorito la nascita di numerosi plugin.
La versione 1.3, nonostante possa sembrare una minor release, presenta numerosi upgrade sia di facciata ma soprattutto internamente, in quelle componenti che permettono ad un framework di distinguersi dagli altri.
L'introduzione di Sizzle e della “feature detection” garantisce da un lato un incremento delle performance e dall'altro una sempre maggiore compatibilità cross-browser.
Il suggerimento è quello di aggiornare il prima possibile i vostri siti con questa nuova release facendo però attenzione alle poche differenze tra le due versioni e, come specificato anche sul sito ufficiale del progetto, di realizzare siti web sempre in standard mode abbandonando per sempre la quirks mode perchè potrebbe presentare alcuni problemi.
Buon JQuery!
