In questa guida introduttiva tratteremo alcuni dei concetti base per poter iniziare a sviluppare un’applicazione in Angular. A tal proposito cercheremo di illustrare le diverse funzionalità del framework attraverso degli esempi pratici che poi analizzeremo per capire come sfruttare al meglio le potenzialità di Angular al fine di creare delle applicazioni efficienti. Negli esempi, che realizzeremo, useremo Angular 7 che è l’ultima versione stabile rilasciata al momento della stesura di questa guida.
Cos’è Angular
Angular è uno dei framework Javascript open-source più popolari, utilizzato da numerosi sviluppatori in tutto il mondo per creare applicazioni web dinamiche grazie a una serie di funzionalità e strumenti che semplificano lo sviluppo delle applicazioni stesse garantendo contemporaneamente ottimi risultati in termini di prestazioni.
La prima versione di Angular, a cui spesso si fa riferimento con il nome AngularJS (o Angular.js) fu inizialmente sviluppata nel 2009 da Miško Hevery e Adam Abrons come progetto secondario con lo scopo di semplificare il processo di sviluppo di applicazioni web. L’intenzione era quella di poter facilitare la realizzazione delle applicazioni attraverso l’uso di un’estensione del linguaggio HTML. Il nome Angular deriva semplicemente dal fatto che i tag HTML sono racchiusi da parentesi angolari.
Poco tempo dopo Miško Hevery iniziò a lavorare per Google e insieme ad altri tre sviluppatori gli venne assegnato il compito di sviluppare un tool chiamato Google Feedback. Per far ciò iniziarono a utilizzare un framework sviluppato internamente a Google chiamato Google web tool kit (GWT) . Dopo 6 mesi di sviluppo il progetto cominciò a diventare sempre più difficile da mantenere e ampliare. Per questo motivo Miško convinse il proprio manager Brad Green a riscrivere Google Feedback nuovamente usando AngularJS. Ciò permise di completare il progetto in sole tre settimane riducendo di gran lunga la quantità di codice scritto.
Dopo aver terminato con successo Google Feedback, AngularJS fu rilasciato come progetto open-source e la versione 1.0 venne pubblicamente annunciata a maggio del 2011. In poco tempo AngularJS divenne un framework estremamente popolare e numerosi sviluppatori in tutto il mondo iniziarono a usarlo per creare svariate applicazioni.
Quando a ottobre 2014 è stata mostrata un’anteprima di quello che poi sarebbe diventato Angular 2, le reazioni da parte della comunità degli sviluppatori di Angular sono state contrastanti. Il motivo per cui in molti erano scettici va ricondotto al fatto che Angular 2 è stato completamente riscritto e non è compatibile con la prima versione di Angular. Il motivo di tale scelta è legato alla necessità di creare un framework che tenesse conto delle novità introdotte negli ultimi anni sia lato client che server.
Novità introdotte a partire da Angular 2
Rispetto ad AngularJS 1.x, sono diverse le novità introdotte a partire da Angular 2. Di seguito riportiamo le principali novità.
Linguaggi di programmazione supportati in Angular
È possibile creare un’applicazione Angular usando diversi linguaggi di programmazione. È ovviamente possibile utilizzare Javascript e sfruttare le funzionalità introdotte a partire da ES2015. Tuttavia il linguaggio consigliato è Typescript che è un’estensione di Javascript. Nella documentazione ufficiale si fa infatti riferimento principalmente a TypeScript e molti degli esempi sono scritti proprio in TypeScript. Per questo motivo TypeScript sarà il linguaggio che useremo nel resto delle lezioni. (Prima di continuare con le prossime lezioni può essere quindi utile consultare la guida introduttiva a TypeScript in cui vengono spiegati alcuni dei concetti che useremo ampiamente nelle future lezioni) Oltre a TypeScript e Javascript, è possibile anche sviluppare le applicazioni Angular in Dart.
Semplificazione del framework
Lo sviluppo di una nuova versione di Angular ha permesso di sviluppare un framework più semplice e snello tenendo in considerazione le esigenze degli sviluppatori nel processo di creazione di un’applicazione. Infatti AngularJS risultava spesso complicato specie per chi si avvicinava per la prima volta al framework. A tal proposito sono stati eliminati alcuni concetti presenti nella versione precedente come i controller e gli scope. Infatti, a partire da Angular 2, si è seguito un modello per certi versi simili ad altri framework e librerie. Le applicazioni sono così strutturate in piccole unità riutilizzabili e componibili che prendono il nome di Componenti. Inoltre è stato messo a disposizione degli sviluppatori un tool come Angular CLI (command line interface) che semplifica notevolmente la fase di creazione sviluppo e test di un progetto.
Prestazioni e supporto dispositivi mobili
Angular è stato concepito e sviluppato con l’obiettivo di creare delle applicazioni che funzionassero alla perfezione sia su dispositivi mobili che computer garantendo un’esperienza utente ottimale. Sono state quindi tenute in considerazione tutte le caratteristiche di terminali come smartphone o tablet che presentano schermi di dimensioni ridotte e prestazioni limitate rispetto ad altri dispositivi. Il team di Angular ha inoltre concentrato la propria attenzione sul miglioramento delle prestazioni del framework, riducendo in maniera sostanziosa la dimensione dei file che lo compongono attraverso l’ottimizzazione del codice. Ciò ha permesso tempi di download, caricamento e avvio di un’applicazione più rapidi. Si è provveduto quindi a migliorare le prestazioni di Angular in termini di creazione e aggiornamento dei componenti per garantire un funzionamento fluido di un’applicazione in ogni situazione e su ogni dispositivo. Funzionalità come Code Splitting e Tree Shaking consentono di creare delle applicazioni estremamente efficienti riducendo i tempi di caricamento ed eliminando il codice superfluo. Infine il compilatore AoT (Ahead-of-Time) permette di ridurre ulteriormente la dimensione dell’applicazione che verrà rilasciata e velocizzare il tempo di avvio di 2-3 volte. (È possibile usare facilmente il compilatore AoT attraverso Angular CLI di cui parleremo nella prossima lezione. Una nuova versione più efficiente del compilatore, denominata Ivy, è attualmente in sviluppo attivo, ma, non fa parte della versione di Angular disponibile al momento della stesura di questa lezione. Si può comunque testare facilmente il nuovo compilatore già ora, ma non sarà un argomento che tratteremo in questa guida)
Perché usare Angular
Come già detto, a partire da Angular 2 sono stati fatti enormi sforzi per migliorare costantemente il framework in termini di prestazioni e ridurre quanto più possibile le dimensioni dei file che lo compongono. L’architettura modulare consente di strutturare al meglio un’applicazione e permette di semplificare il processo di creazione di SPA (Single page application). Insieme a funzionalità come Angular Router, code-splitting e lazy loading è possibile creare delle applicazioni in cui l’utente procede al download dei soli file che contengono soltanto i frammenti di codice richiesto per il funzionamento delle singole sezioni di un’applicazione. Angular supporta inoltre una funzionalità come il Server-side rendering che consente di velocizzare ulteriormente il caricamento e avvio di un’applicazione apportando considerevoli miglioramenti anche in termini di SEO.
Angular facilita la creazione di Progressive Web App (PWA) e si integra alla perfezione con strumenti come Electron per realizzare applicazioni Desktop. Viene inoltre impiegato in NativeScript e Ionic per costruire applicazioni mobili sia per Android che iOS.
Nella realizzazione di un nuovo progetto, Angular CLI semplifica il processo di sviluppo, test e pubblicazione di un’applicazione attraverso dei semplici comandi.
Infine data l’enorme popolarità di Angular, si è formata nel corso degli anni una numerosa e ricca community di programmatori che utilizzano il framework. Per questo motivo è piuttosto facile trovare supporto e risposte a eventuali problemi che sorgono in fase di sviluppo di un’applicazione su piattaforme come Stack Overflow.
Conclusioni
In questa prima breve lezione abbiamo fatto una panoramica di Angular che è uno dei framework più diffusi e popolari per creare Single Page Applications (SPA). A partire dalla versione 2 il team di Angular ha provveduto a riscrivere completamente il framework tenendo in considerazione gli sviluppi lato front-end degli ultimi anni. Nella prossima lezione vedremo, sebbene superficialmente, come usare uno strumento estremamente utile e ricco di funzionalità come Angular CLI che permette di semplificare il processo di creazione e sviluppo di un’applicazione in Angular.
