Blog

Con quest'articolo cercheremo di aiutarti a comprendere le potenzialità di Angular, un framework javascript completamente open source sviluppato da Google. 

Tuttavia, prima di entrare nel tecnico, diamo alcuni piccoli cenni sulla sua storia e sui motivi che hanno spinto la creazione di un prodotto simile.

Cenni storici

La storia di Angular è un po’ ingarbugliata. Tutto iniziò nel 2009 quando Misko Hevery e il suo amico Adam Abrons, iniziarono a lavorare part-time ad un progetto che potesse semplificare lo sviluppo ai web designers che non avevano molta dimestichezza con il codice. Una volta finito, i due registrarono il dominio getangular.com perché ai tempi angular.com non era disponibile.

Questa prima bozza di Angular non era proprio facile da spiegare, perfino Hevery alla domanda su cosa fosse questo progetto, abbozzava una risposta come:

it’s a kind of Spread sheet in cloud so that we can bind data and save it without worrying about security persistent etc and UI will be in HTML.

che potremmo tradurre in:

è una specie di spreadsheet su cloud, così che possiamo fare binding dei dati e salvarli senza preoccuparci della persistenza, della sicurezza etc… e l'interfaccia sarà in HTML.

Get Angular 

Successivamente Brad Green, uno dei manager di Misko in Google, gli chiese di lavorare ad un progetto interno che si chiamava Google Feedback Tool utilizzando Google Web Toolkit (GWT). Dopo 6 mesi di sviluppo e più di 17.000 righe di codice, lavorare su questo progetto diventò estremamente difficile, data la difficoltà nel testare i file generati dai sorgenti in Java. A quei tempi era comune generare file HTML e Javascript partendo da framework basati su Java. Questi framework, anche se davano un importante aiuto, richiedevano maggiori tempi di sviluppo, dovuti al fatto che ad ogni cambiamento il codice andasse ricompilato. Di conseguenza, ogni modifica necessitava una nuova compilazione. A quel punto Misko sfidò il suo manager dicendo che con Angular sarebbe riuscito a riscriverlo in 2 settimane. Perse la scommessa, impiegandone 3, ma impressionò comunque Brad il quale gli chiese di lavorarci ulteriormente e perfezionarlo. Alla fine, il progetto Google Feedback Tool fu portato a termine con Angular che, per l’occasione, fu rinominato AngularJs. 

Primo rilascio ufficiale

Dopo qualche mese arrivò il 2010, anno in cui è stata rilasciata la prima versione ufficiale di AngularJs. 

Il primo framework Javascript a introdurre il pattern della dependency injection, già molto popolare e usato nel mondo back end e il primo con cui era possibile produrre web application esclusivamente con Javascript, senza l’utilizzo di linguaggi server side. 

Il funzionamento di AngularJs era legato a degli attributi scritti nella pagina HTML – un esempio ne è il classico ng-controller – i quali venivano letti e per ognuno di loro era assegnata una funzione specifica. 

Riscrittura di AngularJs 

Purtroppo, dopo alcuni anni, emersero gravi problemi di performance di AngularJs, alcuni tra i più famosi problemi riguardavano l’incombenza del cosiddetto variable shadowing e il digest loop, ossia il meccanismo con cui AngularJs riusciva a fornire il two-way data binding. Inoltre, in quel periodo si fece sempre più forte l’esigenza di avere un buon supporto per il mobile, cosa che non era stata studiata per AngularJs.

Per chi volesse approfondire la questione del digest loop

Per farla breve AngularJs, per mettere a disposizione il two-way data binding, crea per ogni elemento dell’interfaccia che utilizza la direttiva ng-model, un watch, ossia una funzione che “osserva” i cambiamenti della variabile su cui è definita. 

Il Digest Loop è il processo con cui vengono esaminati tutti i watch con lo scopo di individuare dei cambiamenti dall’ultima esecuzione e eventualmente aggiornare il DOM. 

Un problema comune si verificava quando una variabile legata ad un watch veniva modificata durante il digest loop. Ciò provocava nuovamente l'esecuzione di tutto il ciclo di aggiornamento dei watch. 

Lasciamo immaginare cosa accadeva in grosse applicazioni con un numero elevato di Watch: prestazioni pessime e tempi di caricamento assurdi.

Angular 2+ 

