Angular (r)evolution: da AngularJS ai giorni nostri

24 September 2018

6385

Storia di Angular, una libreria web diventata framework. Che cos’è stato e che cosa sarà la piattaforma lanciata da Google quasi per caso.

La storia di Angular è curiosa. Nata quasi per caso, Angular oggi è una moderna piattaforma per lo sviluppo di web application, mantenuta da Google. Il framework si è evoluto da AngularJS, del quale è una riscrittura quasi totale.

In una galassia lontana, tanto tempo fa, lo sviluppo web era ancora dominato dai framework Java (JSP, Struts, Spring, JSF) e .NET. L’implementazione delle interfacce web era tutt’altro che semplice. A ogni modifica l’applicazione andava rieseguita per vedere come veniva visualizzata, il data binding e la validazione dai form, seppure semplificata dai framework era comunque a dir poco faticosa. Erano altri tempi, ma almeno la penicillina era stata già scoperta, e i decessi causati dal debugging di JavaScript (all’epoca lo strumento principale erano i pop-up… non c’era molto altro) erano se non altro contenuti.

Prior to penicillin and medical research, death was an everyday occurrence. It was intimate. (Katherine Dunn)

Nasce <angular/>

La storia di Angular inizia tra il 2008 e il 2009, quando Misko Hevery e Adam Abrons creano <angular/>, come progetto part-time in Google, per semplificare lo sviluppo web a beneficio dei web designer con poca conoscenza di codice.

I due registrano il sito getangular.com (angular.com era già preso)

Cos’era <angular/>? Beh pare che non fosse proprio banale da spiegare, e tutto quello che Hevery riuscì a balbettare a chi lo chiedeva fu qualcosa come

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

Un bel giorno Brad Green, il manager di Misko, gli chiede di lavorare a un progetto interno chiamato Google Feedback Tool. I tre membri del team ci lavorano 6 mesi, utilizzando Google web toolkit (GWT), scrivono più di 17000 linee di codice, ma andando avanti scrivere codice diventa sempre più difficile a causa della difficoltà nel testarlo: il framework infatti generava (succedeva anche con JSF) HTML e JavaScript a partire dai sorgenti java. Di conseguenza ogni modifica richiedeva scrivere codice Java, compilarlo, e farlo trasformare in HTML+JavaScript per poterlo visualizzare.

Misko a questo punto sfida il manager scommettendo che riesce a riscrivere tutto da solo in sole due settimane utilizzando il suo framework. Misko perde la scommessa, ma ci riesce comunque in 3 settimane, e Brad impressionato gli chiede di lavorarci ulteriormente. Google Feedback Tool verrà quindi portato a termine e rilasciato grazie alla versione completa di <angular/>, rinominata AngularJS. Questo episodio sarà la chiave di volta di tutta la storia di Angular portandolo ad essere quello che è oggi.

Con AngularJS il focus era HTML enhanced con JS, invece che HTML prodotto da JavaScript. AngularJS fu il primo framework JavaScript a introdurre la Dependency Injection, già in uso con successo in Java, dai primi passi di Spring nel 2003, alle annotations con Java 1.5.

Angular 2

Nel tempo si si rende conto che AngularJS non è più al passo coi tempi, la scarsa performance, l’esplosione del mobile lo rende inadatto al web moderno, e Google rilascia la versione 2.0 nel 2014. Con la 2.0 la storia di Angular prende una svolta drastica: cambia praticamente tutto, persino il linguaggio con cui è sviluppato (TypeScript al posto di JavaScript) è diverso, di conseguenza anche il nome cambia in Angular 2 (senza il JS).

Tra le differenze principali, Angular 2 è mobile oriented, fornisce supporto a diversi linguaggi, come TypeScript, EcmaScript, Dart. Altra feature importante rilasciata è CLI, ovvero la Command Line Interface, in grado di fornire supporto sostanziale alla creazione di progetti, deploy, test. Altre features cruciali sono RxJS, libreria per il reactive programming, e che è la base del supporto all’infrastruttura asincrona di Angular, e Zone.js (ne abbiamo già accennato qui). Con Angular 2.x, arrivano finalmente anche i generics, la tipizzazione statica, il supporto a classi e interfacce (anche qui features presenti da tempo in linguaggi più “maturi” come Java e C#).

Il cambiamento rispetto ad AngularJS è così drammatico che nel 2016 inizia a diffondersi il panico, con centinaia di breakup letters scritte dai fan preoccupati di come supportare le loro applicazioni senza dover riscrivere tutto. Molti iniziano a spostarsi verso React.

Angular 4

Saltata a pié pari la versione 3, ufficialmente per ragioni di “riallineamento interno”, Angular 4.x è retrocompatibile con Angular 2. Non ci sono cambiamenti radicali, principalmente ottimizzazioni delle performance e delle dimensioni del framework.

Angular 5

Rilasciata nel novembre 2017, la versione 5.x porta una serie di ulteriori ottimizzazioni (CLI 1.5, Router hooks, ottimizzazioni per build e compilazione) con l’obiettivo di semplificare l’uso del framework. La novità più rilevante però è Angular Universal (discusso qui) per il supporto al Server Side Rendering, assieme all’aggiunta del supporto allo stesso SSR da parte dei componenti Angular Material.

Angular 6

Angular 6 introduce una serie di migliorie nei tool: abbiamo infatti già parlato di Schematics, Angular Elements, è stato anche riscritto il renderer Ivy, e viene rilasciato il tool di building (fino a poco fa usato solo internamente da Google) Bazel.