1 of 33

Present and Future of Angular with Ivy

2 of 33

Template

Compiler

ViewEngine

Ivy

@SiddAjmera

Gen ☝

Gen ✌

Gen 3️⃣

While the interpreter was designed in the most optimal and memory efficient way possible, we could not break it up or remove parts of it.

The interpreter had to handle whatever template it got. And we didn’t know ahead of time, whether you were going to use internationalization or content projection or svg.

It basically takes the template data structure and runs it opcode by opcode.

What happens in this model is, you can roughly think of the rendering engine as a big switch case. It's basically an interpreter.

It needs to have all the implementations of all the features of Angular embedded in the switch statement. right in the Rendering Engine itself.

The problem with this model is that the Framework code is not tree-shakable.

The JS Bundler is not able to decide whether a particular branch/piece of code needs to be in the final prod bundle or not during build time. So, to play safe, it’s going to throw all of it in the prod bundle.

And so there’s no way for you to pick and choose what features of Angular you actually need in the production bundle.

3 of 33

Ivy is an enabler

3

@SiddAjmera

“

4 of 33

Design Goals

FLEXIBILITY

Simple & easier to pick, understand, & debug
HoC
Module-less Apps
Dynamic Component Loading

OPTIMIZABILITY

Only pay for what you use
Tree Shaking
No metadata files
Smaller bundles

INCREMENTALITY

Locality
Faster compilation, builds, & test execution

4

@SiddAjmera

5 of 33

fn createViewNodes(view: ViewDef) {

view.nodes.forEach(node => {

switch(node.type) {

case ELEMENT: createElement(...)

case TEXT: createText(...)

case DIRECTIVE: createDirectiveInstance(...)

...

}

});

}

Courtesy: @vikerman

Rendering Engine

export function ɵɵelementStart(..) {..}

export function ɵɵtemplate(..) {..}

export function ɵɵtext(..) {..}

...

@SiddAjmera

6 of 33

export function ɵɵelementStart(..) {..}

Credits: @vikerman

Template

Rendering Engine

export function ɵɵtemplate(..) {..}

export function ɵɵtext(..) {..}

...

Tree Shaken

Unused Ivy Instructions

@SiddAjmera

7 of 33

Ivy Instruction Set

DOM Creation
Data Binding
Change Detection
I18N
Queries
Dependency Injection

Styling
Containers
Templates
Content Projection
Pipes
SVG

7

@SiddAjmera

8 of 33

8

@SiddAjmera

So the @Component decorator has become an ngComponentDef static field.

You can think of it as the decorator has an effect of patching a static field onto the class.

This static field contains metadata that tells the Ivy Runtime important information about this component.

Things like, what is it’s selector, and that it uses two directives here. I.e. the Child Component and ngIf.

It also has a template function. Which is responsible for doing the same things as before. Rendering the template to DOM and running CD.

You’ll notice a few things about it.

It’s also pretty short. But unlike the view engine, it has imperative DOM calls. Actually more like the original template compiler.

These imperative calls are doing things like creating a span in a div. Setting up the child template and conditionally rendering it by *ngIf.

I’ve also included the change detection code here.

So the first if condition renders the inital DOM and then the second if condition runs change detection.

So it’s checking two conditions here. The first one is the interpolation for the title.

The second thing is the condition for the ngIf.

9 of 33

9

@SiddAjmera

10 of 33

component.ts

component.html

component.js

component.ngfactory.js

Courtesy: @vikerman

component.js

component.ngsummary.json

component.metadata.json

component.scss

@SiddAjmera

11 of 33

🌳🤝 + 🚫🤘 = 🤏📦

@SiddAjmera

12 of 33

12

@SiddAjmera

13 of 33

@SiddAjmera

14 of 33

14

@SiddAjmera

15 of 33

@NgModule

ɵmod

ɵɵdefineModule

@Directive

ɵdir

ɵɵdefineDirective

@Injectable

ɵprov

ɵɵdefineInjectable

@Pipe

ɵpipe

ɵɵdefinePipe

@Component

ɵcmp

ɵɵdefineComponent

@SiddAjmera

16 of 33

16

Ivy FTW - NG SriLanka Conf.

@SiddAjmera

17 of 33

Design Goals

FLEXIBILITY

Module-less Apps
Simple & easier to pick, understand, & debug
Dynamic Component Loading
HoC

OPTIMIZABILITY

Only pay for what you use
No metadata files
Tree Shaking
Smaller bundles

INCREMENTALITY

Locality
Faster compilation, builds, & test execution

17

@SiddAjmera

18 of 33

Hello World! 👋

I am Siddharth Ajmera

FullStack JS Developer

Angular

Writer

Instructor

@SiddAjmera

19 of 33

PRESENT

A few examples to demonstrate how awesome Ivy is

19

@SiddAjmera

🆕

20 of 33

Small & Meaningful Stacktraces

To get you straight to the source of your error.

20

1

View Engine V/S Ivy

@SiddAjmera

21 of 33

AoT by default

So that you can see the error right while developing

21

2

AoT by default with Ivy 🍃

@SiddAjmera

22 of 33

Lazy Loading Components

So that you can load components lazily and only when required.

22

3

@SiddAjmera

23 of 33

ng Object for 🚫🐛

So that you can debug your code more easily at runtime

23

4

@SiddAjmera

Debugging Angular Ivy Applications from the Devtools Console

24 of 33

FUTURE

A few examples to demonstrate how Ivy enables the awesome future

24

@SiddAjmera

🔮

25 of 33

Angular Modules are linchpins in an Angular Application

25

@SiddAjmera

“

26 of 33

Render Components without Angular Modules from Scratch

To write Angular Component from Scratch without much dependency on Angular Modules, ZoneJS etc.

26

1

Angular Component with Change Detection from scratch in Ivy

@SiddAjmera

27 of 33

Render Components without Angular Modules via Compiler

As you might not want to write the whole boilerplate again and again.

27

2

Angular Component via Compiler with Change Detection in Ivy

@SiddAjmera

28 of 33

Dynamically Loading a Lazy Component with Ivy’s ɵrenderComponent

To give you the flexibility to load a Component lazily and dynamically

28

3

@SiddAjmera

29 of 33

DI in a Dynamically Loaded Lazy Component

Coz what’s an Angular App without DI?

29

4

@SiddAjmera

30 of 33

30

Angular Ivy - Dutch Angular Group

@SiddAjmera

31 of 33

WHERE FROM HERE?

Into a world of Angular Apps where things like Angular Modules, ZoneJS, and RxJS is optional

31

🤔

Code Repo to Demo proposal for Standalone Angular Components

@SiddAjmera

32 of 33

Thanks! 🙏

Any questions ?

You can find me at

32

@SiddAjmera

33 of 33

Credits

Special thanks to all the people who made and released these awesome resources for free:

Presentation template by SlidesCarnival
Photographs by Unsplash

33