Come scrivere bene codice Javascript e Php

I siti attuali sono molto dinamici e complessi e spesso, anche se vengono sviluppati con le comuni piattaforme, come WordPress e Joomla, per esempio, occorre aggiungere codice Javascript e/o Php al fine di rendere disponibili ulteriori funzioni, non previste da plugin ed estensioni, se non a pagamento oppure gratuitamente ma seguendo complicate procedure.

Uno sviluppatore web, pertanto, si trova a dover scrivere del codice, modificando i file di un tema, piuttosto che tramite la creazione di un plugin o di un’estensione, per soddisfare in pieno le richieste del cliente.

Quanto ho scritto in questo articolo non è la legge fondamentale della programmazione, è solo il sunto della mia esperienza che spero possa essere utile a qualcuno, almeno in parte.

Due regole fondamentali: leggibilità e performance

I nostri blocchi di codice, che si trovino in uno script già esistente o in uno creato da zero, saranno presumibilmente composti da molte istruzioni che obbligheranno la macchina a compiere diverse operazioni ed elaborazioni di dati.

Inoltre, il nostro script, dovrà essere sempre modificato e aggiornato per aggiungere, togliere o modificare funzioni già presenti. È impensabile che, una volta conclusa la scrittura di uno script, quest’ultimo non dovrà mai essere modificato e lasciato li così. Un sito è fatto per essere aggiornato nei contenuti ma anche nel funzionamento.

Detto questo si può intuire l’importanza di due criteri da tenere sempre presente quando si scrive del codice: leggibilità e performance.

La leggibilità si ha quando a colpo d’occhio si notano quali sono le istruzioni globali e quelle contenute in un blocco da eseguire (esempio funzione, ciclo o struttura di controllo), si distinguono le variabili globali e quelle di scopo, si comprende a cosa si riferiscono determinate variabili, funzioni, ecc…
In buona sostanza il mio script è leggibile quando guardando il codice mi faccio un’idea pressoché immediata di cosa debba essere elaborato.

La performance, invece, consiste nel compiere le operazioni previste nel minor numero di istruzioni possibili e tramite la procedura più semplice.

In questo articolo vedremo una serie di esempi per capire meglio questo concetto, basati sullo sviluppo di pagine in Javascript e Php.

Regole generali

Leggibilità

Indentare bene il codice

Nella lettura di un codice devono essere di immediata comprensione i livelli delle istruzioni scritte, ossia le variabili e le funzioni globali staranno allineate completamente a sinistra, quelle invece contenute in blocchi di codice saranno distanziati da un numero di tabulazioni tanto quanto sono i livelli di annidamento.

var x=5;
var y=7;
var nomeUtente="Andrea";
function setY(){
   y=x;
   if(y<0){
       y=0;
   }
}

Qui abbiamo due variabili globali, x e y, e una funzione globale che setta il valore di y a quello di x, settandolo a 0 nel caso in cui y abbia un valore numerico negativo.

Le variabili e la funzione sono tutte allineate a sinistra; nella funzione abbiamo il settaggio di y e la struttura di controllo spostate di una tabulazione in quanto annidate di un livello, il settaggio di y a 0 è invece preceduto da due tabulazioni, poiché sta dentro la struttura di controllo, la quale, a sua volta, sta nella funzione setY().

Seguire un ordine nella dichiarazione di variabili e funzioni

Uno dei problemi quando si legge uno script sta nel rintracciare le variabili e le funzioni richiamate a più riprese. Per aiutarci nella ricerca è buona cosa dichiarare anzitutto le variabili globali e, in seconda battuta, tutte le funzioni. Variabili e funzioni saranno dichiarate in ordine di utilizzo.

Nomi intuitivi

Quando leggo una variabile o una funzione devo capire, senza eccessivi sforzi, a cosa sono riferiti. Vediamo questo blocco di codice:

<?php
 function setLowerCaseUsername(){
    global $username;
    $username=strtolower($username);
 }

