The future with Ivy

×

The rise of a new engine

Ivy ? 🤔

In a nutshell 🌰

@MartinaKraus11

New Renderer since version 9

Focusing on small bundle size

Together with Bazel up 30% faster compilation time

Angular Apps should be easier to debug

 

 

How to update?

@MartinaKraus11

 

ng update @angular/core @angular/cli

 

https://update.angular.io/

 

 

 

Backward Compatibility

@MartinaKraus11

Angular provides two compilers:

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

• Ngcc (Compatibility Compiler): Convert old style modules  

And what can I do with Ivy? 🤔

GDE in Angular

 

Women Techmakers Ambassador

 

Trainer and Consultant

@MartinaKraus11

That's Me

Martina Kraus

martinakraus

@MartinaKraus11

Why support Ivy ? 🤔

How can we benefit from Ivy?

@MartinaKraus11

• 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

@MartinaKraus11

HTML Template

Data

Template

Angular Interpreter

DOM

ViewEngine: Rendering pipeline

@MartinaKraus11

HTML Template

Template instructions

DOM

Ivy rendering pipeline

Bundle Sizes

@MartinaKraus11

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

SO MUCH

SMALLER

FASTER

EASIER

WOW

WOW

WOW

New ways of writing Angular Apps

@MartinaKraus11

Lazy loading components

Higher Order Components

Zoneless

change detection

New ways of writing Angular Apps

@MartinaKraus11

Lazy loading components

Higher Order Components

Zoneless

change detection

Lazy loading components

@MartinaKraus11

Lazy loading components

@MartinaKraus11

ComponentFactoryResolver

Lazy loading components

@MartinaKraus11

ViewContainerRef

Injector

Lazy loading components

@MartinaKraus11

DEMO

New ways of writing Angular Apps

@MartinaKraus11

Lazy loading components

Higher Order Components

Zoneless

change detection

ComponentDefinition

@MartinaKraus11

ComponentDefinition

@MartinaKraus11

Higher-Order Component

@MartinaKraus11

Higher-Order Component

@MartinaKraus11

DEMO

And more ...

@MartinaKraus11

Modifying component traits at runtime

(Automatically unsubscribing/ subscribing, changing styles)

 

More dynamic

 

Every Ivy component is a standalone component

 

New ways of writing Angular Apps

@MartinaKraus11

Lazy loading components

Higher Order Components

Zoneless

change detection

Zones.js

@MartinaKraus11

Hard dependency of every Angular Application

"zone.js": "~0.10.2"

 

NgZone triggers the change detection automatically 

 

Takes care of all event handlers and data bindings

 

 

 

 

The issue about Zones

@MartinaKraus11

More than 100kB

 

many performance issues 

(long cd cycles together with frequent browser events)

 

too much magic

 

Zone-less Change Detection

@MartinaKraus11

Ivy has been defined without considering Zone.js

 

markDirty

@MartinaKraus11

Calling Angular to check data Binding with Ivy Instruction

 

markDirty

@MartinaKraus11

DEMO

@MartinaKraus11

Ivy is an enabler: (For more dynamic applications)

• Lazy-loading components
• Higher-Order Components
• optional ngModules/ ngZone

 

Summary

me@martina-kraus.io

@MartinaKraus11

martina-kraus.io

Slides: https://slides.com/martinakraus/angularup-ivy-2020​

Repo: https://github.com/martinakraus/ivy-AngularUP

Thank you !!!