N.B. con angular 2+ ci si riferisce a tutte le versioni di Angular successive ad AngularJs

Ed eccoci arrivati finalmente al presente. La completa riscrittura di AngularJs porta al rilascio di Angular nel 2014. 

Nonostante abbiano quasi lo stesso nome sono sostanzialmente differenti.

Innanzitutto Angular 2+ è stato sviluppato con Typescript, un linguaggio di programmazione open source di Microsoft. Potremmo definire Typescript come un superset di Javascript, in quanto non fa altro che aggiungere elementi come tipi statici, classi, interfacce e generics, tutte cose che ritroviamo da tempo in linguaggi molto più maturi come Java. 

Angular 2+ introduce altre importanti features per lo sviluppo, qui di seguito ne riassumo alcune:

• Angular CLI: è la command line interface di Angular, ossia un insieme di comandi predisposti da eseguire su terminale che offrono supporto dalla creazione del progetto e dei componenti fino al deploy e ai test;
• Supporto a diversi linguaggi: Angular 2+ supporta, oltre Typescript, ES5, ES6 e Dart;
• Supporto alla programmazione Reattiva con RXJS: la programmazione reattiva (reactive programming) è un paradigma di programmazione che si differenzia da quello imperativo. Per questo motivo servirebbe un articolo a parte per poter far capire i vantaggi e le sue caratteristiche. Mi limiterò a dire che la programmazione reattiva è alla base di tutta l'infrastruttura asincrona di Angular 2+;
• Miglior gestione dello State: un altro dei pattern utilizzati è la centralizzazione dello stato applicativo. Il principale obiettivo di questo pattern è rendere il cambiamento e la lettura dei dati semplice attraverso specifici comportamenti, uno di questi è sapere dove, quando e chi può effettuare delle modifiche seguendo un flusso unidirezionale. Per implementare ciò Angular utilizza Redux, una libreria che è anche un design pattern e che si basa su alcuni concetti come: 
  • Lo State è read only: cioè lo stato applicativo non può essere modificato direttamente;
  • Singola fonte di verità: cioè che lo stato è immutabile ed è unico per tutto l’applicativo, non possono esserci più stati;
  • Funzioni Pure: tutti i cambiamenti dello stato sono fatti con l’utilizzo di funzioni pure (ciò richiede di approfondire alcuni concetti della programmazione funzionale);
  • Flusso unidirezionale dei dati (one way data flow): significa che le modifiche e la lettura dei dati seguono un flusso unico, in parole semplici i dati che vengono passati da un componente parent a un child non possono essere modificati da quest'ultimo. 

Oltre l’aggiunta di queste importanti features, Angular 2+ si differenzia anche per cambiamenti di sintassi. Innanzitutto invece di scrivere ng-module e ng-controllers, si utilizzeranno le classi @NgModule, @Component, @Directive, @Service etc… 

Inoltre, in questa versione non esistono più concetti come lo scope e i controllers, al loro posto è stata creata un’architettura che si basa su componenti gerarchici. 

Per quanto riguarda il binding delle proprietà è stato introdotto l’utilizzo delle parentesi quadre [ ], come in questo esempio: 

mentre per il binding degli eventi si utilizzano le parentesi tonde (). Nel seguente esempio si capisce come il metodo onClick() sia stato collegato all’evento click:

Conclusioni e sommario

Angular 2+ è uno dei migliori framework Javascript per la creazione di SPA (single page application). Tuttavia, a differenza di altri concorrenti come React o Vue.js, presenta una curva d’apprendimento più alta quindi non è di così facile utilizzo per chi è alle prime armi. Per poterlo utilizzare bene e sfruttare al meglio tutte le sue caratteristiche bisognerebbe avere delle solide conoscenze di alcuni Design Pattern e soprattutto di Javascript che spesso richiedono un pò d’esperienza e di tempo. 

Ci sembra scontato dire che Angular 2+, dopo aver capito che è completamente differente da AngularJs o Angular 1.X (in quanto aggiunge molte nuove features e lo rende al passo con lo sviluppo web moderno), è da preferire allo studio del suo precedente. Soprattutto perché, da dicembre 2021, Google ha ufficialmente sospeso il supporto di AngularJs.

Nei prossimi articoli analizzeremo al microscopio anche React e Vue.Js, per poi terminare in bellezza con un articolo che li mette a confronto, esaminando pregi e difetti. Stay tuned!