Angular Ivy
Writing performant web apps
@MartinaKraus11
@MartinaKraus11
Performance?
@MartinaKraus11
Performance?
Time to interact
Initial loading time
Developing / Build time
What is the costliest Ressource on a webpage?
HTML ?
CSS ?
JavaScript
Ivy to the rescue
That's me, Martina
GDE in Angular and Web Technologies
Trainer and Consultant
Women Techmakers Ambassador
Why do we need a compiler?
Angular
declarative Code
ngc
JavaScript Code
ngc
JavaScript Code
@Component({ selector: ‘app-component’ template: `<h1>{{ title }}</h1>` }) export class AppCmp {}
export class AppCmp { title: string; ngComponentDef = ng.defineComponent( {...}) }
ngc
@Component({ selector: ‘app-component’ template: `<h1>{{ title }}</h1>` }) export class AppCmp {}
Features
Scoping (ngModules)
Evaluation of
Property chains
Variables / function calls
Type checking
Ivy to the rescue
Faster compilation
Smaller
Easier to Debug
Faster compilation
Smaller
Easier to Debug
Let's compile
> ng new awesome-app
> ngc
Let's compile
// 9.0.2
> ng new awesome-app
> ngc
ViewEngine:
1,3MB
Ivy:
14kB
ViewEngine
app.cmp.ts
app.cmp.html
app.cmp.scss
app.cmp.js
app.cmp.ngFactory.js
app.cmp.metadata.json
app.cmp.ngsummary.json
Ivy
app.cmp.ts
app.cmp.html
app.cmp.scss
app.cmp.js
View Engine is not tree-shakable
And the Ivy way?
Template calls Framework
Template
function calls
elementStart()
text()
Angular
export function elementStart()
export function text()
More Improvements in Angular 9
Services
'providedIn'
any - unique instance for each module
platform - shared over more applications
Typical Bundle sizes
Angular-Apps
Others
Delta.com: 4.2MB
Forbes.com: 5.7MB
Android Messages: 1.1MB
Grubhub: 3.4MB
microsoft.com is 1.4MB
amazon.com is 7.5MB
theverge.com is 9.6MB
Wikipedia pages are 223KB
reddit.com is 4.9MB
netflix.com is 4.2MB
twitter.com is 3.5MB
Stephen Fluin - https://fluin.io/blog/is-my-angular-performance-normal
angular.json
Faster compilation
Smaller
Easier to Debug
Single file compilation
static ngComponentDef =
core.ɵɵdefineComponent({…})
app.component.js
Locality principle
Component has all information for being compiled
ViewEngine
ViewEngine
Ivy
Ivy
Ivy provides stable API to ship code through NPM
No global compilation anymore
Modules already AOT
AOT on default
-
'ng serve' also with AOT
-
decreased from 0.8x to 0.5x
(excluding typescript build )
Easier to Debug
Cleaner API
Improvement of Stack Trace
Template creation in one file with controller code
new 'ng' object
How to enable?
Angular Version 8
Opt-in:
>ng new ivy-app --enable-ivy
>ng build --prod
Default in Angular Version 9
tsconfig.json:
//to Opt-out:
"angularCompilerOptions": {
"enableIvy": false
}
Backwards compatibility
Angular provides two compilers:
-
Ngtsc (Ivy compiler): compiles Ivy-compatible code
-
Ngcc (Compatibility Compiler): Convert old style modules
Summary
Ivy reduces the bundle size significantly
Only re-compiles what changes
Backwards compatible with ngcc
Thank you !!!
me@martina-kraus.io
@MartinaKraus11
martina-kraus.io
Ping me:
Slides: slides.com/martinakraus/ivy-performance
Copy of BASTASpring2020
By Martina Kraus
Copy of BASTASpring2020
Ivy-Talk at BASTASpring2020 on 26th February 2020
- 505