- Learn
- Guida AngularJS
- Tips and tricks per il mobile con AngularJS
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.
Se vuoi aggiornamenti su AngularJS, JavaScript, mobile inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Backend per applicazioni mobile con Azure e JavaScript
Eva Gjeci mostra come sfruttare gli Azure Mobile Services come backend per applicazioni iOS, Android e Windows Phone.