Parte il Learning Friday e ad aprire le danze è il nostro Simone Pesce con le funzionalità di Angular

A febbraio si è dato il via all’appuntamento più atteso qui in sede: il Learning Friday. Uno spazio dove ogni collega, a rotazione, approfondisce un argomento di cui si è occupato o che lo appassioni.

Simone Pesce, Developer Front End, durante il primo appuntamento del Learning Friday ci ha raccontato cinque funzionalità di Angular.  Queste sono presenti nelle librerie di Angular per semplificare e velocizzare il suo utilizzo.

Le funzionalità di cui Simone ci ha parlato sono:

• Lazy Loading;
• Preloading Strategy;
• Route Guards;
• Route Resolvers;
• Http Interceptors.

In questo primo appuntamento scopriremo insieme le prime due ( per conoscere le altre clicca qui…..)

Lazy Loading: veloce e snello

Lazy Loading nasce per caricare i moduli su richiesta. È utilizzata per avere, nella compilazione di un progetto, la navigazione divisa in più moduli compilati separatamente. Una funzionalità del genere velocizza e parallelizza il processo di sviluppo all’interno di un team dove alcune persone potrebbero focalizzarsi su un determinato modulo, mentre altre lavorano su un modulo differente.

Come funziona ?

Si divide il codice in moduli Angular, ossia classi decorate con NgModule, si associa, a tali classi un modulo di routing. La proprietà LoadChildren dell’Angular Router permette di riferire il path e il riferimento al modulo stesso. Questo modulo è affermato soltanto nella dichiarazione della route, in nessun altro import. Una volta che il codice è così diviso in più parti, verrà inizialmente caricato solo il modulo Main, in genere chiamato AppModule, che serve per far caricare l’applicazione, mentre i moduli secondari, chiamati  “lazy”, verranno caricati in seguito alla navigazione.

Ecco un esempio pratico: se abbiamo un modulo principale e tre “lazy”, e andiamo solo su uno dei tre, gli altri due che non abbiamo navigato, non li avremo neanche importati, riducendo la quantità di download.

Il Lazy Loading diminuisce il tempo del caricamento migliorando  la velocità nello start up dell’applicazione e struttura il progetto in modo più snello e intuitivo. Tale funzionalità può essere utilizzata sempre, contribuendo alla strutturazione dell’applicazione in moduli e allo sviluppo generale. È da precisare che è utile soprattutto nei progetti più complessi con molti moduli.

Preloading strategy: risparmio di tempo nella fruizione del sito

Preloading Strategy permette di caricare i moduli mentre l’utente sta già interagendo con l’applicazione, dopo il caricamento del modulo principale. Mentre Lazy Loading carica i moduli con un click su una determinata ruote, Preloading Strategy permette di pre-caricare alcuni moduli. Tale funzionalità permette di differenziare il caricamento dei moduli “lazy”. Dopo aver caricato il modulo principale, si può decidere se caricare i moduli in seguito alla navigazione o farli pre-caricare attraverso questa funzione.

Come funziona ?

Si deve dichiarare la proprietà Preloading Strategy che è presente nel router module e quindi associare a tale proprietà una classe presente all’interno della libreria Angular. Questa funzione permette sia di avere tempi migliori in caso di start-up dell’applicazione che di evitare ritardi durante la navigazione, dato che il modulo sarà stato già pre-caricato.

I benefici di Preloading Strategy non finiscono qui infatti è possibile creare una propria Strategy: realizzare cioè una classe nella propria applicazione ed estendere l’interfaccia Preloading Strategy di Angular. Così si può definire come e quando caricare un determinato modulo. I due parametri principali che si possono usare sono le proprietà “preload” e “delay”, che permettono di decidere cosa pre-caricare e cosa no. Si potrà anche scegliere liberamente l’ordine e la successione con cui pre-caricare contenuti.

Queste sono le prime due funzioni che il nostro collega Simone Pesce ci ha raccontato. Curioso di conoscere le altre?

Clicca qui per leggere la PARTE 2 e scoprire tutte le funzionalità di Angular!