![Ivy
Ivy Pipeline - Angular Interpreter
//<span>My name is {{name}}</span>:
viewDef(0,[
elementDef(0,null,null,1,'span',...),
textDef(null,['My name is',...])
]
16 . 11](https://image.slidesharecdn.com/acadevmy-angularday2018-191030224450/85/Acadevmy-AngularDay-2018-Change-Detection-Zone-js-ed-altri-mostri-82-320.jpg)
![Ivy
Ivy Pipeline - Incremental DOM (custom) - Component Definition
const componentDefinition = { // ngComponentDef
type: MyApp,
selectors: [['my-app']],
>>> template: (rf: RenderFlags, ctx: MyApp) => {
if (rf & RenderFlags.Create) {
elementStart(0, 'span');
elementEnd();
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'name', bind(ctx.name));
}
},
factory: () => new MyApp()
}
16 . 15](https://image.slidesharecdn.com/acadevmy-angularday2018-191030224450/85/Acadevmy-AngularDay-2018-Change-Detection-Zone-js-ed-altri-mostri-86-320.jpg)
More Related Content
What's hot (20)
Similar to Acadevmy - AngularDay 2018 - Change Detection, Zone.js ed altri mostri (20)
More from Francesco Sciuti (6)
Acadevmy - AngularDay 2018 - Change Detection, Zone.js ed altri mostri
- 1. Angular Day 2018 Change Detection, Zone.js ed altri mostri 15/06/2018 | Hotel San Marco - Verona Francesco Sciuti www.acadevmy.it | info@acadevmy.it | francesco@acadevmy.it 1
- 2. Cosa facciamo Web Mobile DevOps Labs Formazione 2
- 4. Chi Sono? Developer per scelta e per passione, amante di nerdaggini di ogni tipo ed amante della condivisione del sapere! 4 . 1
- 5. Cosa mi piace? 4 . 2
- 6. Come gestire l'imbarazzo da talk? passiamo quindi all'argomento di oggi... 5
- 7. ...ho promesso di parlarvi delle strane creature che popolano il nostro mondo di... Supereroi! sviluppatori Angular! 6
- 8. Ma di che mostri parleremo? Change Detection Un losco osservatore che se stressato ci metter i bastoni tra le ruote Zone.js Uno strano intercettatore che nota tutto quello che facciamo e che ne prende la forma e chiss cos'altro... 7
- 9. Quali sono le ragioni per la quali usiamo i framework? Sono pensati per realizzare SPA Sono basati su componenti Offrono ottimi strumenti di debug Ruotano attorno ad essi ottimi ecosistemi Risolvono i problemi pi湛 comuni dello sviluppo 8
- 10. ma la ragione principale 竪 che... Mantengono la UI sincronizzata con lo stato dell'applicazione 9
- 11. Definiamo la UI e, senza particolare sforzo, otteniamo ad ogni azione (che la necessita) un aggiornamento automatico tra UI e stato dell'applicazione Lo stato dellapplicazione 竪 linsieme delle informazioni che determinano loutput in corrispondenza di un dato input in uno specifico istante 10
- 12. Possiamo pensare al processo di rendering delle modifiche dello stato come alla proiezione del modello di dati sull'interfaccia utente, ottenendo la rappresentazione (DOM >> HTML) di tali dati. Le cose diventano pi湛 difficili quando i dati cambiano nel tempo... 11
- 13. Con gli anni sono state trovate svariate soluzioni: Server-Side Rendering Manual Re-rendering Backbone, ExtJS, Dojo Data Binding Ember Dirty Checking AngularJS, Angular (?) Virtual DOM React Immutable Data Structures React, Angular (?) 12
- 14. 60fps ci嘆 che tutti desidereremmo per la nostra applicazione, ma per ottenerlo l'intero ciclo di rendering va completato in meno di 17 ms! 13
- 15. Change Detection Per svolgere il suo lavoro 竪 stato trasformato in un mostro, ma dentro di lui vive ancora una parte sana 14 . 1
- 16. Change Detection il meccanismo per il rilevamento delle modifiche. Consiste nell'eseguire controlli tra due stati, lo stato corrente ed il nuovo stato Come scopo finale ha il compito di notificare al browser eventuali modifiche del DOM, necessarie per aggiornare la vista quando i dati sono cambiati 14 . 2
- 17. Change Detection Angular esegue il codice applicativo (a) durante il rilevamento modifiche (b) e notifica al browser eventuali aggiornamenti DOM necessari. Il browser aggiorna la vista (c) 14 . 3
- 18. Change Detection Angular divide l'aggiornamento del modello dell'applicazione e riflette lo stato del modello nella vista in due fasi distinte: Lo sviluppatore 竪 responsabile dell'aggiornamento dello stato dell'applicazione Angular, mediante change detection, 竪 responsabile della proiezione dello stato nella vista 14 . 4
- 19. Change Detection Ogni applicazione 竪 un insieme di componenti correlati insieme (da Input ed Output) per essere in grado di propagare dati (stato dell'applicazione) La tua applicazione 竪 strutturata in ci嘆 che chiamiamo un albero di componenti 14 . 5
- 20. Change Detection Unidirectional Data Flow 14 . 6
- 21. Change Detection Unidirectional Data Flow Lo sviluppatore apporta modifiche al modello (stato) Change Detection interviene per propagare le modifiche Change Detection passa attraverso tutti i componenti nell'albero dei componenti (dall'alto verso il basso) per verificare se esistono cambiamenti Se 竪 il caso, aggiorna il componente Esegue l'update della view del componente (DOM) 14 . 7
- 22. Change Detection Unidirectional Data Flow Change Detection Graph 竪 un albero diretto Diventa stabile dopo il primo passaggio prevedibile performante 14 . 8
- 23. Change Detection Ma allora cosa non va? Se l'albero dei componenti cresce troppo... Immagina la tua app un po' come questa immagine di repertorio di Gotham! 14 . 9
- 24. Change Detection Unidirectional Data Flow Come possiamo riportarlo sulla retta via? ...che domande...chiamo Batman! 14 . 10
- 25. Change Detection Unidirectional Data Flow ...dopo essermi reso conto che ha da fare mi ridomando... Come possiamo riportarlo sulla retta via? Conoscerlo un po' pi湛 a fondo Strategie (Default, onPush) ChangeDetectorRef Best Practice 14 . 11
- 26. Change Detection Conoscerlo un po' pi湛 a fondo Il flusso 竪 sempre dal componente radice verso i nodi pi湛 profondi Non esiste un ciclo di rilevamento globale. Ogni componente gestisce il proprio rilevamento dei cambiamenti Possiamo utilizzare diverse strategie di rilevamento dei cambiamenti per ogni singolo componente 14 . 12
- 27. Change Detection Le Strategie Per sapere se la vista deve essere aggiornata Angular deve accedere al nuovo valore, confrontarlo con quello vecchio e decidere se la vista deve essere aggiornata 14 . 13
- 28. Change Detection Conoscerlo un po' pi湛 a fondo Cosa causa i cambiamenti? Eventi nell'interfaccia - click, scroll, submit, ... Richieste Ajax (XHR) - Fetching data da server remoti Esecuzioni all'interno di timer - setTimeout(), setInterval() 14 . 14
- 29. Change Detection Conoscerlo un po' pi湛 a fondo La Change Detection 竪 eseguita sulla View (ViewRef) Per Angular, la View 竪 il blocco fondamentale della Application UI 14 . 15
- 30. Change Detection Conoscerlo un po' pi湛 a fondo La View possiede uno stato e memorizza attraverso nodes le referenze al DOM. Il property checks e l'update del DOM avvengono sotto il cofano per mezzo delle Views 14 . 16
- 31. Change Detection Conoscerlo un po' pi湛 a fondo Le operazioni chiave eseguite dal rilevamento delle modifiche sono le seguenti: Update delle child components properties Chiamare gli hooks NgDoCheck e NgOnChanges dei child components Update del DOM del componente corrente Avviare Change Detection per i child components ng.profiler.timeChangeDetection(); 14 . 17
- 32. Change Detection Conoscerlo un po' pi湛 a fondo La logica portante per la Change Detection risiede sul metodo checkAndUpdateView 14 . 18
- 33. Change Detection Le Strategie - ChangeDetectionStrategy.Default Ogni volta che qualcosa cambia nella nostra applicazione (come risultato di vari eventi utente, timer, XHR, promise, ecc.), la strategia predefinita esegue un rilevamento delle modifiche su tutti i componenti. Questa tecnica 竪 chiamata dirty check. Per sapere se la vista deve essere aggiornata, Angular deve accedere al nuovo valore, confrontarlo con quello vecchio e decidere se la vista deve essere aggiornata. 14 . 19
- 34. Change Detection Le Strategie - ChangeDetectionStrategy.Default Se scegliamo di adottare la strategia di default, 竪 consigliabile seguire alcuni suggerimenti: Eseguiamo qualsiasi evento ad alta frequenza fuori dalla Zona Evitate il pi湛 possibile richieste onerose direttamente collegate alla vista (memoize) Eseguiamo Change Detection solo su richiesta 14 . 20
- 35. Change Detection Le Strategie - ChangeDetectionStrategy.onPush Impostando la strategia di rilevamento su onPush stiamo firmando un contratto con Angular che ci obbliga a lavorare con oggetti immutabili. 14 . 21
- 36. Change Detection Le Strategie - ChangeDetectionStrategy.onPush Change Detection prender il via solo quando: Cambiano le referenze @Input Un evento 竪 scatenato nel componente o in un child component Eseguiamo la CD esplicitamente ChangeDetectorRef (detectChanges, markForCheck), ApplicationRef.tick() Viene usato il pipe async 14 . 22
- 37. Change Detection Le Strategie - ChangeDetectionStrategy.onPush Se scegliamo di adottare la strategia onPush, 竪 consigliabile seguire alcuni suggerimenti: Creare ed annidare componenti in maniera consapevole Usando inoltre componenti pi湛 semplici e pi湛 riutilizzabili Iniettare le propriet @Input, utilizzando strategie di immutabilit: Usa immutable.js L'implementazione di pattern di state management Object.assing () / {... object} 14 . 23
- 38. Change Detection Le Strategie - ChangeDetectionStrategy.onPush Uso degli Observables, che ci avvisano sempre quando arriva una nuova informazione! In questi casi potremmo invocare ad esempio markForCheck nel nostro componente nella sottoscrizione o ancora meglio, non sottoscrivere l'osservabile e delegare il tutto direttamente alla AsyncPipe 14 . 24
- 39. Change Detection ChangeDetectorRef Angular ci offre un servizio chiamato ChangeDetectorRef, che 竪 un riferimento al ChangeDetector iniettabile nel nostro componente Questo servizio ci facilita la gestione a piacere del rilevatore di modifiche, che 竪 molto utile quando utilizziamo la strategia OnPush o quando eseguiamo il codice al di fuori della zona 14 . 25
- 40. Change Detection ChangeDetectorRef detach Quando si richiama questo metodo stiamo rimuovendo il componente (e tutti i suoi figli) dal rilevamento futuro delle modifiche nell'applicazione. Le sincronizzazioni future tra stati componenti e modelli devono essere eseguite manualmente. reattach Quando si richiama questo metodo includiamo di nuovo il componente (e tutti i suoi figli) nelle future rilevazioni delle modifiche dell'applicazione. 14 . 26
- 41. Change Detection ChangeDetectorRef markForCheck Quando invochiamo questo metodo ci assicuriamo che il rilevatore di modifiche del componente e di tutti i suoi antenati (fino alla radice del documento) saranno eseguiti nella successiva esecuzione. Una volta rilevate le modifiche nel componente verr restituita la strategia di OnPush. detectChanges Eseguir manualmente la rilevazione delle modifiche nel componente ed in tutti i suoi figli (una sorta di localscope). Molto utilizzato nei componenti in cui 竪 stato richiamato " detach ", ottenendo cos狸 un aggiornamento della vista. 14 . 27
- 42. Change Detection ChangeDetectorRef checkNoChanges Controlla se vengono rilevate modifiche (anche ai relativi figli). Questo metodo 竪 usato in devmode per verificare che il rilevamento delle modifiche in esecuzione non presenti ulteriori modifiche. 14 . 28
- 43. Change Detection Best Practices Migliorare le prestazioni tende a coinvolgere l'ottimizzazione di tre aspetti principali: Esecuzione rapida degli event handlers dell'applicazione Riduzione del numero di esecuzioni di callback necessarie per completare un ciclo di Change Detection Riduzione del tempo di esecuzione della Change Detection 14 . 29
- 44. Change Detection Best Practice Template Methods (precalc/pure pipe) Ottimizza o Evita callbacks Usa le Pure Pipe ngFor (trackBy) ngModelOptions="{updateOn:'blur'}" Observable Pipeline (distinctUntilChange ad esempio) 14 . 30
- 45. Change Detection Best Practice Usa Input Setter al posto di OnChanges Cache dove puoi (@memoize su metodi puri)! AOT 14 . 31
- 46. Change Detection Best Practice Usare onPush Rimuovere dalla Change Detection (es. Header/Footer) Implementa la tua logica Change Detection 14 . 32
- 48. Change Detection Component Life constructor vs ngOnInit ngOnChanges vs ngDoCheck ngAfterContentInit vs ngAfterViewInit ngAfterContentChecked vs ngAfterViewChecked ngOnChanges vs ngAfterViewChecked ngOnDestroy win! :D 14 . 34
- 49. Change Detection Components - Stateful/Stateless Impure Function = Stateful Component Pure Function = Stateless Component Consideriamo pure functions le funzioni che dato uno stesso input ritorneranno sempre uno stesso output (no side-effects) 14 . 35
- 50. Change Detection Components - Stateful/Stateless Gestisce eventuali cambiamenti di stato (via services) Possono contenere Redux actions (ngrx/store per esempio) Gestisce i dati (via services) Pu嘆 ricevere dati via route resolvers Possono comunicare con dipendenze esterne Hanno child components stateless (ma anche stateful) Comunicano con i child componentes stateless via @Input/@Output 14 . 36
- 51. Change Detection Components - Stateful/Stateless Nessuna request/fetch di dati Ricevono i dati via property binding Emettono i dati via event callbacks Hanno child components stateless (ma anche stateful) Possono contenere local UI state Sono un piccolo tassello di un quadro pi湛 grande! 14 . 37
- 52. Zone.js Prende il nostro posto ed intercetta tutto ci嘆 che vuole, ma possiamo fermarlo! 15 . 1
- 53. Zone.js Cosa 竪? Libreria scritta dal team Angular, ispirata a DART Un meccanismo di incapsulazione ed intercettazione delle attivit asincrone nel browser 15 . 2
- 54. Zone.js Cosa 竪? Una zona 竪 un contesto di esecuzione che persiste attraverso attivit asincrone e consente di osservare e controllare l'esecuzione del codice all'interno della zona 15 . 3
- 55. Zone.js A che serve? Schedula ed intercetta tutti gli eventi asincroni del browser Associa dati alla zona cos狸 da essere accessibili a qualsiasi operazione asincrona all'interno della zona stessa Utile per determinare i cicli della VM Utile Debug, testing e profiling 15 . 4
- 56. Zone.js Come fa ad intercettare gli eventi async? Zone.js esegue il monkey-patch delle API asincrone e le ridefinisce! Il monkey-patch 竪 una soluzione per estendere o modificare il software di sistema, senza alterare il codice sorgente (quindi solo sull'instanza in esecuzione) Durante l'import di zone.js, vengono definite tutte le funzioni/variabili della core zone, richiamando la funzione Zone.__load_patch() 15 . 5
- 57. Zone.js Conosciamolo un po' In Zone esiste ha la nozione di current zone, che corrisponde all'attuale contesto di esecuzione, al quale si pu嘆 fare accesso tramite lo static getter Zone.current 15 . 6
- 58. Zone.js Conosciamolo un po' Ogni zona inoltre ha i getter name e parent Zone.current.name e Zone.current.parent In Zone 竪 inoltre presente il concetto di fork, che consente di creare nuove zone ed impostarne il diretto genitore Ci嘆 ci permette di associare pi湛 stack frame con una zona specifica const zoneAC = Zone.current.fork({name: 'AC', properties: {data: 'initial'}}); 15 . 7
- 59. Zone.js Conosciamolo un po' L'argomento passato al metodo fork 竪 chiamato zone specification (ZoneSpec) 15 . 8
- 60. Zone.js Come gestire le zone possibile eseguire callbacks nelle zone (e quindi variare la current zone) con i seguenti metodi: run: invoca una funzione in una determinata zona. L'esecuzione di una callback in una zona viene solitamente definita come entrare in una zona runGuarded: come run ma con la cattura degli errori wrap: produce una nuova funzione che cattura la zona in una closure che eseguir油z.runGuarded(callback) quando invocata 15 . 9
- 62. Zone.js Hooks Zone mantiene tutte le attivit in sospeso nella task queue onHasTask: notifica quando qualcosa varia nella coda onScheduleTask: eseguito ogni volta che viene rilevata un'operazione asincrona come setTimeout onInvokeTask: eseguito quando una callback passata a un'operazione asincrona viene eseguita onInvoke: notifica ogni volta che si entra in una zona eseguendo run() 15 . 11
- 64. Zone.js Quale 竪 la relazione con Angular? Angular utilizza Zone.js per creare una zona (via NgZone) che viene utilizzata per eseguire il ciclo di Change Detection. un meccanismo molto conveniente per attivare automaticamente la Change Detection chiamando app.tick() invece di farlo manualmente. Attenzione per嘆! NgZone 竪 un meccanismo separato dalla Change Detection. Viene solo utilizzato per triggerare la Change Detection chiamando ApplicationRef.tick() 15 . 13
- 65. Zone.js Come funziona NgZone? In Angular, quando effettuiamo una chiamata a platformBrowserDynamic().BootstrapModule(AppModule) nel nostro main.ts, il modulo viene istanziato, ma prima viene creata un'istanza di NgZone. application_ref.ts 15 . 14
- 66. Zone.js Come funziona NgZone? Nel costruttore di NgZone viene caricato Zone.js che crea una root zone ed un fork chiamato angular. Nel fork vengono definiti tutti i callback come facenti parte della zona e saranno richiamati ogni qualvolta un task asincrono verr scatenato Angular sottoscrive questi eventi ed esegue la logica di rilevamento delle modifiche chiamando il metodo tick() dell'ApplicationRef 15 . 15
- 67. Zone.js Come funziona NgZone? NgZone 竪 quindi il wrapper per dei fork di Zone: _inner: corrisponde alla zona angular ed 竪 definita per l'esecuzione all'interno della Angular Zone (NgZone.run()) _outer: corrisponde al contesto originale prima che sia definita per la Angular Zone (NgZone.runOutsideAngular()) 15 . 16
- 68. Zone.js Cosa possiamo fare con NgZone? Il servizio NgZone ci fornisce gli strumenti per determinare lo stato della zona di Angular ed eseguire codice all'interno o all'esterno di essa! runOutsideAngular: Ci consente di eseguire codice al di fuori del contesto di Angular run: Ci consente di rientrare nel contesto di Angular 15 . 17
- 69. Zone.js Cosa possiamo fare con NgZone? onUnstable: Notifica che del codice 竪 stato inserito ed 竪 in esecuzione nella zona Angular. onMicrotaskEmpty: Notifica quando nessun microtasks 竪 accodato per l'esecuzione. Angular sottoscrive questo internamente evento per segnalare che dovrebbe essere eseguito il rilevamento delle modifiche. onStable: Notifica quando 竪 stato eseguito l'ultimo onMicroTaskEmpty, il che implica che tutte le attivit sono state completate e che il rilevamento delle modifiche 竪 avvenuto onError: Notifica la presenza di errori 15 . 18
- 70. Zone.js Posso farne a meno? Angular pu嘆 funzionare correttamente senza Zone, per mezzo di una Noop Zone, che disabilita l'esecuzione della Change Detection platformBrowserDynamic() .bootstrapModule(AppModule, {ngZone: 'noop'}); Ma non 竪 possibile rimuoverlo! 15 . 19
- 71. Zone.js Uno stack trace pi湛 dettagliato Zone.js, tenendo traccia di tutte le nostre chiamate asincrone, pu嘆 fornirci uno stack trace pi湛 dettagliato in caso di eccezione Per farlo 竪 necessario includere il modulo long-stack-trace-zone nel codice 15 . 20
- 72. Ivy Un nuovo mostro da conoscere o un nuovo ammaliante alleato? 16 . 1
- 73. Ivy Cos'竪? il nuovo view engine di Angular (pipeline e motore di rendering) Ivy 竪 ancora nelle prime fasi di sviluppo, ma pare che il tutto proceda a gonfie vele! Mi邸ko Hevery e Kara Erickson () hanno mostrato Ivy alla ng-conf 2018 16 . 2
- 74. Ivy Cosa fa il view engine? Il view engine analizza i componenti (e tutto il resto) e li traduce in normali files HTML e JavaScript, cos狸 che il browser possa leggerli e visualizzarli Ivy 竪 la terza incarnazione del view engine ed arriva dopo il compiler di ng2 ed il renderer2 di ng4 (che 竪 quello che utilizziamo adesso) 16 . 3
- 75. Ivy Perch竪 un nuovo engine? Perch辿 Ivy 竪 SFS Immagine cordialmente fregata dal Keynote dell'IO! Due concetti chiave: Locality e Tree-Shaking acronimo inventato da me! 16 . 4
- 76. Ivy Quali sono i vantaggi? Build pi湛 piccole (parliamo proprio di kb!) Tempi di rebuild molto rapidi Tempi di sviluppo pi湛 rapidi Una pi湛 semplice e comprensibile pipeline Codice prodotto pi湛 Human readable 16 . 5
- 77. Ivy Concetto Chiave: Locality Ivy compila un file alla volta Build incrementali e rapidit di compilazione Addio all'analisi statica del codice (come su Renderer2) Equivalenza tra JIT ed AOT Miglior approccio alla Meta-Programmazione (HOC, generazione dinamica dei moduli, componenti, pipes, etc...) 16 . 6
- 78. Ivy Concetto Chiave: Tree-Shaking Rimuovere parti inutilizzate del codice! Template syntax Dependency injection Content projection Structural directives Lifecycle hooks Pipes Queries Listeners Genera solo il codice necessario che hai scritto Fa in modo che ci嘆 che non stai usando, non venga incluso Non porta nella build l'intero codice del framework, ma solo le funzionalit che usi! (Non ti serve la Content Projection? Bene, non la builder!) Il tree-shaking verr applicato a: 16 . 7
- 79. Ivy Tree-Shaking import { myCoolFunction } from './other'; const myCondition = false; if (myCondition) { myCoolFunction(); } 16 . 8
- 80. Ivy Ivy Pipeline Google ha riscritto la pipeline di rendering rimuovendo il goffo Angular Interpreter Altra immagine cordialmente fregata dal Keynote dell'IO, ma stavolta modificata! Invece di generare template data da interpretare, genera direttamente template instructions (funzioni atomiche che fanno solo ci嘆 che serve al template che hai scritto!) 16 . 9
- 81. Ivy Ivy Pipeline - Angular Interpreter Attualmente il compilatore produce dei metadati (Template Data) per definire un componente ed i suoi elementi. L'Interpreter utilizza questi dati per istanziare componenti ed eseguire il rilevamento delle modifiche. 16 . 10
- 82. Ivy Ivy Pipeline - Angular Interpreter //<span>My name is {{name}}</span>: viewDef(0,[ elementDef(0,null,null,1,'span',...), textDef(null,['My name is',...]) ] 16 . 11
- 83. Ivy Ivy Pipeline - Incremental DOM (custom) Per produrre ed aggiornare i componenti e gli elementi vengono utilizzate istruzioni che producono direttamente nodi del DOM (pussa via metadata!) Quindi le istruzioni creano il componente, i nodi DOM ed eseguono il rilevamento delle modifiche! Dall'approccio monolitico dell'interprete ci si 竪 spostati ad uno atomico delle istruzioni individuali. 16 . 12
- 84. Ivy Ivy Pipeline - Incremental DOM (custom) //<span>My name is {{name}}</span>: if (rf & RenderFlags.Create) { elementStart(0, 'span'); text(1); elementEnd(); } // update mode if (rf & RenderFlags.Update) { textBinding(1, interpolation1('My name is', ctx.name)); } 16 . 13
- 85. Ivy Ivy Pipeline Ivy 竪 basato su una propria implementazione dell'Incremental DOM un aggiornamento incrementale di un nodo DOM alla volta! I decoratori saranno compilati come propriet statiche sulle classi (@Injectable >> ngInjectableDef). L'unica eccezione 竪 @Component, che richiede la conoscenza dei metadati dal @NgModule che dichiara il componente per generare correttamente il ngComponentDef La definizione del componente verr associata tramite propriet statica Nessun file separato verr creato durante la compilazione Ivy Architecture 16 . 14
- 86. Ivy Ivy Pipeline - Incremental DOM (custom) - Component Definition const componentDefinition = { // ngComponentDef type: MyApp, selectors: [['my-app']], >>> template: (rf: RenderFlags, ctx: MyApp) => { if (rf & RenderFlags.Create) { elementStart(0, 'span'); elementEnd(); } if (rf & RenderFlags.Update) { elementProperty(0, 'name', bind(ctx.name)); } }, factory: () => new MyApp() } 16 . 15
- 87. Ivy Ivy Pipeline - Come fa ad essere utile al Tree-Shaking? Diamo uno sguardo! createViewNodes vs elementStart, container, etc... HelloWorld Test Application 16 . 16
- 88. Ivy Ivy Pipeline Ivy supporta i seguenti decoratori: @Component > ngComponentDef @Directive > ngDirectiveDef @Injectable > ngInjectableDef @NgModule > ngNgModuleDef @Pipe > ngPipeDef Internamente questi trasformatori di classe sono chiamati "Compiler". 16 . 17
- 89. Ivy Ivy Pipeline - Change Detection L'ordine delle esecuzioni potrebbe essere leggermente diverso e il meccanismo per gli hook del ciclo di vita cambiato Sembra che ora Angular controlli prima i child components e solo successivamente le embedded views ngOnChanges per mezzo di NgOnChangesFeature dovrebbe wrappare ngDoCheck e valutare se essere eseguito (verr comunque richiamato prima) Le operazioni di controllo sono implementate come istruzioni individuali (funzioni), quindi favoriscono il Tree-Shacking 16 . 18
- 90. Ivy Ivy Pipeline - Change Detection Internamente l'esecuzione del rilevamento delle modifiche in Ivy viene eseguita chiamando la funzione detectChanges con il componente come argomento, e non con checkAndUpdateView come avviene attualmente. 16 . 19
- 91. Ivy Ivy Pipeline - Change Detection 16 . 20
- 92. Ivy Ivy Pipeline - Change Detection 16 . 21
- 93. Ivy Ivy Pipeline - Alcuni vantaggi nella Dev Experience Ivy migliorer la nostra esperienza di sviluppo rimuovendo gran parte della rendering black box I templates faranno parte dello stack trace Non dovrai pi湛 occuparti dei messaggi di errore criptici quando qualcosa non va e vedrai il numero esatto della linea del template Sarai anche in grado di impostare i breakpoint per eseguirne il debug 16 . 22
- 94. Ivy Alcune novit (ma nulla 竪 definitivo) Rimossa la dipendenza da platform-browser Nessun file NgFactory Modalit di Bootstrap semplificata Redesign della configurazione e controllo della DevMode Nuova feature chiamata Feature Feature 竪 un pre-processore per DirectiveDef, che pu嘆 essere pensato come un "pattern Decorator" su misura per DirectiveDef Nuova Injectable API Nuova template compilation 16 . 23
- 95. Ivy Nuova Modalit di Bootstrap Sar mantenuto il bootstrap attuale: platformBrowserDynamic().bootstrapModule(AppModule) import { renderComponent } from '@angular/core' import { AppComponent } from './app.component' renderComponent(AppComponent) 16 . 24
- 96. Ivy Quando sar resa pubblica cosa succeder ai nostri progetti? Nulla, si dovrebbero solo apprezzare i vantaggi che porter con se! ...ma tranquilli...ci sar di sicuro qualcos'altro che romper i nostri progetti! 16 . 25
- 97. Ivy Come vederlo in azione oggi? Installa Bazel (Angular ABC si avvicina sempre pi湛?) git clone https://github.com/angular/angular.git cd packages/core/test/bundling/todo bazel run @yarn//:yarn bazel run //packages/core/test/bundling/todo:devserver Con :prodserver puoi provare la build di produzione Pu嘆 essere testato tramite la propriet enableIvy: true di angularCompilerOptions (tsconfig.json) Oppure date un occhiata qui! 16 . 26
- 98. Ivy Quando arriver? Google attualmente testa Ivy su oltre 600 prodotti Senza vergogna alcuna! Is Angular Ivy ready? 16 . 27
- 99. Grazie a tutti! Francesco Sciuti www.acadevmy.it | info@acadevmy.it | francesco@acadevmy.it 17
- 100. e come nei cinecomics...la slide post credit! 18