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

Stephen Fluin - https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3

Let's compile

Let's compile

ViewEngine

app.cmp.html

app.cmp.js

app.cmp.ngFactory.js

app.cmp.metadata.json

app.cmp.ngsummary.json

Ivy

app.cmp.html

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