AngularConnect 2019: novità e contenuti

Ho partecipato ad AngularConnect 2019. Ci sono stati alcuni annunci interessanti dal palco e ho avuto modo di parlare con il core team di Angular, ottenendo qualche anticipazione sul dove si muoverà il framework nei prossimi mesi.

Disclaimer: questo articolo è un resoconto oggettivo e tecnico dei talk che ho seguito. Ho scritto anche un articolo gemello in cui, in modo più soggettivo, parlo delle mie impressioni sulla conferenza in generale.

Cosa c’è di nuovo sotto il sole?

Se sei di fretta e sai già di cosa si parla, ecco le novità in breve:

• Angular 9 abiliterà il compilatore Ivy di default. Il compilatore ViewEngine sarà rimosso definitivamente a partire da Angular 11. Verrà rilasciato un tool di compatibilità per le librerie non aggiornate per permettere di utilizzarle anche nelle nuove applicazioni.
• L’avvento di Ivy porterà in dote funzionalità molto interessanti: lazy-loading a livello di componente, test automatici fino a 7 volte più veloci e interessanti sviluppi futuri, come il rendere opzionali gli NgModule.
• I Custom Decorators non sono supportati da Ivy nella compilazione AOT (Ahead-Of-Time). Inoltre, le specifiche di questa tecnologia non sono ancora stabili. Per questi motivi, il team di Angular consiglia di evitarli fino a data da destinarsi.
• Il team di NgRx propone un nuovo modo di gestire la Change Detection senza l’utilizzo di zone.js. Si tratta di ngrx/component, correntemente in RFC (Request for Comments): ispirandosi a React, avvicina Angular allo stile dichiarativo di Vue.
• È stato presentato un nuovo framework, ma non si parla di programmazione: PAMstack (Process - Abstract - Mentorship). Aiuta la formazione di team di lavoro di successo e sostenibili, sia a livello personale che aziendale.
• Guess.js vi permette di migliorare la UX pre-caricando la prossima pagina che l’utente vorrà visitare in base ai dati di Google Analytics. Il progetto non è legato ad un framework specifico e per ora supporta Angular e React.
• È stata rilasciata la prima versione stabile di Bazel.
• Un nuovo modulo per l’internazionalizzazione sta per essere rilasciato, più flessibile ed user-friendly del suo predecessore.
• ng deploy, una funzionalità già disponibile da Angular 8.3.0, vi permette di gestire il deploy delle applicazioni tramite la Angular CLI grazie ai numerosi bridge già rilasciati per le maggiori piattaforme cloud e per npm.
• Un nuovo standard per l’accessibilità dei siti web sta lottando per affermarsi: l’Accessibility Object Model.

Se vuoi approfondire, qua sotto trovi un sunto dei talk che ho seguito, nell’ordine in cui si sono tenuti, con link alle rispettive registrazioni.
Non tutte le novità di cui sopra sono riportate più sotto: alcune erano in talk che non ho seguito o non ho trovato così interessanti, altre sono state riferite in modo informale alla Expert Zone o al London Meetup che si è tenuto la prima sera.

Keynote 1

I Business Components sono un pattern emergente nei progetti Angular: normali componenti che incorporano specifiche business rules. Un esempio può essere un bottone che invia sempre lo stesso tipo di informazione a un endpoint. Ricalcano il concetto di widget, come il bottone dei like di Facebook, integrabile sui siti web.

Sono state presentati i vincitori di Hack for Good, una competizione in ambito sociale promossa da Angular e NativeScript con premi in denaro: se non per alti valori morali potete sempre partecipare per puntare a quello!

Ionic ha presentato un builder per applicazioni mobile cross-device chiamato Ionic Studio. Sulla stessa scia, è stato nominato UI Bakery, tool di prototipazione utile per produrre mockup e generare automaticamente il codice di base per i componenti Angular.
I due software, a pagamento, assomigliano ad un progetto open source che si propone di fare la stessa cosa, xLayers, ma che prende come punto di partenza file generati dal programma Sketch, a pagamento.

ng deploy, già disponibile da Angular 8.3.0, è stato ri-presentato ed è il nuovo metodo consigliato di gestire i deploy direttamente dalla Angular CLI.

ng new è stato aggiornato per rendere l’app iniziale generata più interattiva e graficamente apprezzabile.

