O co chodzi z tym Ivy?
Jakub Szafraniec
Jakub Szafraniec
Senior JavaScript Developer
Agenda
-
Kompilator
-
Runtime
-
Tips & Tricks
Kompilator
-
Mniejszy kod wynikowy
-
Partial evaluation
-
ngcc
Template type checking
Basic mode
tsconfig.json
{
"angularCompilerOptions" : {
"fullTemplateTypeCheck" : false
}
}
View Engine / Ivy
<map [city]="user.address.city">
Full mode
tsconfig.json
{
"angularCompilerOptions" : {
"fullTemplateTypeCheck" : true
}
}
View Engine / Ivy
- Typy wewnątrz *ngIf i *ngFor
- Pipes
- Referencje do komponentów/dyrektyw
Strict mode
tsconfig.json
{
"angularCompilerOptions" : {
"fullTemplateTypeCheck" : true,
"strictTemplates": true
}
}
Tylko Ivy
Strict mode
- @Input() types
- strictNullChecks
- Context dla ng-template
- $event
- DOM Elements references, inputs
W razie problemów
{{$any(person).addresss.street}}
Strict mode
vs
Kompilacja Template
i0.ɵɵelementStart(0, 'h2'); i0.ɵɵtext(1, 'Some text'); i0.ɵɵelementEnd();
<h2>Some text</h2>
i0.ɵɵelementStart(5, 'app-counter', 2); i0.ɵɵlistener('wantMore', function() { return ctx.more(); } ); i0.ɵɵelementEnd();
<app-counter (wantMore)="more()"></app-counter>
i0.ɵɵelementStart(0, 'div', 0); i0.ɵɵtext(1); i0.ɵɵelementEnd();
<div class="value">{{ value }}</div>
i0.ɵɵtextInterpolate(ctx.value);
Runtime
Tips & Tricks
ɵmarkDirty(this);
this.changeDetectionRef.markForCheck();
import('./lazy-loaded.component').then(
({ LazyLoadedComponent }) => {
ɵrenderComponent(LazyLoadedComponent, {
host: 'app-placeholder',
injector: this.injector
});
}
);
Higher Order Components
Linki
@szafraniec_kuba
