Un talk dedicato agli aspetti più arcani di Angular tra i quali sono presenti alcuni mostri, che una volta conosciuti non fanno poi così tanta paura. Approfondiamo quindi alcuni aspetti della Change Detection di Angular, proviamo a capire a cosa serve e come funziona Zone.js e se sono presenti in giro altre creature o miti da sfatare!

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

3. Formazione
Training Eventi Talks
3

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 dell’applicazione è l’insieme delle informazioni che determinano l’output
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

47. Change Detection
Component Life
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
Lifecycle Docs
14 . 33

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

61. Zone.js
Esempio
15 . 10

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

63. Zone.js
Esempio
15 . 12

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