Angular 9 (previsto per novembre/dicembre 2019) abiliterà di default Ivy, il nuovo compilatore. Fino ad Angular 10 (primavera 2020) sarà possibile continuare ad utilizzare ViewEngine, il vecchio compilatore, ma a partire da Angular 11 (fine autunno 2020) Ivy sarà l’unico supportato.
Verrà rilasciato un tool di compatibilità, chiamato ngcc che permetterà di utilizzare le librerie non aggiornate anche nelle nuove applicazioni, con l’obiettivo di favorire la diffusione di Ivy.

Le app compilate con Ivy saranno più leggere per codebase piccole e grandi, ma un leggermente più pesanti per quelle medie. Il team è al lavoro per mitigare questo problema. Ivy porterà con sé anche un’esperienza di debug e test più semplice.

Alcune nuove funzionalità sono possibili solo grazie ad Ivy:

• l’unione automatica di più direttive di stile (es. [style.color], [style.backgroundColor], [style]), al posto della sovrascrittura da parte dell’ultima dichiarazione sulle prime;
• la possibilità di eseguire il lazy-loading a livello di componente e non più solo a livello di modulo.

Il team di Angular ha annunciato di voler spendere più tempo nello spiegare il funzionamento del framework agli sviluppatori, col duplice scopo di favorire contributi dalla community e far capire meglio le motivazioni dietro ai limiti del framework.

Saving the world… one line at a time!

Anche l’ultimo dei programmatori può fare un’importante differenza nel risolvere il problema dell’emergenza climatica, tramite scelte che portino ad un risparmio energetico.

Scegliere strumenti più efficienti aiuta in questo contesto: i portatili vincono sui desktop, il wifi vince sulla rete mobile.
Anche la scelta dell’infrastruttura ha peso: le soluzioni on-premise hanno un impatto maggiore di quelle in cloud.
Anche su quest’ultime c’è differenza: Google Cloud e Microsoft Azure sono in carbon-credit, mentre AWS lo è solo su alcuni datacenter (Dublino, Francoforte, Oregon e Canada).

Anche il linguaggio di programmazione scelto fa la differenza: C è il linguaggio più efficiente a livello energetico, mentre Typescript si colloca tra i meno efficienti.

Ci sono anche accorgimenti utili per il lavoro di tutti i giorni: secondo alcune stime, ogni MB di dati trasferito equivale a 10 grammi di CO2. Considerando il numero di download giornaliero delle nostre applicazioni, si capisce che l’impatto del lavoro degli sviluppatori può essere enorme. Ridurre le dimensioni del pacchetto non migliora solo la velocità di caricamento, ma aiuta a salvaguardare l’ambiente.

How we make Angular fast

Vengono presentate alcune ottimizzazioni a bassissimo livello applicate da V8, il motore JavaScript usato da Chrome, cui il team di Angular fa molta attenzione per mantenere elevate prestazioni.

Queste ottimizzazioni possono creare problemi in fase di benchmarking, inficiando la misura delle prestazioni del codice, come nel caso dell’inlining.

Merita particolare attenzione la categorizzazione in codice monomorfico, polimorfico e megamorfico. Questa distinzione comporta l’applicazione o meno di molte ottimizzazioni e Ivy punta a mantenere il più possibile il codice monomorfico.

Alcune perle estrapolate dal talk:

• per ottenere risultati significativi da un benchmark è consigliato far determinare automaticamente il numero di iterazioni al programma. Eseguendo il codice una prima volta ed aumentando progressivamente le iterazioni fino a raggiungere almeno 1 millisecondo di tempo di esecuzione si può identificare un numero accettabile, da utilizzare per i successivi test.
• V8 internamente trasforma gli object in due array di dati e metadati. Questo lo aiuta a diminuire i tempi di accesso e ri-utilizzare i metadati per risparmiare memoria.
• V8 cerca di ottimizzare l’accesso alle proprietà di un oggetto creando delle scorciatoie fino al quarto elemento più richiesto. Dal quinto in poi non è più conveniente e torna ad utilizzare i metodi di accesso più lenti.
• Ivy memorizza i metadati dei componenti come array, invece che oggetti, fornendo un proxy più facilmente navigabile solamente durante lo sviluppo.

Profiling Angular apps like a shark

La prima parte del talk si concentra sulla pipeline di rendering dei browser ed è un’ottima risorsa per i novizi.

