{"id":33622,"date":"2022-03-28T09:00:00","date_gmt":"2022-03-28T07:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=33622"},"modified":"2022-03-28T09:21:44","modified_gmt":"2022-03-28T07:21:44","slug":"angular-presente-e-futuro","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/","title":{"rendered":"Angular: presente e futuro"},"content":{"rendered":"

[et_pb_section admin_label=”section”]
\n\t\t\t[et_pb_row admin_label=”row”]
\n\t\t\t\t[et_pb_column type=”4_4″][et_pb_text admin_label=”Text”]<\/p>\n\n\n

\"\"<\/figure>\n\n\n\n

Torniamo a parlare di Angular dopo un po\u2019 di tempo dall\u2019ultimo articolo<\/a> sulle novit\u00e0 del framework. Secondo i sondaggi<\/a> condotti da Stack Overflow, Angular resta il secondo framework di front-end pi\u00f9 popolare alle spalle di React, anche se il divario \u00e8 cresciuto rispetto al 2020. Altro aspetto peculiare \u00e8 che non sembra particolarmente amato dai suoi utenti (addirittura quarto).  <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Sembra che la sua stabilit\u00e0, invece che incrementarne l\u2019adozione, ne stia spegnendo l\u2019entusiasmo: come se un framework completo, ma troppo \u201copinionated\u201d, non sia pi\u00f9 sufficiente. E\u2019 un paradosso che sta spingendo il team di Angular a riconsiderare alcune scelte storiche come vedremo nel paragrafo finale. Nel frattempo vediamo cos\u2019\u00e8 successo nel 2021. <\/p>\n\n\n\n

Nel corso del 2021, sono state pubblicate due major release (la v.12<\/a> e v.13<\/a>). Si \u00e8 anzitutto concluso il periodo di transizione, avviato con la pubblicazione della versione 9 dove era stato inserito Ivy, per la nuova pipeline di compilazione e rendering. Quella usata precedentemente, nota come View Engine, \u00e8 stata deprecata a partire dalla versione 12 (senza che fosse necessario alcun intervento nel codice): le librerie dipendenti da essa hanno continuato a funzionare grazie a un compilatore speciale chiamato ngcc<\/strong>. A partire dalla versione 13, per\u00f2, View Engine non \u00e8 pi\u00f9 disponibile.  <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ci sono voluti anni per completare Ivy e i risultati sono evidenti anche nel caso di piccole applicazioni: Angular \u00e8 diventato pi\u00f9 semplice, veloce e facile da manutenere grazie al type checking, le ottimizzazioni di build e la fast change detection (di cui abbiamo parlato qui<\/a>).\u00a0\u00a0<\/p>\n\n\n\n

Angular Package Format <\/h1>\n\n\n\n

Sono state portate modifiche ad APF (Angular Package Format). Di cosa si tratta? E\u2019 una specifica per la struttura e formato dei pacchetti npm che viene usata anzitutto dalle librerie native (ad esempio @angular\/core oppure @angular\/material) ma anche da librerie di terze parti. Nel frastagliato panorama di JavaScript, gli sviluppatori consumano pacchetti in tante maniere diverse: alcuni usano SystemJS<\/a>, altri WebPack<\/a> oppure potrebbero consumare pacchetti in Node o forse nel browser come bundle UMD,<\/a> o attraverso variabili di accesso globale.  Questa proliferazione \u00e8 dovuta al fatto che per molto tempo JavaScript non ha avuto una maniera ufficiale di importare \/ esportare moduli di codice.  <\/p>\n\n\n\n

APF supporta tutti gli strumenti di sviluppo e workflow pi\u00f9 comunemente usati ponendo enfasi sulle ottimizzazioni (dimensioni pi\u00f9 piccole delle applicazioni e tempi di compilazione pi\u00f9 ridotti). A questo<\/a> indirizzo trovate le specifiche, mentre nell\u2019immagine seguente trovate uno stralcio del pacchetto @angular\/core. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Angular Dev Tools<\/h1>\n\n\n\n

Sullo store<\/a> Chrome Web \u00e8 disponibile una estensione del browser Chrome che offre agli sviluppatori Angular nuovi strumenti sia per il debug che per il profiling delle applicazioni. Dopo l\u2019installazione diventa disponibile un tab chiamato Angular nei Chrome Dev Tools.\u00a0<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

L\u2019 estensione presenta a sua volta due tab aggiuntivi: Components e Profiler. Il primo consente di esplorare le componenti e direttive, vederne un\u2019anticipazione o modificare lo stato. Il secondo offre uno sguardo sull\u2019esecuzione della change detection di Angular. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nell\u2019immagine, \u00e8 possibile vedere una sequenza di barre, ciascuna delle quali simboleggia i cicli della change detection. Pi\u00f9 alta \u00e8 una barra, pi\u00f9 lungo \u00e8 il tempo speso in quel ciclo. Ogni barra ha un dettaglio che mostra anche la gerarchia dei genitori delle direttive selezionate. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Testing in Angular<\/h1>\n\n\n\n

Protractor<\/a> \u00e8 un framework per il test end-to-end in applicazioni Angular. Il suo futuro \u00e8 incerto e a partire dalla versione 12 non \u00e8 pi\u00f9 incluso nei nuovi progetti. L\u2019idea \u00e8 fornire supporto a soluzioni di terze parti come Cypress, WebdriverIO e TestCafe.<\/p>\n\n\n\n

Rimanendo nell\u2019ambito dei test, ricordiamo che Angular offre nei suoi progetti Jasmine<\/a>, un framework JavaScript per la scrittura ed esecuzione di unit ed integration test. Esiste una guida<\/a> ufficiale e completa su come il team di Angular pensa che debbano essere testati componenti, moduli, servizi, pipe e direttive. Vi rimandiamo anche a un articolo<\/a> del nostro Adolfo per una discussione introduttiva sull\u2019argomento. <\/p>\n\n\n\n

Nella versione 13 di Angular sono stati introdotti miglioramenti alla classe TestBed che impattano sul consumo di memoria e sulla velocit\u00e0 di esecuzione di ogni test eseguito. Il dettaglio \u00e8 descritto nella seguente serie di articoli<\/a>. <\/p>\n\n\n\n

Nullish Coalescing <\/h1>\n\n\n\n

L\u2019operatore ?? che da molto tempo \u00e8 utilizzato dagli sviluppatori TypeScript, \u00e8 stato messo a disposizione anche nei template Angular a partire dalla versione 12. Quindi mentre finora era necessario scrivere codice come il seguente nei template:\u00a0<\/p>\n\n\n

\n{{age !== null && age !== undefined ? age : calculateAge() }} \n<\/pre><\/div>\n\n\n
ora \u00e8 possible invece scrivere con ovvio beneficio:\u00a0\u00a0<\/p>\n\n\n
\n{{ age ?? calculateAge() }} \n<\/pre><\/div>\n\n\n
Creazione dinamica dei componenti<\/h1>\n\n\n\n
Ivy offre dei vantaggi agli sviluppatori anche in fase di scrittura del codice. A partire dalla versione 13 \u00e8 stata semplificata l\u2019API per la creazione dinamica di un componente (in questo articolo<\/a> avevo introdotto il problema). Non \u00e8 pi\u00f9 necessaria l\u2019iniezione di ComponentFactoryResolver e quindi un componente pu\u00f2 essere instanziato con ViewContainerRef.createComponent senza dover creare una factory associata. Quindi, con la nuova API, possiamo scrivere ad esempio:<\/p>\n\n\n
\n@Directive({ \u2026 }) \nexport class MyDirective { \n    constructor(private viewContainerRef: ViewContainerRef) {} \n    createMyComponent() { \n        this.viewContainerRef.createComponent(MyComponent); \n    } \n} \n<\/pre><\/div>\n\n\n
Addio IE11 <\/h1>\n\n\n\n
IE11 \u00e8 stato definitivamente abbandonato. La rimozione permette ad Angular non solo di sfruttare le funzionalit\u00e0 dei moderni browser (ad esempio le variabili CSS e le web animation) ma anche di produrre applicazioni pi\u00f9 piccole e veloci a causa della rimozione dei polyfills specifici di Internet Explorer. <\/p>\n\n\n\n
La ng CLI <\/h1>\n\n\n\n
Il comando ng build, a partire dalla versione 12, funziona di default su production. Inoltre la CLI ha abilitato di default lo strict mode, che permette di scoprire errori sin dalle prime fasi di sviluppo. Qui<\/a> troverete il dettaglio su questa modalit\u00e0.  <\/p>\n\n\n\n
Anche il language service \u00e8 stato spostato di default ad uno basato su Ivy. Di cosa si tratta? Stiamo parlando del servizio utilizzato dagli editor e IDE per il controllo degli errori e l\u2019 autocompletamento delle istruzioni. La CLI ora supporta l\u2019uso di una cache di build persistente. Grazie ad essa si ha un miglioramento del 68% nella velocit\u00e0 di build. Questa configurazione (descritta nel dettaglio qui<\/a>) \u00e8 inserita all\u2019interno del file angular.json <\/p>\n\n\n
\n{ \n    "$schema": "...", \n    "cli": { \n        "cache": { \n            "enabled": true, \n            "path": ".cache", \n            "environment": "all" \n        } \n    } \n    ... \n} \n<\/pre><\/div>\n\n\n
Aggiornamento delle dipendenze<\/h1>\n\n\n\n
Quando creiamo una nuova app col comando ng new utilizziamo adesso la versione 7.4 di RxJS.  La libreria delle estensioni reattive di JavaScript \u00e8 usata praticamente ovunque in Angular e quindi stiamo parlando di una dipendenza assolutamente fondamentale. <\/p>\n\n\n\n
RxJs 7 \u00e8 pi\u00f9 piccolo di RxJs 6: passiamo quindi da 52 KB a soli 19KB. \u00c8 stato fatto un importante refactor del codice.\u00a0<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
L\u2019operatore toPromise \u00e8 stato deprecato e verr\u00e0 completamente rimosso nella versione 8. Al suo posto sono stati introdotti firstValueFrom() e lastValueFrom(). L\u2019operatore firstValueFrom() risolve la promise sul primo valore di un observable prima di eseguire l\u2019unsubscribe. L\u2019operatore lastValueFrom, invece, aspetta l\u2019ultimo valore prima di risolvere la promise. Quindi, mentre in passato avevamo che <\/p>\n\n\n
\nconst numbers$ = of(1,2,3,4,5) \n\/\/ toPromise() will return the last value of the observable \nnumbers$.toPromise().then(n => console.log("toPromise(): " + n)) \n<\/pre><\/div>\n\n\n
adesso possiamo scegliere <\/p>\n\n\n
\n\/\/ lastValueFrom() will return the last value just like to promise \nlastValueFrom(numbers$).then(n => console.log("lastValueFrom(): " + n)) \n\n \/\/ firstValueFrom() will return the first value of the observable \nfirstValueFrom(numbers$).then(n => console.log("firstValueFrom(): " + n))  \n<\/pre><\/div>\n\n\n
Attenzione che diversi operatori sono stati rinominati (ad esempio zip \u00e8 diventato zipWith), altri deprecati e nuovi aggiunti. Qui<\/a> troverete il dettaglio. <\/p>\n\n\n\n
<\/p>\n\n\n\n
E il futuro? <\/strong><\/h1>\n\n\n\n
Sono due le principali richieste fatte dagli utenti e che sono in fase di elaborazione da parte del team di Angular. La roadmap ufficiale \u00e8 presente al seguente indirizzo<\/a>. <\/p>\n\n\n\n
La prima \u00e8 quella dei Strictly Typed Reactive Form (qui<\/a> troverete la RFC ufficiale). Prendiamo ad esempio un form, popolato con un valore default. <\/p>\n\n\n
\nconst partyForm = new FormGroup({ \n  address: new FormGroup({\n                  house: new FormControl(1234), \n                  street: new FormControl('Powell St')}), \n                  formal: new FormControl(false), \n                  foodOptions: new FormArray([]) \n}); \n<\/pre><\/div>\n\n\n
Quando proviamo ad interagire col form e leggere i suoi elementi, ci troviamo frequentemente ad avere dei valori di tipo any. <\/p>\n\n\n
\nconst partyDetails = partyForm.getRawValue(); \/\/ type `any` \nconst where = partyForm.get('address.street')!.value; \/\/ type `any` \npartyForm.controls.formal.setValue(true); \/\/ param has type `any` \n<\/pre><\/div>\n\n\n
Immaginiamo di avere un type corrispondente:<\/p>\n\n\n
\ntype Party = { \n  address: { \n      house: number,   \n      street: string, \n  }, \n  formal: boolean, \n  foodOptions: Array&lt;{ \n    food: string, \n    price: number, \n  }> \n} \n<\/pre><\/div>\n\n\n
Con la proposta in fase di pubblicazione avremo che gli elementi del form sono completamenti tipizzati. Ad esempio: <\/p>\n\n\n
\nconst partyDetails = partyForm.getRawValue(); \/\/ a `Party` object \nconst where = partyForm.get('address.street')!.value; \/\/ type `string` \npartyForm.controls.formal.setValue(true); \/\/ param has type `boolean` \n<\/pre><\/div>\n\n\n
La seconda richiesta \u00e8 pi\u00f9 radicale (qui<\/a> ne trovate il dettaglio): rendere i moduli opzionali. <\/p>\n\n\n\n
Gli NgModule sono il concetto base di una applicazione Angular. Persino un\u2019app Hello World<\/em> ne ha bisogno di uno per la sua esecuzione. I moduli sono l\u2019unit\u00e0 di riutilizzo, le librerie sono moduli, il lazy-loading \u00e8 basato sui moduli (qui<\/a> ne parla sempre il nostro Adolfo).  <\/p>\n\n\n\n
Poco prima, per\u00f2, abbiamo parlato della creazione dinamica di un\u2019istanza di un componente. Tale funzionalit\u00e0 nasconde delle insidie e non \u00e8 detto che a runtime funzioni correttamente. Un componente pu\u00f2 aspettarsi che all\u2019invocazione del suo costruttore venga passato un servizio. Tipicamente \u00e8 un modulo che garantisce che ci\u00f2 avvenga correttamente ma se istanzio direttamente un componente rischio di non avere il provider necessario a runtime. Quindi, se ci pensate (ed \u00e8 l\u2019unico esempio nella scena dei framework web), i componenti hanno bisogno dei moduli che sono quindi il blocco pi\u00f9 piccolo di codice riutilizzabile. <\/p>\n\n\n\n
Nelle prossime versioni di Angular potremo scegliere se utilizzare o meno gli NgModule. Uno standalone component (o pipe o directive) non sar\u00e0 dichiarato in alcun modulo e gestir\u00e0 autonomamente le proprie dipendenze e potr\u00e0 essere usato direttamente senza aver bisogno di un NgModule intermedio. Ecco un semplice esempio: <\/p>\n\n\n
\nimport {Component} from '@angular\/core'; \n@Component({ \n  standalone: true,   \n  template: `I'm a standalone component!` \n}) \nexport class HelloStandaloneComponent {} \n<\/pre><\/div>\n\n\n
Come gestiremo le dipendenze? Verr\u00e0 aggiunta una propriet\u00e0 imports all\u2019interno del decoratore @Component dove andremo a specificare le dipendenze presenti nel template <\/p>\n\n\n
\nimport {Component} from '@angular\/core'; \nimport {FooComponent, BarDirective, BazPipe} from '.\/template-deps'; \n\n @Component({ \n  standalone: true, \n  imports: [FooComponent, BarDirective, BazPipe], \n  template: ` \n    &lt;foo-cmp>&lt;\/foo-cmp> \n    &lt;div bar>{{expr | baz}}&lt;\/div> \n  ` \n}) \nexport class ExampleStandaloneComponent {} \n<\/pre><\/div>\n\n\n
Conclusioni <\/h1>\n\n\n\n
Il team di Angular ha quindi accettato la sfida di provare a fornire, a chi voglia utilizzarlo, una strada alternativa rispetto a quanto visto finora.  Nel frattempo, TypeScript e RxJS continuano a renderlo un framework estremamente solido per lo sviluppo di soluzioni front-end. Sono queste le uniche dipendenze imprescindibili del framework e ci\u00f2 fa s\u00ec che i team di sviluppo non accumulino debito tecnico seguendo librerie di terze parti anche per problemi comuni quali la gestione dei form o delle chiamate HTTP. TypeScript ormai \u00e8 utilizzato anche nell\u2019ecosistema React. RxJS, invece, resta lo scoglio teorico pi\u00f9 difficile da superare per un team che inizi ad utilizzare Angular, ma, a mio modo di vedere, \u00e8 il vero valore aggiunto di questo framework. <\/p>\n\n\n\n
Alla prossima.<\/p>\n\n\n
[\/et_pb_text][\/et_pb_column]
\n\t\t\t[\/et_pb_row]
\n\t\t[\/et_pb_section]<\/p>","protected":false},"excerpt":{"rendered":"
Facciamo il punto sullo stato attuale di Angular<\/p>\n","protected":false},"author":196716245,"featured_media":33698,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\n
\"\"<\/figure>\n\n\n\n
Torniamo a parlare di Angular dopo un po\u2019 di tempo dall\u2019ultimo articolo<\/a> sulle novit\u00e0 del framework. Secondo i sondaggi<\/a> condotti da Stack Overflow, Angular resta il secondo framework di front-end pi\u00f9 popolare alle spalle di React, anche se il divario \u00e8 cresciuto rispetto al 2020. Altro aspetto peculiare \u00e8 che non sembra particolarmente amato dai suoi utenti (addirittura quarto).  <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Sembra che la sua stabilit\u00e0, invece che incrementarne l\u2019adozione, ne stia spegnendo l\u2019entusiasmo: come se un framework completo, ma troppo \u201copinionated\u201d, non sia pi\u00f9 sufficiente. E\u2019 un paradosso che sta spingendo il team di Angular a riconsiderare alcune scelte storiche come vedremo nel paragrafo finale. Nel frattempo vediamo cos\u2019\u00e8 successo nel 2021. <\/p>\n\n\n\n
Nel corso del 2021, sono state pubblicate due major release (la v.12<\/a> e v.13<\/a>). Si \u00e8 anzitutto concluso il periodo di transizione, avviato con la pubblicazione della versione 9 dove era stato inserito Ivy, per la nuova pipeline di compilazione e rendering. Quella usata precedentemente, nota come View Engine, \u00e8 stata deprecata a partire dalla versione 12 (senza che fosse necessario alcun intervento nel codice): le librerie dipendenti da essa hanno continuato a funzionare grazie a un compilatore speciale chiamato ngcc<\/strong>. A partire dalla versione 13, per\u00f2, View Engine non \u00e8 pi\u00f9 disponibile.  <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ci sono voluti anni per completare Ivy e i risultati sono evidenti anche nel caso di piccole applicazioni: Angular \u00e8 diventato pi\u00f9 semplice, veloce e facile da manutenere grazie al type checking, le ottimizzazioni di build e la fast change detection (di cui abbiamo parlato qui<\/a>).  <\/p>\n\n\n\n
Angular Package Format <\/h1>\n\n\n\n
Sono state portate modifiche ad APF (Angular Package Format). Di cosa si tratta? E\u2019 una specifica per la struttura e formato dei pacchetti npm che viene usata anzitutto dalle librerie native (ad esempio @angular\/core oppure @angular\/material) ma anche da librerie di terze parti. Nel frastagliato panorama di JavaScript, gli sviluppatori consumano pacchetti in tante maniere diverse: alcuni usano SystemJS<\/a>, altri WebPack<\/a> oppure potrebbero consumare pacchetti in Node o forse nel browser come bundle UMD,<\/a> o attraverso variabili di accesso globale.  Questa proliferazione \u00e8 dovuta al fatto che per molto tempo JavaScript non ha avuto una maniera ufficiale di importare \/ esportare moduli di codice.  <\/p>\n\n\n\n
APF supporta tutti gli strumenti di sviluppo e workflow pi\u00f9 comunemente usati ponendo enfasi sulle ottimizzazioni (dimensioni pi\u00f9 piccole delle applicazioni e tempi di compilazione pi\u00f9 ridotti). A questo<\/a> indirizzo trovate le specifiche, mentre nell\u2019immagine seguente trovate uno stralcio del pacchetto @angular\/core. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Angular Dev Tools<\/h1>\n\n\n\n
Sullo store<\/a> Chrome Web \u00e8 disponibile una estensione del browser Chrome che offre agli sviluppatori Angular nuovi strumenti sia per il debug che per il profiling delle applicazioni. Dopo l\u2019installazione diventa disponibile un tab chiamato Angular nei Chrome Dev Tools <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
L\u2019 estensione presenta a sua volta due tab aggiuntivi: Components e Profiler. Il primo consente di esplorare le componenti e direttive, vederne un\u2019anticipazione o modificare lo stato. Il secondo offre uno sguardo sull\u2019esecuzione della change detection di Angular. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Nell\u2019immagine, \u00e8 possibile vedere una sequenza di barre, ciascuna delle quali simboleggia i cicli della change detection. Pi\u00f9 alta \u00e8 una barra, pi\u00f9 lungo \u00e8 il tempo speso in quel ciclo. Ogni barra ha un dettaglio che mostra anche la gerarchia dei genitori delle direttive selezionate. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Testing in Angular<\/h1>\n\n\n\n
Protractor<\/a> \u00e8 un framework per il test end-to-end in applicazioni Angular. Il suo futuro \u00e8 incerto e a partire dalla versione 12 non \u00e8 pi\u00f9 incluso nei nuovi progetti. L\u2019idea \u00e8 fornire supporto a soluzioni di terze parti come Cypress, WebdriverIO e TestCafe.<\/p>\n\n\n\n
Rimanendo nell\u2019ambito dei test, ricordiamo che Angular offre nei suoi progetti Jasmine<\/a>, un framework JavaScript per la scrittura ed esecuzione di unit ed integration test. Esiste una guida<\/a> ufficiale e completa su come il team di Angular pensa che debbano essere testati componenti, moduli, servizi, pipe e direttive. Vi rimandiamo anche a un articolo<\/a> del nostro Adolfo per una discussione introduttiva sull\u2019argomento. <\/p>\n\n\n\n
Nella versione 13 di Angular sono stati introdotti miglioramenti alla classe TestBed che impattano sul consumo di memoria e sulla velocit\u00e0 di esecuzione di ogni test eseguito. Il dettaglio \u00e8 descritto nella seguente serie di articoli<\/a>. <\/p>\n\n\n\n
Nullish Coalescing <\/h1>\n\n\n\n
L\u2019operatore ?? che da molto tempo \u00e8 utilizzato dagli sviluppatori TypeScript \u00e8 stato messo a disposizione anche nei template Angular a partire dalla versione 12. Quindi mentre finora era necessario scrivere codice come il seguente nei template: <\/p>\n\n\n\n
{{age !== null && age !== undefined ? age : calculateAge() }} <\/pre>\n\n\n\n
ora \u00e8 possible invece scrivere con ovvio beneficio  <\/p>\n\n\n\n
{{ age ?? calculateAge() }} <\/pre>\n\n\n\n
Creazione dinamica dei componenti<\/h1>\n\n\n\n
Ivy offre dei vantaggi agli sviluppatori anche in fase di scrittura del codice. A partire dalla versione 13 \u00e8 stata semplificata l\u2019API per la creazione dinamica di un componente (in questo articolo<\/a> avevo introdotto il problema). Non \u00e8 pi\u00f9 necessaria l\u2019iniezione di ComponentFactoryResolver e quindi un componente pu\u00f2 essere instanziato con ViewContainerRef.createComponent senza dover creare una factory associata. Quindi, con la nuova API, possiamo scrivere ad esempio <\/p>\n\n\n\n
@Directive({ \u2026 }) \nexport class MyDirective { \n    constructor(private viewContainerRef: ViewContainerRef) {} \n    createMyComponent() { \n        this.viewContainerRef.createComponent(MyComponent); \n    } \n} <\/pre>\n\n\n\n
Addio IE11 <\/h1>\n\n\n\n
IE11 \u00e8 stato definitivamente abbandonato. La rimozione permette ad Angular non solo di sfruttare le funzionalit\u00e0 dei moderni browser (ad esempio le variabili CSS e le web animation) ma anche di produrre applicazioni pi\u00f9 piccole e veloci a causa della rimozione dei polyfills specifici di Internet Explorer. <\/p>\n\n\n\n
La ng CLI <\/h1>\n\n\n\n
Il comando ng build, a partire dalla versione 12, funziona di default su production. Inoltre la CLI ha abilitato di default lo strict mode, che permette di scoprire errori sin dalle prime fasi di sviluppo. Qui<\/a> troverete il dettaglio su questa modalit\u00e0.  <\/p>\n\n\n\n
Anche il language service \u00e8 stato spostato di default ad uno basato su Ivy. Di cosa si tratta? Stiamo parlando del servizio utilizzato dagli editor e IDE per il controllo degli errori e l\u2019 autocompletamento delle istruzioni. La CLI ora supporta l\u2019uso di una cache di build persistente. Grazie ad essa si ha un miglioramento del 68% nella velocit\u00e0 di build. Questa configurazione (descritta nel dettaglio qui<\/a>) \u00e8 inserita all\u2019interno del file angular.json <\/p>\n\n\n\n
{ \n    \"$schema\": \"...\", \n    \"cli\": { \n        \"cache\": { \n            \"enabled\": true, \n            \"path\": \".cache\", \n            \"environment\": \"all\" \n        } \n    } \n    ... \n} <\/pre>\n\n\n\n
Aggiornamento delle dipendenze<\/h1>\n\n\n\n
Quando creiamo una nuova app col comando ng new utilizziamo adesso la versione 7.4 di RxJS.  La libreria delle estensioni reattive di JavaScript \u00e8 usata praticamente ovunque in Angular e quindi stiamo parlando di una dipendenza assolutamente fondamentale. <\/p>\n\n\n\n
RxJs 7 \u00e8 pi\u00f9 piccolo di RxJs 6: passiamo quindi da 52 KB a soli 19KB. E\u2019 stato fatto un importante refactor del codice. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
L\u2019operatore toPromise \u00e8 stato deprecato e verr\u00e0 completamente rimosso nella versione 8. Al suo posto sono stati introdotti firstValueFrom() e lastValueFrom(). L\u2019operatore firstValueFrom() risolve la promise sul primo valore di un observable prima di eseguire l\u2019unsubscribe. L\u2019operatore lastValueFrom, invece, aspetta l\u2019ultimo valore prima di risolvere la promise. Quindi, mentre in passato avevamo che <\/p>\n\n\n\n
const numbers$ = of(1,2,3,4,5) \n\/\/ toPromise() will return the last value of the observable \nnumbers$.toPromise().then(n => console.log(\"toPromise(): \" + n)) <\/pre>\n\n\n\n
adesso possiamo scegliere <\/p>\n\n\n\n
\/\/ lastValueFrom() will return the last value just like to promise \nlastValueFrom(numbers$).then(n => console.log(\"lastValueFrom(): \" + n)) \n\n \/\/ firstValueFrom() will return the first value of the observable \nfirstValueFrom(numbers$).then(n => console.log(\"firstValueFrom(): \" + n))  <\/pre>\n\n\n\n
Attenzione che diversi operatori sono stati rinominati (ad esempio zip \u00e8 diventato zipWith), altri deprecati e nuovi aggiunti. Qui<\/a> troverete il dettaglio. <\/p>\n\n\n\n
<\/p>\n\n\n\n
E il futuro? <\/strong><\/h1>\n\n\n\n
Sono due le principali richieste fatte dagli utenti e che sono in fase di elaborazione da parte del team di Angular. La roadmap ufficiale \u00e8 presente al seguente indirizzo<\/a>. <\/p>\n\n\n\n
La prima \u00e8 quella dei Strictly Typed Reactive Form (qui<\/a> troverete la RFC ufficiale). Prendiamo ad esempio un form, popolato con un valore default. <\/p>\n\n\n\n
const partyForm = new FormGroup({ \n  address: new FormGroup({\n                  house: new FormControl(1234), \n                  street: new FormControl('Powell St')}), \n                  formal: new FormControl(false), \n                  foodOptions: new FormArray([]) \n}); <\/pre>\n\n\n\n
Quando proviamo ad interagire col form e leggere i suoi elementi, ci troviamo frequentemente ad avere dei valori di tipo any. <\/p>\n\n\n\n
const partyDetails = partyForm.getRawValue(); \/\/ type `any` \nconst where = partyForm.get('address.street')!.value; \/\/ type `any` \npartyForm.controls.formal.setValue(true); \/\/ param has type `any` <\/pre>\n\n\n\n
Immaginiamo di avere un type corrispondente:<\/p>\n\n\n\n
type Party = { \n  address: { \n      house: number,   \n      street: string, \n  }, \n  formal: boolean, \n  foodOptions: Array<{ \n    food: string, \n    price: number, \n  }> \n} <\/pre>\n\n\n\n
Con la proposta in fase di pubblicazione avremo che gli elementi del form sono completamenti tipizzati. Ad esempio: <\/p>\n\n\n\n
const partyDetails = partyForm.getRawValue(); \/\/ a `Party` object \nconst where = partyForm.get('address.street')!.value; \/\/ type `string` \npartyForm.controls.formal.setValue(true); \/\/ param has type `boolean` <\/pre>\n\n\n\n
La seconda richiesta \u00e8 pi\u00f9 radicale (qui<\/a> ne trovate il dettaglio): rendere i moduli opzionali. <\/p>\n\n\n\n
Gli NgModule sono il concetto base di una applicazione Angular. Persino un\u2019app Hello World<\/em> ne ha bisogno di uno per la sua esecuzione. I moduli sono l\u2019unit\u00e0 di riutilizzo, le librerie sono moduli, il lazy-loading \u00e8 basato sui moduli (qui<\/a> ne parla sempre il nostro Adolfo).  <\/p>\n\n\n\n
Poco prima, per\u00f2, abbiamo parlato della creazione dinamica di un\u2019istanza di un componente. Tale funzionalit\u00e0 nasconde delle insidie e non \u00e8 detto che a runtime funzioni correttamente. Un componente pu\u00f2 aspettarsi che all\u2019invocazione del suo costruttore venga passato un servizio. Tipicamente \u00e8 un modulo che garantisce che ci\u00f2 avvenga correttamente ma se istanzio direttamente un componente rischio di non avere il provider necessario a runtime. Quindi, se ci pensate (ed \u00e8 l\u2019unico esempio nella scena dei framework web), i componenti hanno bisogno dei moduli che sono quindi il blocco pi\u00f9 piccolo di codice riutilizzabile. <\/p>\n\n\n\n
Nelle prossime versioni di Angular potremo scegliere se utilizzare o meno gli NgModule. Uno standalone component (o pipe o directive) non sar\u00e0 dichiarato in alcun modulo e gestir\u00e0 autonomamente le proprie dipendenze e potr\u00e0 essere usato direttamente senza aver bisogno di un NgModule intermedio. Ecco un semplice esempio: <\/p>\n\n\n\n
import {Component} from '@angular\/core'; \n@Component({ \n  standalone: true,   \n  template: `I'm a standalone component!` \n}) \nexport class HelloStandaloneComponent {} <\/pre>\n\n\n\n
Come gestiremo le dipendenze? Verr\u00e0 aggiunta una propriet\u00e0 imports all\u2019interno del decoratore @Component dove andremo a specificare le dipendenze presenti nel template <\/p>\n\n\n\n
import {Component} from '@angular\/core'; \nimport {FooComponent, BarDirective, BazPipe} from '.\/template-deps'; \n\n @Component({ \n  standalone: true, \n  imports: [FooComponent, BarDirective, BazPipe], \n  template: ` \n    <foo-cmp><\/foo-cmp> \n    <div bar>{{expr | baz}}<\/div> \n  ` \n}) \nexport class ExampleStandaloneComponent {} <\/pre>\n\n\n\n
Conclusioni <\/h1>\n\n\n\n
Il team di Angular ha quindi accettato la sfida di provare a fornire, a chi voglia utilizzarlo, una strada alternativa rispetto a quanto visto finora.  Nel frattempo, TypeScript e RxJS continuano a renderlo un framework estremamente solido per lo sviluppo di soluzioni front-end. Sono queste le uniche dipendenze imprescindibili del framework e ci\u00f2 fa s\u00ec che i team di sviluppo non accumulino debito tecnico seguendo librerie di terze parti anche per problemi comuni quali la gestione dei form o delle chiamate HTTP. TypeScript ormai \u00e8 utilizzato anche nell\u2019ecosistema React. RxJS, invece, resta lo scoglio teorico pi\u00f9 difficile da superare per un team che inizi ad utilizzare Angular, ma, a mio modo di vedere, \u00e8 il vero valore aggiunto di questo framework. <\/p>\n\n\n\n
Alla prossima.<\/p>\n\n\n","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false},"categories":[688637374],"tags":[688637387],"class_list":["post-33622","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-angular"],"yoast_head":"\nAngular: presente e futuro - Blexin<\/title>\n<meta name=\"description\" content=\"Facciamo il punto sullo stato attuale di Angular e su quale possa essere il futuro di questo framework\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular: presente e futuro - Blexin\" \/>\n<meta property=\"og:description\" content=\"Facciamo il punto sullo stato attuale di Angular e su quale possa essere il futuro di questo framework\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-28T07:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-28T07:21:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blexin.com\/wp-content\/uploads\/2022\/03\/14_ITA_1105x656_blog-angular13.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1105\" \/>\n\t<meta property=\"og:image:height\" content=\"656\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salvatore Sorrentino\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salvatore Sorrentino\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/\"},\"author\":{\"name\":\"Salvatore Sorrentino\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\"},\"headline\":\"Angular: presente e futuro\",\"datePublished\":\"2022-03-28T07:00:00+00:00\",\"dateModified\":\"2022-03-28T07:21:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/\"},\"wordCount\":1602,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/14_ITA_1105x656_blog-angular13.png?fit=1105%2C656&ssl=1\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/\",\"name\":\"Angular: presente e futuro - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/14_ITA_1105x656_blog-angular13.png?fit=1105%2C656&ssl=1\",\"datePublished\":\"2022-03-28T07:00:00+00:00\",\"dateModified\":\"2022-03-28T07:21:44+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\"},\"description\":\"Facciamo il punto sullo stato attuale di Angular e su quale possa essere il futuro di questo framework\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/14_ITA_1105x656_blog-angular13.png?fit=1105%2C656&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/14_ITA_1105x656_blog-angular13.png?fit=1105%2C656&ssl=1\",\"width\":1105,\"height\":656},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-presente-e-futuro\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular: presente e futuro\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\",\"name\":\"Salvatore Sorrentino\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g\",\"caption\":\"Salvatore Sorrentino\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/salvatore-sorrentinoblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular: presente e futuro - Blexin","description":"Facciamo il punto sullo stato attuale di Angular e su quale possa essere il futuro di questo framework","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/","og_locale":"it_IT","og_type":"article","og_title":"Angular: presente e futuro - Blexin","og_description":"Facciamo il punto sullo stato attuale di Angular e su quale possa essere il futuro di questo framework","og_url":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/","og_site_name":"Blexin","article_published_time":"2022-03-28T07:00:00+00:00","article_modified_time":"2022-03-28T07:21:44+00:00","og_image":[{"width":1105,"height":656,"url":"https:\/\/blexin.com\/wp-content\/uploads\/2022\/03\/14_ITA_1105x656_blog-angular13.png","type":"image\/png"}],"author":"Salvatore Sorrentino","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Salvatore Sorrentino","Tempo di lettura stimato":"12 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/"},"author":{"name":"Salvatore Sorrentino","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed"},"headline":"Angular: presente e futuro","datePublished":"2022-03-28T07:00:00+00:00","dateModified":"2022-03-28T07:21:44+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/"},"wordCount":1602,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2022\/03\/14_ITA_1105x656_blog-angular13.png?fit=1105%2C656&ssl=1","keywords":["Angular"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/","url":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/","name":"Angular: presente e futuro - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2022\/03\/14_ITA_1105x656_blog-angular13.png?fit=1105%2C656&ssl=1","datePublished":"2022-03-28T07:00:00+00:00","dateModified":"2022-03-28T07:21:44+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed"},"description":"Facciamo il punto sullo stato attuale di Angular e su quale possa essere il futuro di questo framework","breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2022\/03\/14_ITA_1105x656_blog-angular13.png?fit=1105%2C656&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2022\/03\/14_ITA_1105x656_blog-angular13.png?fit=1105%2C656&ssl=1","width":1105,"height":656},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/angular-presente-e-futuro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Angular: presente e futuro"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed","name":"Salvatore Sorrentino","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g","caption":"Salvatore Sorrentino"},"url":"https:\/\/blexin.com\/it\/author\/salvatore-sorrentinoblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2022\/03\/14_ITA_1105x656_blog-angular13.png?fit=1105%2C656&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-8Ki","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/33622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716245"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=33622"}],"version-history":[{"count":46,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/33622\/revisions"}],"predecessor-version":[{"id":33709,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/33622\/revisions\/33709"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/33698"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=33622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=33622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=33622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}