Unobtrusive JavaScript…& friends
Con il termine Unobtrusive JavaScript (JavaScript non intrusivo) si indica un paradigma di programmazione JavaScript che si basa su 3 principi fondamentali:
Senza la pretesa di voler dare una spiegazione esaustiva per ognuno dei precedenti principi, cerchiamo di capire in termini pratici cosa significa e, soprattutto, perchè scrivere JavaScript non intrusivo porta vantaggi concreti nello sviluppo e nella manutenzione di un’applicazione web.
I passi da seguire sono essenzialmente i seguenti:
- Scrivere pagine HTML funzionanti senza l’utilizzo di JavaScript
- Aggiungere funzioni JavaScript agli elementi del DOM senza modificare l’HTML
Facciamo un semplice esempio per evidenziare la differenza tra l’approccio “classico” e l’approccio non intrusivo. Supponiamo di avere un link di questo tipo:
<a href="#" onclick="alert('hallo!');">say hallo</a>
E’ evidente come un browser con JavaScript disabilitato non riceverebbe alcun saluto :) Aggiungiamo pertanto un link alla pagina hallo.html:
<a href="hallo.html" onclick="alert('hallo!'); return false;">say hallo</a>
In questo esempio, migliorato rispetto al precedente, i browser senza JavaScript seguirebbero il link alla pagina hallo.html mentre i browser con JavaScript vedrebbero aprirsi l’alert. Un ulteriore miglioramento all’esempio può essere apportato eliminando ogni riga di codice JavaScript dalla pagina spostandolo in un file esterno (hallo.js):
<script src="hallo.js" type="text/javascript"></script>
<a href="hallo.html" id="hallo_link">say hallo</a>
Il file hallo.js conterrà una funzione che, al caricamento della pagina, assegnerà all’evento click dell’elemento identificato da hallo_link la funzione per la generazione dell’alert. In altre parole: abbiamo modificato il nostro link mantenendo la stessa funzionalità ma in modo non intrusivo.
Vantaggi
Questo tipo di sviluppo necessita di una disciplina che può sembrare eccessivamente impegnativa rispetto ai vantaggi concreti che porta. Ammetto che in passato, come molti sviluppatori, ho deciso spesso di sacrificare l’accessibilità delle pagine in virtù della considerazione che oggi la stragrande maggioranza dei browser supporta JavaScript, per cui è accettabile rinunciare ad una completa compatibilità.
In qualità di sviluppatore Rails, inoltre, non ho mai pensato di rinunciare ai comodi helper offerti dal framework per il wrapping delle funzioni di prototype e scriptaculous.
Tutto questo finchè non ho adottato in maniera continuativa una metodologia di sviluppo “Behavior Driven” (BDD) con Cucumber e Webrat ed ho iniziato a considerare seriamente le linee guida dettate dal SEO.
Sia Webrat che i crawler dei motori di ricerca, infatti, possono essere considerati (se pur con delle eccezioni) come browser che non supportano JavaScript. La programmazione non intrusiva, quindi, mi permette di eseguire senza problemi i test di cucumber e di mantenere le pagine ottimizzate per l’indicizzazione. Come “effetto collaterale”, inoltre, le pagine così scritte sono accessibili e sicuramente più leggibili.
Questi vantaggi rappresentano per me una motivazione più che valida per abbandonare il codice intrusivo prodotto dagli helper di Rails in favore dell’alternativa non intrusiva rappresentata dall’ottimo jQuery.
jQuery on Rails
Per utilizzare jQuery con Rails esistono 2 alternative: la prima consiste nell’utlizzare jRails che essenzialmente riscrive (quasi) tutti gli helper di Rails per l’utilizzo con jQuery al posto di prototype e scriptaculous. Questa soluzione a mio avviso non è molto valida, poichè il codice prodotto sarà comunque intrusivo. Non resta quindi che scrivere JavaScript con jQuery senza l’utilizzo di alcun helper. Anche Ryan Bates incoraggia la seconda strada in uno dei suoi preziosi screencast: sarà necessario qualche sforzo in più ma alla fine il tempo impiegato sarà tutt’altro che sprecato.