Come metodo di misurazione delle performance vengono indicate le metriche RAIL, che si focalizzano sulla bontà della UX per valutare il livello qualitativo dell’applicazione.

L’ultima parte si concentra sull’identificare la sorgente dei problemi di performance, elencando quelli più comuni.
Il processo di profilazione proposto ricalca il metodo scientifico:

1. preparazione dell’ambiente;
2. raccolta dati;
3. analisi dei risultati;
4. aggiustamento delle variabili;
5. test del sistema, misurazione, torna al punto 2.

Keynote 2

Nella sua continua corsa al favorire la crescita di nuovi talenti, Google ha creato una sezione per Angular nel suo sito dedicato all’insegnamento delle best-practices dello sviluppo web.

Cercando di mescolare il Machine Learning e lo sviluppo web è nato Guess.js, una libreria che analizza i pattern di visita dell’applicazione tramite Google Analytics e cerca di prevedere la prossima pagina che l’utente vorrà visitare, caricandola preventivamente ed aumentando la performance percepita dall’utente.

Bazel, il nuovo sistema di build e test sviluppato da Google, è finalmente stato rilasciato alla versione 1.0.0, la prima versione ufficialmente stabile.
Anche le API di Builders, il sistema che permette di eseguire o modificare processi tramite la Angular CLI, è ora ufficialmente stabile.

Creating a better culture in tech through diversity and inclusion

I risultati più grandi derivano sempre dal lavoro di team, non di un singolo.

Per questo This Dot Labs ha presentato PAMstack (Process - Abstract - Mentorship), un framework per la cura del team, che si focalizza sulla sostenibilità sul lungo periodo.

Spesso si considera il nuovo arrivato come un problema, quando il vero problema risiede nel team: documentazione scarsa, assenza di tutoraggio e mancanza di revisione del lavoro sono fattori che allungano i tempi di inserimento e sottopongono il novizio a stress che velocemente si riversa sul team intero.

La mancanza di formazione interna e skill-sharing genera seri problemi:

• difficoltà ad assumere e inserire nuove risorse;
• rischio di blocco totale del team dovuto al bus factor;
• minor produttività;
• stagnazione del progetto.

Il framework proposto aiuta ad imbastire un ciclo virtuoso in 5 fasi che scongiuri questi problemi: pianificazione, formazione, esecuzione, misurazione e revisione.

Punto focale è la documentazione durante tutte le fasi: workflow utilizzato, risposte alle domande ricorrenti, processo di test, persino il piano di tutoraggio, tutto deve essere trascritto e facilmente consultabile.

Anche la revisione è fondamentale: deve essere effettuata da almeno un altro membro del team e coprire tutto ciò che viene scritto (codice, appunti delle riunioni, ecc).

Altri talk

Per questioni di lunghezza dell’articolo non ho potuto recensire tutti i talk, ma molti altri meritano comunque di essere visti e sono ottime risorse per l’apprendimento. Eccoli, ordinati per importanza):

• Performance optimizations in Angular: risoluzione/mitigazione dei problemi di performance più ostici, una preziosa raccolta di cosa fare e cosa no per ottenere il massimo da Angular.
• Building with Ivy: Rethinking Reactive Angular: presentazione di un nuovo tool volto a svincolare Angular dall’uso di zone.js e avanzare verso uno stile di programmazione puramente reattivo.
• The science of authenticating Angular apps: esposizione molto ben curata e motivata sul miglior processo di autenticazione attualmente disponibile per SPA.
• How Angular works: spiegazione del funzionamento a basso livello di Angular, in particolare di Ivy.
• Migrating breaking changes with ESLint and Schematics: guida alla creazione di una regola ESLint ed al suo utilizzo assieme a Schematics per eseguire upgrade automatici del codice.
• The secrets behind Angular’s lightning speed: descrizione delle tecniche adottate da Angular per ottenere un’ottima performance.
• Less servers for your Angular app: dimostrazione dell’integrazione tra VSCode, Angular e Microsoft Azure.

Spero che l’articolo ti sia stato utile, Dreamonkey fornisce consulenze e lezioni su Angular e molti altri temi, non esitare a contattarci in caso di bisogno!
Se invece hai un progetto tra le mani e hai bisogno di aiuto, ricorda che siamo specializzati nella produzione di web apps e siti web di alta qualità.

[Le foto di questo articolo sono prese dall’account Flickr di White October Events e usate con il suo permesso.]