if(isset($_POST['username'])){
    $username=$_POST['username'];
    setLowerCaseUsername();
}
?>

Già da un primo sguardo capisco che si sta elaborando un nome utente proveniente da un form. Sia la funzione, che modifica quel valore in lettere minuscole, sia la struttura di controllo, deputata al settaggio della variabile globale col dato ricevuto dal server, fanno riferimento allo username, cioè il nome utente.

Si noti, inoltre, che la funzione è denominata con un verbo, poiché compie un’azione, mentre la variabile è qualificata con un semplice sostantivo.

Anche se non è strettamente necessario può non essere male l’uso di termini in lingua inglese.

Delimitare sempre i blocchi di codice da eseguire in toto

Quando utilizziamo il controllo if spesso, quando va eseguita un’istruzione soltanto, si tende a non delimitarla dalle partentesi graffe. Tecnicamente non è sbagliato ma le parentesi ci aiutano a comprendere meglio che quell’istruzione è vincolata al controllo.

Inserire i commenti

Una buona norma è quella di commentare le singole parti di codice aventi un particolare scopo.
Inseriamo dei commenti al codice dell’esempio precedente.

<?php

//funzione per trasformare in lettere minuscole il valore di $username
function setLowerCaseUsername(){
    global $username;
    $username=strtolower($username);
}
//se viene inviato un nome utente lo memorizzo in $username e lo trasformo nella versione in lettere minuscole, tramite la funzione dichiarata prima
if(isset($_POST['username'])){
    $username=$_POST['username'];
    setLowerCaseUsername();
}
?>

Con i commenti abbiamo reso più chiaro chi fa cosa.

Ogni script ha il suo scopo

Sicuramente nei nostri siti web sono diverse le funzionalità da implementare. Per ognuna di queste è bene scrivere uno script apposito, oltre ad uno con le funzioni e le variabili globali, utilizzate da tutti o da più di uno script.

Performance

Minimo sforzo, massimo redimento

La legge basilare dell’economia è molto valida anche nella programmazione. È importante arrivare al risultato prendendo la via più semplice; tradotto bisogna compiere il minor numero di operazioni e di calcoli possibile.

Vediamo ora due esempi

<ul id="mialista">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ul>

<script type="text/javascript">
    jQuery('li').css('text-decoration','underline');
</script>

Qui abbiamo una lista, etichettata con un id, contenente degli elementi che io voglio sottolineare. Supponiamo che questa sia l’unica lista presente nella pagina web, insieme a tanti altri nodi.
Il browser, con questa istruzione, cercherà tutti gli elementi di lista, scorrendo per tutto il documento. Tecnicamente funziona, ma porta via più risorse. La via più semplice per la macchina, in questo caso, dato che voglio applicare questa regola css agli elementi di #mialista, è la seguente:

jQuery('#mialista li').css('text-decoration','underline');

In questo modo scorrerà solamente gli elementi di #mialista.

Vediamo ora un esempio di uno script Php.

<?php
//funzione utile a controllare la lunghezza della password inserita, che deve and are da min=8 e max=16 caratteri
function checkPassword($password){
    return (strlen($password) > 7 && strlen($password) < 16);
}
?>

Cosa fa questa funzione è già scritto nei commenti; adesso osserviamo l’espressione booleana, il cui risultato è da restituire.
Utilizziamo strlen($password) per sapere se il numero dei caratteri della stringa va da 8 a 15. Il sistema, in questo caso, calcolerà un valore due volte con lo stesso risultato. La funzione è più efficiente se ricavo il dato che mi interessa una sola volta, memorizzandolo in una variabile di scopo, che verrà distrutta da Apache, una volta restituito il valore.

function checkPassword($password){
    $len=strlen($password);
    return ($len > 7 && $len < 16);
}

Attenzione alla codifica dei caratteri dello script

