Angular Ivy

The rise of a new compiler

×

@MartinaKraus11

Performance?

Performance?

Time to interact

Initial loading time

Developing / Build time

@MartinaKraus11

What is the costliest Resource on a webpage?

@MartinaKraus11

HTML ?

@MartinaKraus11

CSS ?

@MartinaKraus11

JavaScript

@MartinaKraus11

Ivy to the rescue

@MartinaKraus11

That's me, Martina

GDE in Angular and Web Technologies

Trainer and Consultant

Women Techmakers Ambassador

@MartinaKraus11

@MartinaKraus11

@MartinaKraus11

Why do we need a compiler?

@MartinaKraus11

Angular

declarative Code

ngc

JavaScript Code

@MartinaKraus11

export class AppCmp {
  title: string;

ɵcmp =    core.defineComponent(
{...})
}

ngc

@Component({
 selector: ‘app-component’
 template:
`<h1>{{ title }}</h1>`
})
export class AppCmp {}

@MartinaKraus11

Features

Scoping (ngModules)

Evaluation of

      Property chains

      Variables / function calls

      Type checking

@MartinaKraus11

The rise of a new compiler

@MartinaKraus11

Faster compilation

Smaller

Easier to Debug

@MartinaKraus11

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

Let's compile

@MartinaKraus11

Let's compile

@MartinaKraus11

@MartinaKraus11

ViewEngine

app.cmp.html

app.cmp.js

app.cmp.ngFactory.js

app.cmp.metadata.json

app.cmp.ngsummary.json

@MartinaKraus11

Ivy

app.cmp.html

app.cmp.js

@MartinaKraus11

View Engine is not tree-shakable

@MartinaKraus11

Hello World

@MartinaKraus11

Hello World

'Hello World'

@MartinaKraus11

And the Ivy way?

@MartinaKraus11

export function elementStart()

export function text()

Ivy instructions

Unsused Code

export function pipe()

Faster compilation

Smaller

Easier to Debug

@MartinaKraus11

Single file compilation

static ɵcmp = 
core.ɵɵdefineComponent({…})

app.component.js

@MartinaKraus11

Locality principle

Component has all information for being compiled

@MartinaKraus11

ViewEngine

@MartinaKraus11

Ivy

@MartinaKraus11

Ivy

@MartinaKraus11

@MartinaKraus11

Separate compilation of dependencies

No global compilation anymore

Modules already AOT

@MartinaKraus11

Easier to Debug

• Cleaner API

• Improvement of Stack Trace

• Template creation in one file with controller code

@MartinaKraus11

Simpler stack traces

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

@MartinaKraus11

new 'ng' object

@MartinaKraus11

Backwards compatibility

Angular provides two compilers:

• Ngtsc (Ivy compiler): compiles Ivy-compatible code

• Ngcc (Compatibility Compiler): Convert old style modules  

@MartinaKraus11

@MartinaKraus11

Default in Version 9 

tsconfig.json:

//to Opt-out:
"angularCompilerOptions": {
    "enableIvy": false
  }

Summary

• Ivy reduces the bundle size significantly

• Only re-compiles what changes

• Backwards compatible with ngcc

@MartinaKraus11

Thank you !!!

me@martina-kraus.io

@MartinaKraus11

martina-kraus.io

Ping me:

Slides: slides.com/martinakraus/ivy-rise-vidcon