Ivy

The future of Angular

@MartinaKraus11

What is the costliest Ressource on a webpage?

JavaScript

Ivy to the rescue

Default in Angular Version 9 

tsconfig.json:

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

That's me, Martina

GDE in Angular and Web Technologies

Trainer and Consultant

Women Techmakers Ambassador

Why do we need a compiler?

Angular

Code

ngc

JavaScript Code

export class AppCmp {
  title: string;

ngComponentDef =    ng.defineComponent(
{...})
}

ngc

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

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

The future of developing with Ivy

Lazy-loading Components

Optional

Angular Module

No Zone needed

Why disabling Zone?

• more than 100kB

• many performance issues

• Too much magic

Higher Order Components

Easier to Debug

• Cleaner API

• Improvement of Stack Trace

• Browser Errors also in the Console

new 'ng' object

Summary

• Ivy reduces the bundle size significantly

• Lazy loading of Components

• Easier Debugging

• Optional ngModules

Thank you !!!

kraus.martina.m@gmail.com

@MartinaKraus11

martina-kraus.io

Ping me:

Slides: slides.com/martinakraus/ivy-future