Angular Ivy

Writing performant web apps

@MartinaKraus11

That's me, Martina

GDE in Angular and Web Technologies

Trainer and Consultant

Women Techmakers Ambassador

@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

Why do we need a compiler?

Angular

declarative Code

ngc

JavaScript Code

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

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

export function elementStart()

export function text()

Ivy instructions

Unsused Code

export function pipe()

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

Ivy

Ivy

Ivy provides stable API to ship code through NPM

No global compilation anymore

Modules already AOT

Easier to Debug

• Cleaner API

• Improvement of Stack Trace

• Template creation in one file with controller code

Simpler stack traces

Kara Erickson - https://bit.ly/3bgD3C9

new 'ng' object

How to enable?

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  

Enable Ivy

• Better build times, thanks to incremental compilation

• Smaller and faster bundles

• Sets the ground for lazy-loading components

• Is easy to debug

• Introduces new non-zone.js based change detection

• Uses higher-order components

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