Oggi in una pausa di lavoro mi sono divertito a spulciare nel codice CSS e JavaScript di alcuni giornali online, sia italiani che stranieri. Non sono stato così prevedibile da validare il codice (X)HTML e CSS delle pagine, in quanto chi è senza errori di validazione scagli la prima pietra. Invece ho trovato molto più utile osservare la struttura del codice e la sua organizzazione, poichè si tratta di esempi vivi e funzionanti di grandi siti ad elevato traffico giornaliero. La domanda quindi è: come è stato organizzato e distribuito il codice? Ecco cosa ho notato.
Occorre innanzitutto fare una precisazione: un giornale online è diverso da un applicativo web, in quanto i suoi contenuti richiedono una minore interazione con l'utente. L'utente può commentare un articolo, usare i bottoni social o guardare una galleria di immagini, ma la sua interazione col sito non va oltre.
Detto questo, vediamo le caratteristiche salienti divise per categorie.
CSS
Nei CSS c'è un'ovvia sovrabbondanza di classi, scarso uso della cascata e della specificità e più in generale una tendenza a rimanere fedeli allo standard CSS 2. Non ho notato un uso veramente incisivo dei CSS3, probabilmente dovuto al fatto che il target di pubblico è così vasto e talmente Explorer-dipendente che soltanto azzardare l'ipotesi di usare i CSS3 è considerata ancora come un sacrilegio.
I CSS sono compressi, ma non minimizzati (tranne in alcuni casi). I siti stranieri possono contare su un sistema molto efficiente di CDN che permette loro di distribuire il carico delle pagine in modo equilibrato.
I metadati all'interno dei file si limitano a commenti che suddividono i vari blocchi di codice. Non ho notato l'uso dei flag nei commenti CSS, cosa che sarebbe auspicabile per velocizzare le modifiche di file in alcuni casi davvero lunghi.
JavaScript
Un profluvio di widget, gadget e plugin di ogni tipo caratterizza quasi l'80% del codice JavaScript di questi siti. Tale codice è inserito su tutto il documento, con una prevalenza dell'elemento head che purtroppo conferma il fatto che i consigli di Steve Souders e del team di Yahoo! circa gli script in fondo alla pagina sono ancora lontani dall'essere recepiti (ma qui forse il CMS in uso può aver giocato un suo ruolo).
I file principali in genere si limitano a lanciare delle funzioni in sequenza. Non mi sembra di aver visto qualcosa che si possa veramente definire come un namespace di applicazione del tipo var NomeGiornale = {};, ma qui credo che le deadline pressanti e gli obblighi col cliente abbiano convinto i team di sviluppo ad abbandonare certe sottigliezze metafisiche e ad usare qualcosa di più pratico e veloce.
Conclusione
Il lavoro reale è diverso da quello ideale o sognato leggendo le guide e i libri dei grandi maestri del client-side: alle idee vanno sostituiti i fatti, al codice immaginato il codice scritto, ad un'architettura perfetta e rinascimentale del sito una struttura solida e funzionante. Perchè il codice che finisce online sarà sempre diverso da quello che volevamo noi. Sad but true.