Finché i nostri script non contengono caratteri speciali il problema non esiste. Ma se, per esempio, devo stampare a video stringhe composte anche da caratteri accentati allora devo prestare attenzione a questo aspetto. Quella consigliata è la UTF-8 poiché permette di rappresentare pressoché tutti i caratteri necessari, comprese le lettere accentate.

Sempre su questo tema occorre non trascurare il Byte Order Mark (BOM): una piccola sequenza di byte che viene posizionata all’inizio di un file di testo per indicarne il tipo di codifica Unicode.
Può creare seri problemi quando è presente su un file da includere in uno script Php con include o require:
al momento dell’importazione del codice questi bit verrebbero inclusi insieme e il browser li interpreta come elemento della pagina. Nella migliore delle ipotesi in visualizzazione noteremmo dei margini o degli spazi che non dovrebbero esserci. Se lo script venisse incluso nella head, invece, il browser vedrebbe un elemento che tradizionalmente sta nel body, quindi tutti gli elementi successivi potrebbero finire lì, compresi css o script collegati o altri metadati.
Per escludere il BOM è possibile utilizzare notepad++ (non gira su Mac) oppure Textmate.

Javascript

Performance

Inserire o collegare gli script con tutte le informazioni

Quando si collegano o si implementano script inline è sempre buona norma specificare il tipo di script, mettendo ‛type=“text/javascript”’ oppure ‛type=“language/javascript”’. Se il codice è su un file da collegare va specificato anche il suo charset, con questa dicitura ‛cahrset=“utf-8”’.

Mettere gli script in fondo alla pagina

Il codice Javascript viene elaborato nel punto in cui si trova. Se faccio eseguire al browser troppe istruzioni nella head rallento il caricamento della pagina. Laddove è possibile è meglio collegare o inserire codice Javascript nel body, dopo l’ultimo elemento da stampare a video, così che la pagina sia consultabile mentre vengono eseguite le istruzioni.

Assicurarsi la crosscompatibilità dei nostri script

Esattamente come il codice Css anche Javascript è soggetto all’interpretazione da parte del browser (ad eccezione di node.js). E la resa di tutto ciò che va eseguito dai vari Firefox, Chrome, Safari, Explorer, Edge, ecc. non è detto sia ottimale ovunque. Pertanto è bene testare la nostra pagina web almeno sui browser principali, dei computer e dei dispositivi mobile.

Fare le versioni .min è consigliabile

Quando gli script sono particolarmente lunghi, per rendere meno pesanti i file, su cui si trovano, può tornare utile caricarne una copia in versione .min.js. In questa versione tutto il codice viene compresso su una riga sola, togliendo caratteri di a capo e righe vuote, col risultato che il file peserà meno, quindi sarà più agevole il caricamento.
Quindi un codice scritto così

var username='Giacomo';

function writeName(){
    getElementById('p-username').innerHTML=username;
}

diventa così

var username='Giacomo'; function writeName(){ getElementById('p-username').innerHTML=username; }

Va da se che in questo caso devo tenere sempre una versione di sviluppo divisa in righe, indentate come abbiamo già detto.

Php

Leggibilità

Non richiamare le variabili dentro le stringhe

Php da la possibilità di richiamare le variabili all’interno delle stringhe in questo modo:

<?php
    $username=$_POST['username'];
    echo "Ciao $username!";
?>

In fase di scrittura può risultare comodo, ma non altrettanto in quella di lettura e, magari, di debug.
Concatenare i valori memorizzati, in mezzo a distinte porzioni di stringa, renderà l’istruzione più leggibile con le variabili ben separate.

<?php
    $username=$_POST['username'];
    echo "Ciao ".$username."!";
?>

Conclusione

Le regole qui scritte sembrano tante, ma l’esperienza mi insegna che dandosi un metodo di lavoro definito, curarsi della leggibilità e della performance delle applicazioni web, porta ad ottenere migliori risultati con minimi sforzi, sia nostri che della macchina.