Questa è la traduzione dell'articolo Progressive Enhancement with JavaScript di Aaron Gustafson pubblicato originariamente su A List Apart il 4 Novembre 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Se avete letto il primo e il secondo articolo di questa serie, dovreste essere già a buon punto nella comprensione del meccanismo del progressive enhancement. In questo articolo discuteremo su come applicare la filosofia del progressive enhancement agli script lato client. Come vedrete presto, si tratta di una strategia che si basa si due concetti fondamentali: avere dei limiti e pianificare.
Usate con cautela la potenza che è nelle vostre mani
Avete probabilmente sentito al frase "il potere corrompe". Ci sarebbe tanto da aggiungere, ma per lo scopo di questo articolo rimaniamo a queste due parole. Javascript è uno strumento incredibilmente potente e per molto tempo ha esercitato sul web una sorta di forza corruttrice. Ha innescato il sorgere di blocchi, messaggi di errore e infinite finestre popup sbattute in faccia all'utente. Inoltre, è stato un linguaggio non del tutto compreso, il che ha contribuito all'abuso che se ne è fatto.
Non solo Javascript stava producendo più danni che benefici, ma è diventato pure ingestibile. Sotto la superficie era una specie di tana di topi piena di codice che causava presto la fuga tra le urla di chi vi si avvicinava; il mantenimento era un incubo per via della proliferazione di fork del codice involute e spesso criptiche.
A quel tempo, Javascript era davvero orribile ma necessario: i browser dovevano ancora implementare un supporto decente per gli standard e gli sviluppatori erano impegnati a mettere insieme codice confuso sulle pagine web. Javascript doveva compiere ancora molti salti per implementare cose semplicissime a livello di compatibilità cross-browser, anche per un semplice rollover di immagini.
Per fortuna, ora viviamo in un mondo migliore e possiamo finalmente rendere Javascript più pulito. Eppure, dobbiamo ancora guardare con rispetto alla sua potenza. Dobbiamo preoccuparci del come Javascript possa essere usato così come del cosa può fare, forse di più. Dobbiamo porci dei limiti. Il progressive enhancement ci aiuta a fare tutto ciò perché ci costringe a concentrarci sui contenuti e a sviluppare a partire da essi.
Stabilire una linea di base
Con il progressive enhancement sviluppiamo siti basati su codice usabile. Il concetto chiave di Javascript da tenere in mente è che tutti i contenuti di cui l'utente ha bisogno per capire una pagina dovrebbero essere fruibili anche in assenza di Javascript. Punto.
Un esempio. Forse il contenuto in questione è una tabella di raffronto tra prodotti. Se tra i requisiti del sito c'è che i dati devono essere ordinabili per colonna, potreste considerare l'idea di caricare la tabella nella pagina con Ajax in modo tale che possa essere riordinata lato server in uno specifico momento. Sembra tutto perfetto, vero?
Invece è sbagliato.
Cosa succede se un potenziale cliente visita la pagina senza il supporto di Javascript? Se il contenuto è caricato nella pagina usando Javascript, il potenziale cliente non avrà accesso ad esso, anche senza che i dati siano ordinati. Come pensate che possa acquistare un prodotto se non può nemmeno vederlo?
Lo scenario appena visto non prende nemmeno in considerazione la ricerca. Gli spider dei motori di ricerca non eseguono Javascript, così se usate Javascript per caricare il contenuto nella pagina, esso non sarà mai letto o indicizzato. Quanti potenziali clienti perderete se le informazioni sui prodotti non possono essere trovate e indicizzate da Google, Yahoo e Microsoft?
Utilizzando il progressive enhancement, includereste una tabella di base nel markup. Nella maggior parte dei casi sarà generata dall'infrastruttura di back end del sito, ma sarà incorporata direttamente nella pagina piuttosto che essere caricata attraverso Ajax. Potreste ancora scrivere uno script per identificare la tabella nel DOM e renderla interattiva, generando link per l'ordinamento e usando eventi onclick verso le chiamate Ajax per riordinare la tabella come desiderato.
Usando questo approccio forse non rispetterete in pieno i requisiti del sito, ma avrete anche fornito un'esperienza di fruizione "minima" per gli spider dei motori e per gli tenti che navigano senza Javascript.
Facendo un passo avanti, potreste anche aggiungere i link per l'ordinamento nell'intestazione della tabella manualmente e far sì che essi aggiornino la pagina, passando variabili che vadano a riordinare la tabella. Ciò consentirebbe agli utenti senza Javascript di riordinare anch'essi la tabella, dando loro un'esperienza magari meno veloce, ma comunque funzionale.
Un po' di ritocchi allo script vi consentirebbero di fare una sorta di hijack su quei link per eseguire le richieste Ajax, fornendo la migliore esperienza ai browser più capaci. Alla fine, avete un esempio perfetto di progressive enhancement in azione.
Ora che avete capito i meccanismi fondamentali del progressive enhancement con Javascript, possiamo discutere un po' di tecniche da cui iniziare.
Tenere sotto controllo gli script
Una delle chiavi per integrare efficacemente il progressive enhancement consiste nel pianificare la gestione degli script. Per fare ciò, dovete prima capire bene il concetto di Javascript non intrusivo. Il Javascript non intrusivo è la base per il progressive enhancement nel mondo dello scripting lato client.
Il mezzo più ovvio per "essere non intrusivi" è di eliminare tutti i gestori di eventi definiti inline, nel corpo del markup, dal momento che essi possono essere facilmente registrati attraverso il DOM:
<a href="http://msdn.com"onclick="return newWin(this.href);">
Il passo successivo è quello di spostare tutti gli script in un documento esterno piuttosto che incorporarli all'interno di elementi script:
<script type="text/javascript"> // my script </script><script type="text/javascript" src="myscript.js"></script>
Ciò faciliterà la manutenzione del codice e vi farà risparmiare tempi o prezioso.
Il passo successivo è quello di rendere gli script non intrusivi decidendo quando e come includerli. Nel senso più semplicistico, ciò significa verificare di poter eseguire lo script sul browser dell'utente testando il supporto per un metodo prima di richiamarlo:
if( document.getElementById ){
scriptUsingGetElementById();
}
Vorrete magari anche effettuare dei test per i vari oggetti di cui avrete bisogno, e potreste anche fare un test per verificare l'esistenza di elementi identificati di cui avete bisogno come agganci per gli script. Seguendo questo procedimento con tutti gli script creerete un'esperienza di interazione ottimale in cui solo gli script che un utente può gestire nel suo browser possono essere eseguiti.
Per saperne di più sul Javascript non intrusivo potete dare un'occhiata all'articolo di Jeremy Keith sull'argomento.
Mantenete la separazione degli stili
Javascript non vive in uno spazio isolato. Così, oltre a tenere separato Javascript dal markup, dovrete anche separarlo dagli stili.
Prima di tutto, dovete smettere di aggiungere stili inline quando create o manipolate elementi DOM. Invece, applicate nomi di classe che sono collegati sia al foglio di stile globale sia al foglio di stile specifico per gli script:
var el = document.getElementById( 'message' );el.style.color = '#f00'; el.style.backgroundColor = '#ffcfcf';el.className = 'highlighted';
Un foglio di stile specifico per gli script è una grande opzione se gli script richiedono molti stili per abilitare l'interazione. Definendolo in un file specifico consente di mantenerlo indipendentemente dagli altri stili adottati sul sito. Consente anche di collegare quel foglio di stile solo quando lo script viene eseguito, riducendo così i tempi di download sulle pagine che non usano lo script o sui browser che non lo supportano.
Se decidete di incorporare i vostri stili in uno dei vostri fogli principali, accertatevi di scriverli in modo tale che siano applicati solo quando lo script viene eseguito correttamente.
Per saperne di più sulla separazione tra script e stili leggete questo articolo uscito sul primo numero di Scroll Magazine.
Diventate 'progressivi'
Abbiamo visto l'approccio mentale necessario per implementare il progressive enhancement in Javascript e alcune tecniche attraverso cui farlo. Abbiamo anche toccato il concetto di Javascript non intrusivo e imparato qualcosa su come gestire la relazione tra CSS e Javascript.
L'articolo completa la nostra serie introduttiva sul progressive enhancement e sui modi in cui può essere messo in atto. Spero che vi abbia dato modo di riflettere e che vi abbia dato buoni spunti per iniziare a usare il progressive enhancement nel vostro lavoro quotidiano.
