Tips and tricks per il mobile con AngularJS

A prescindere dal tipo di applicazione che stiamo sviluppando, Web o ibrida, e dai moduli che utilizziamo per l’interazione touch, è opportuno adottare alcuni accorgimenti nella scrittura del codice in modo da sfruttare al meglio le ridotte capacità di calcolo di un dispositivo mobile.

DOM piccolo e leggero

Un primo accorgimento da adottare è quello di mantenere piccole le dimensioni del DOM della nostra applicazione. Il modello di oggetti dell’interfaccia Web è avido di memoria ed aggiungere elementi quando non sono strettamente necessari può pregiudicare l’efficienza dell’applicazione.

Valutiamo quindi l’uso di ng-if e ng-switch al posto di ng-show quando è possibile.

Mentre ng-show si limita a mostrare o meno l’elemento del DOM che in ogni caso viene creato ed allocato in memoria, le direttive ng-if e ng-switch generano l’elemento soltanto se la condizione di riferimento è vera.

Ridurre le chiamate HTTP

Prestiamo inoltre una certa attenzione alle chiamate HTTP cercando di ridurle al minimo, evitando chiamate non necessarie o ridondanti.

In questa ottica sono da preferire gli inline template ai template in file separati, cioè utilizziamo per quanto è possibile la seguente sintassi per le nostre view:

<script type="text/ng-template" id="/doc.html"> 
  ... 
</script>

Limitare il two-way binding

Il two-way binding di AngularJS è una funzionalità utilissima, ma la sua gestione richiede un certo impegno da parte del processore nella valutazione dei watch associati a ciascuna variabile di scope.

Talvolta il binding bidirezionale non è necessario. Consideriamo ad esempio il caso in cui vogliamo mostrare a video un elenco di valori che non verranno modificati ed usiamo la direttiva ng-repeat:

<ul> 
	<li ng-repeat="nome in elencoNomi">{{nome}}</li> 
</ul>

Angular creerà un watch per ciascun elemento dell’elenco e lo valuterà, inutilmente, ad ogni ciclo di digest. Se queste valutazioni infruttuose possono essere tollerate per la potenza di calcolo di un PC, potrebbero al contrario creare qualche problema per il processore di un dispositivo mobile.

L’ideale sarebbe che si potesse evitare la creazione dei watch quando non sono necessari. Per far questo possiamo utilizzare un operatore speciale introdotto a partire dalla versione 1.3 di AngularJS, l’operatore ::. L’esempio precedente diventa come mostrato di seguito:

<ul> 
	<li ng-repeat="nome in ::elencoNomi">{{nome}}</li> 
</ul>

In questo modo Angular non creerà alcun watch per gli elementi dell’elenco.

Per le versioni di Angular precedenti alla 1.3 è possibile utilizzare la direttiva di terze parti bindonce. Il suo utilizzo è abbastanza semplice, come possiamo vedere dal seguente esempio:

<ul> 
	<li bindonce ng-repeat="nome in elencoNomi">{{nome}}</li> 
</ul>

Effetti CSS invece che Javascript

Infine, come ultimo suggerimento, invitiamo ad utilizzare per quanto possibile le funzionalità dei CSS per creare effetti grafici invece di JavaScript: sono più efficienti e richiedono meno risorse di calcolo.