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

Let's compile

// 9.0.2
> ng new awesome-app
> ngc

ViewEngine:
1,3MB

 

Ivy:
14kB

 

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

ngIndia2020

By Martina Kraus

ngIndia2020

Ivy-Talk at BASTASpring2020 on 26th February 2020

  • 1,841