- \n
- Cos’\u00e8 IVY?<\/a><\/li>\n
- Come funziona Ivy?<\/a><\/li>\n
- Caratteristiche principali di Angular Ivy<\/a><\/li>\n
- Perch\u00e9 usare l’edera?<\/a><\/li>\n
- Aggiornamento ad Angular 9 con Ivy<\/a><\/li>\n
- Caratteristiche di IVY in Angular 18<\/a><\/li>\n
- Il futuro di Angular con Ivy<\/a><\/li>\n<\/ul>\n
Cos’\u00e8 IVY?<\/h2>\n
IVY \u00e8 un motore di sviluppo potente e adattabile, progettato per semplificare lo sviluppo e la distribuzione di applicazioni moderne. IVY \u00e8 rinomato per le sue funzionalit\u00e0 all’avanguardia e le sue elevate prestazioni, e offre agli sviluppatori una gamma completa di strumenti e funzionalit\u00e0 che aumentano l’efficienza e la produttivit\u00e0. IVY \u00e8 un framework versatile e scalabile che si adatta alle esigenze di ogni progetto, sia che si tratti di sviluppare sistemi software complessi, app per dispositivi mobili o applicazioni online.<\/p>\n
Le tecniche di ottimizzazione avanzate di IVY garantiscono velocit\u00e0 eccellente e bassa latenza, mentre la sua architettura modulare facilita l’integrazione perfetta con diverse tecnologie e piattaforme. Inoltre, \u00e8 rinomato per la sua interfaccia intuitiva e l’ampia documentazione, che ne consentono l’utilizzo sia agli sviluppatori principianti che a quelli esperti. IVY, che attribuisce grande importanza alla sicurezza e all’affidabilit\u00e0, offre agli sviluppatori la sicurezza necessaria per creare soluzioni innovative che plasmeranno il futuro delle esperienze digitali. <\/p>\n
![\"rendering-pipeline-angular.png\"](\"\/Posts\/files\/rendering-pipeline-angular_637819012887962561.png\")
<\/p>\nCome funziona Ivy?<\/h2>\n
Per la versione pi\u00f9 recente della pipeline di compilazione e rendering di Angular, il nome in codice \u00e8 Ivy. La versione 9 di Angular introduce la nuova metodologia di compilazione e runtime implementata di default, in sostituzione della precedente, View Engine.<\/p>\n
Il motore di rendering esistente, Ivy, \u00e8 utilizzato ovunque ed \u00e8 stato recentemente migliorato e ottimizzato. Nel complesso, ci\u00f2 autorizza la modernizzazione dell’Angular Package Format (APF), un uso limitato del compilatore di compatibilit\u00e0 ngcc e la semplificazione dell’API dei componenti. Assumete sviluppatori di app mobile<\/a> in grado di utilizzare l’ultima versione e integrare i componenti di Ivy.<\/p>\n
Ivy \u00e8 una riscrittura completa del motore di rendering di Angular, la quarta e la terza a partire da Angular 2. A differenza delle riscritture numero due e tre, Ivy promette enormi miglioramenti per la tua applicazione. Con Ivy, puoi compilare i componenti in modo pi\u00f9 indipendente l’uno dall’altro.<\/p>\n
Ci\u00f2 migliorer\u00e0 i tempi di sviluppo, poich\u00e9 la ricompilazione di un’applicazione comporter\u00e0 solo la compilazione dei componenti modificati.<\/p>\n
Caratteristiche principali di Angular Ivy<\/h2>\n
Angular Ivy modifica il funzionamento interno delle cose senza apportare modifiche alle applicazioni.<\/p>\n
Il motore di rendering pi\u00f9 avanzato offre le seguenti funzionalit\u00e0:<\/p>\n
- \n
- Dimensioni del pacchetto pi\u00f9 piccole<\/li>\n
- Compilazioni pi\u00f9 veloci<\/li>\n
- Debug migliore<\/li>\n
- DOM incrementale<\/li>\n
- Controllo avanzato dei tipi di modello<\/li>\n
- Caratteristiche opzionali dell’edera<\/li>\n<\/ul>\n
Perch\u00e9 usare l’edera?<\/h2>\n
Molti di noi dimenticano che l’HTML non raggiunge mai direttamente il browser. Angular compila l’HTML in istruzioni JavaScript per generare il DOM corretto quando il componente appare sulla pagina. Successivamente, aggiorna il componente quando il suo stato cambia. Quindi, una parte fondamentale di Angular \u00e8 il suo compilatore, che prende tutto l’HTML e genera il codice JavaScript necessario.<\/p>\n
Questo compilatore e il runtime sono stati completamente riscritti nell’ultimo anno, e tutto questo grazie a Ivy. Angular \u00e8 un ottimo framework che ottiene lo stesso risultato di HTML con Ivy grazie a una riscrittura completa del compilatore per:<\/p>\n
- \n
- Ottieni tempi di compilazione migliori.<\/li>\n
- Raggiungi dimensioni di costruzione migliori.<\/li>\n
- Sblocca nuove potenziali funzionalit\u00e0 come la metaprogrammazione o i componenti di ordine superiore, un sistema di rilevamento delle modifiche recenti non basato su zone.js e altro ancora.<\/li>\n<\/ul>\n
Ora, il “perch\u00e9” di IVY ha due risposte principali:<\/p>\n
- \n
- Per localit\u00e0<\/li>\n<\/ul>\n
In questo contesto, “localit\u00e0” si riferisce a un principio seguito da Ivy. L’idea alla base di questo principio \u00e8 quella di compilare un file alla volta.<\/p>\n
Ed \u00e8 stato proprio qui, sottolineando “solo uno”, perch\u00e9 “solo uno” significa un solo file componente e il suo modello, senza altre dipendenze, il che render\u00e0 il processo di compilazione molto pi\u00f9 veloce e semplice. In precedenza, era impossibile bilanciare il codice da inviare al compilatore AoT, ma ora si creer\u00e0 un equilibrio tra AoT e JiT.<\/p>\n
- \n
- Per scuotere gli alberi<\/li>\n<\/ul>\n
La tecnica di Tree Shaking di Ivy viene utilizzata per creare ottimizzazioni che garantiscono che il codice inefficiente non venga incluso nel pacchetto finale durante il processo di compilazione dell’applicazione. Pertanto, gli sviluppatori non devono inviare l’intero codice del framework. \u00c8 possibile farlo solo con le funzionalit\u00e0 utilizzate nello sviluppo dell’app. Il principale vantaggio del Tree Shaking per l’ottimizzazione \u00e8 la riduzione dei tempi di avvio.<\/p>\n
Aggiornamento ad Angular 9 con Ivy<\/h2>\n
Aggiornamento a Ivy per la versione Angular 9<\/p>\n
Per iniziare, installa Angular CLI v9. Nel tuo terminale, esegui il comando seguente.<\/p>\n
npm install -g @angular\/cli@9.0.1<\/a><\/p>\n
A seconda del sistema, gli sviluppatori potrebbero dover eseguire questo comando con i privilegi di superutente (sudo).<\/p>\n
Prima di aggiornare l’app ad Angular 9, \u00e8 necessario aggiornarla alla versione avanzata Angular 8. Per fare ci\u00f2, apri il terminale nella directory principale dell’app Tic-Tac-Toe ed esegui il comando di aggiornamento come segue.<\/p>\n
ng aggiornamento @angular\/core@8 @angular\/cli@8<\/p>\n
Prima di riavviare, dovrai installare tutte le dipendenze dei pacchetti modificati e confermare le modifiche su git.<\/p>\n
Eseguire i due comandi seguenti.<\/p>\n
npm installgit commit -a -m “Aggiorna alla versione pi\u00f9 recente di Angular 8”<\/p>\n
Ora puoi aggiornare ad Angular 9 eseguendo nuovamente ng update con argomenti diversi.<\/p>\n
ng aggiornamento @angular\/core @angular\/cli –next<\/p>\n
Questa operazione potrebbe richiedere alcuni minuti. Dopodich\u00e9, sar\u00e0 necessario reinstallare tutte le dipendenze dei pacchetti modificati, salvare e confermare tutto su Git.<\/p>\n
npm installgit commit -a -m “Aggiornamento ad Angular 9”<\/p>\n
Ora, aggiorna le librerie di Angular Material alla loro versione pi\u00f9 recente.<\/p>\n
ng aggiornamento @angular\/material –next<\/p>\n
Potresti ricevere un errore relativo ad Angular Flex-Layout:<\/p>\n
Il pacchetto “@angular\/flex-layout” ha una dipendenza peer incompatibile con “@angular\/cdk” (richiede “^8.0.0-rc.0”, installerebbe “9.0.0”). Sono state rilevate dipendenze peer incoerenti.<\/p>\n
Aggiungi –a force al codice precedente per aggirare il problema.<\/p>\n
ng aggiornamento @angular\/material –next –force<\/p>\n
Aggiorna Angular Flex-Layout alla versione pi\u00f9 recente:<\/p>\n
npm i @angular\/flex-layout@9.0.0-beta.29<\/a><\/p>\n
Caratteristiche di IVY in Angular 18<\/h2>\n
- \n
- Componenti caricati in modo differito<\/strong><\/li>\n<\/ul>\n
I comandi entryComponents sono deprecati in quanto non pi\u00f9 necessari. Qualsiasi funzionalit\u00e0 di Ivy pu\u00f2 essere caricata in modo differito (lazy loading) e renderizzata dinamicamente. Ci\u00f2 dimostra che, senza routing o moduli Angular, gli sviluppatori possono ora caricare e renderizzare facilmente un componente.<\/p>\n
Tuttavia, nella pratica, le aziende di sviluppo di app per dispositivi mobili devono utilizzare moduli di rendering dei componenti per collegare il template di un componente alle sue dipendenze dichiarabili. In questo caso, le librerie utilizzate solo da un componente caricato in modo differito vengono incapsulate in blocchi caricati in modo differito.<\/p>\n
- \n
- Globalizzazione<\/strong><\/li>\n<\/ul>\n
Per la globalizzazione, le impostazioni locali comprendono la formattazione dei dati, la formattazione dei numeri e altre impostazioni regionali simili che possono essere caricate dinamicamente in fase di esecuzione. Vengono caricate direttamente in fase di esecuzione e non vengono registrate in fase di compilazione.<\/p>\n
- \n
- Migliore rimozione delle gemme e gestione degli errori<\/strong><\/li>\n<\/ul>\n
Con Angular 18, Ivy offre messaggi di errore ancora pi\u00f9 dettagliati e utili, facilitando agli sviluppatori la diagnosi e la risoluzione dei problemi. Le tracce dello stack e la segnalazione degli errori migliorate ottimizzano l’esperienza di debug complessiva.<\/p>\n
- \n
- Raccolta di AOT ovunque<\/strong><\/li>\n<\/ul>\n
![\"aot-compilation.png\"](\"\/Posts\/files\/aot-compilation_637819012893308501.png\")
<\/strong><\/p>\nPer il server di sviluppo e persino per i test, la compilazione AOT \u00e8 ora abilitata di default. Inizialmente, la compilazione AOT era considerevolmente pi\u00f9 lenta rispetto alla compilazione JIT, quindi quest’ultima veniva utilizzata appositamente per lo sviluppo e il test dell’applicazione.<\/p>\n
Grazie all’utilizzo dei processi di compilazione e ricostruzione di Angular Ivy, la compilazione AOT offre attualmente un’ottima esperienza di sviluppo.<\/p>\n
Quando la compilazione JIT veniva utilizzata in fasi e la compilazione AOT solo nella build finale, i bug venivano rilevati durante le build di produzione o in fase di esecuzione. Con un’azienda specializzata nello sviluppo di app mobile<\/a> Angular, \u00e8 possibile aggiungere la compilazione AOT insieme ad altre funzionalit\u00e0 di Ivy da integrare nella propria applicazione.<\/p>\n
- \n
- Compatibilit\u00e0 con le versioni precedenti<\/strong><\/li>\n<\/ul>\n
Ivy in Angular 18 \u00e8 progettato per essere completamente retrocompatibile con le versioni precedenti di Angular. Ci\u00f2 consente agli sviluppatori di aggiornare le proprie applicazioni senza dover effettuare importanti refactoring, garantendo una transizione fluida all’ultima versione.<\/p>\n
- \n
- Sostituzione del modulo a caldo (HMR) pi\u00f9 rapida e precisa<\/strong><\/li>\n<\/ul>\n
Con Ivy, Angular 18 migliora la funzionalit\u00e0 Hot Module Replacement, consentendo agli sviluppatori di visualizzare le modifiche in tempo reale senza dover ricaricare l’intera applicazione. Ci\u00f2 velocizza il processo di sviluppo e offre un’esperienza di sviluppo pi\u00f9 fluida.<\/p>\n
- Sostituzione del modulo a caldo (HMR) pi\u00f9 rapida e precisa<\/strong><\/li>\n<\/ul>\n
- Compatibilit\u00e0 con le versioni precedenti<\/strong><\/li>\n<\/ul>\n
- Raccolta di AOT ovunque<\/strong><\/li>\n<\/ul>\n
- Migliore rimozione delle gemme e gestione degli errori<\/strong><\/li>\n<\/ul>\n
- Globalizzazione<\/strong><\/li>\n<\/ul>\n
- Componenti caricati in modo differito<\/strong><\/li>\n<\/ul>\n
- Per scuotere gli alberi<\/li>\n<\/ul>\n
- Per localit\u00e0<\/li>\n<\/ul>\n
- Come funziona Ivy?<\/a><\/li>\n
![\"Contattaci](\"\/Posts\/files\/contact-us-angular-app-developers_637819012894942218.png\")
<\/a><\/p>\n