Ivy Renderer (beta)

[IgorMinar]

Overview

Ivy is a new backwards-compatible Angular renderer focused on further speed improvements, size reduction, and increased flexibility.

Ivy is currently not feature complete, but can be tested via enableIvy: true angularCompilerOptions flag.

We currently expect Ivy to remain behind the flag until it's feature complete and battle tested at Google. In the meantime you can check out this Hello World demo.

To see status of Ivy implementation go here.

Related Issues:

• Tree-Shakeable Providers Followup Work

[ansarizafar]

Looking forward for an early release.

[AhsanAyaz]

Super excited for this 👍 😄

[AndreaBarbasso]

@ContentChildred

A bit of a typo here 😄 still, can't wait for Ivy to be released! ❤️

[avatsaev]

I want higher order components 😄

hope Component Composition will land in the 6

[Ploppy3]

I'm sorry to ask here (If you consider this spam, feel free to remove it), but does Ivy renderer aim at improving the runtime perf? The only info I found so far is the new features regarding i18n and the fact that it should be backward compatible. Can anyone point me toward info related to Ivy? Thank you.

[chaosmonster]

@Ploppy3 follow Rob on Twitter https://twitter.com/robwormald/status/961445453391790080 it also shrinks the build size e.g.

[trotyl]

@avatsaev The new Feature feature almost provide the same openness (against class factory), by transforming the type (and compiled metadata) itself during runtime.

Even the OnChanges hook is now an emulated feature, rather than real life-cycle hooks recognized by Angular.

[chaosmonster]

@avatsaev that is already possible if I understand you correctly https://gist.github.com/chaosmonster/f2576bbd1bc9a50282a2b3b492195b29

[trotyl]

@chaosmonster The mixin pattern is not yet generally supported in AOT mode, like life-cycle hooks recognition in #19145 and more issues described in #18644.

[avatsaev]

@chaosmaster thank you for the link, but in my opnion this looks very sloppy and hacky. The ideal would be one @component extending another @component

What im unsure about is, what decorator inheritance behavior would be. Override? Extend? Compose?

[trotyl]

@avatsaev Higher-Order Components is not a feature, but a code pattern:

Concretely, a higher-order component is a function that takes a component and returns a new component.

The only thing really stop you from doing that is the AOT compiler which does only support top-level classes. The metadata inheritance (overriding) is an independent feature (#13764).

[LinboLen]

waiting for compiler cli support

[GuskiS]

Is this target for v6.0.0? Also, will this reduce compile time? (runtime/aot) Great work, keep it up :)

[trotyl]

@GuskiS Will only be available behind a flag (non-default) in v6. The compile build time would be greatly reduced in bazel tooling(https://github.com/angular/angular/issues/19058#issuecomment-346145316 for EAP), regardless of using ivy or not.

[tmair]

@IgorMinar Just out of curiosity. Do you have any documentation about the design of the new Ivy Renderer that is publicy available?

[fknop]

@tmair I asked Rob on Twitter: https://twitter.com/robwormald/status/961727090113396737

[Karasuni]

Looking forward to this!

Will ivy allow components to dynamically load html templates as prophecized in https://github.com/angular/angular/issues/15275?

[listepo-alterpost]

Will ivy allow https://github.com/angular/angular/issues/13764 and https://github.com/angular/angular/issues/13766 ?

[mlc-mlapis]

@Karasuni ... mentioning ivy in https://github.com/angular/angular/issues/15275 was in another context. We have to wait a bit for final features which ivy brings but it is sure that they are really interesting ... even in the context of using of dynamic ad-hoc components.

[HerringtonDarkholme]

@tmair I have a blog post translating answers from @trotyl. It might be helpful to get a rough idea about Ivy.

[theodorejb]

@HerringtonDarkholme I found your blog post here: https://herringtondarkholme.github.io/2018/02/19/angular-ivy/. It was very informative - thanks!

[avatsaev]

https://herringtondarkholme.github.io/2018/02/19/angular-ivy/

I'm sorry, but as a non native english speaker, I couldn't understand half of it, it's written in broken english.

What I did understand from the other half, is that Ivy is (very) far from being ready, and will not be retro compatible.

[mlc-mlapis]

... but still better than Chinese. 😄

[sandangel]

is this better ? http://www.clipcode.net/training/clipcode-source-tour.pdf (Appendix)

[trotyl]

@avatsaev It will be compatible, but not all integration points are ready now. The original answer is for "how could an Ivy app achieve 3.2KiB", not for "all app in Ivy would look like that in the future".

it's written in broken english.

Far more better than mine already, it's hurting me... 👶 (It's fine, I know my English is quite bad)

[nsksaisaravana]

Can't wait for this !!! Please include the dynamically load template feature similar like Angular JS $compiler

[avatsaev]

@trotyl yes i agree it was very informative, thanks for the article

@nsksaisaravana for that you'll need to embed the compiler inside your bundle, and you can already do that, it's called jit compilation, but good luck with bundle sizes and performance

[mmatlock-shr]

I am curious about the i18n stuff. So is dynamic (runtime, non-JIT Comp) i18n expected to come in v6 but only in Ivy, is that what I'm seeing here?

And for clarity, the red X's mean that they aren't implemented yet, but are expected, or won't be implemented in time?

[GuskiS]

Can you write what changes you make to main post @mgechev ? I would like to track some sort of progress of Ivy. Also, weren't there green ticks instead of grey? :thinking:

[bmayen]

Pretty detailed progress-tracking right here, no? What more are you looking for in addition to a table tracking every feature and its current state of implementation?

[GuskiS]

It is very detailed, yes. But when changes are made - I have no idea what has changed.

[Ploppy3]

@GuskiS

Friday, March 2

Started tracking for changes.

---

Tuesday, March 6

Content Projection:

Feature	Runtime	Spec	Compiler
container projectAs	❌🡪✅	❌🡪✅	❌

---

Wednesday, March 7

Injection Features

Feature	Runtime	Spec	Compiler
directiveInject(Type)	✅	✅	❌
sanitization with no injector	❌🡪✅	❌🡪✅	❌

---

Saturday, March 10

__Refs

Method	View Container Ref	Template Ref	Embeded View Ref	View Ref	Element Ref	Change Detection Ref
markForCheck()	n/a	n/a	❌	n/a	n/a	❌🡪✅
detach()	❌	n/a	❌	n/a	n/a	❌🡪✅
detachChanges()	n/a	n/a	❌	n/a	n/a	❌🡪✅
reattach()	n/a	n/a	❌	n/a	n/a	❌🡪✅

---

Tuesday, March 13

Injection Features

Feature	Runtime	Spec	Compiler
attribute('name')	❌🡪✅	❌🡪✅	❌
injectChangeDetectionRef()	❌🡪✅	❌🡪✅	❌

__Refs

Method	View Container Ref	Template Ref	Embeded View Ref	View Ref	Element Ref	Change Detection Ref
checkNoChanges()	n/a	n/a	❌	n/a	n/a	❌🡪✅

Change Detection

Feature	Runtime
markDirty()	❌🡪✅
detectChanges()	❌🡪✅
tick()	❌🡪✅
attach()	❌🡪✅
detach()	❌🡪✅
ON_PUSH	❌🡪✅
ALWAYS	❌🡪✅
DIRTY	❌🡪✅
ATTACHED	❌🡪✅

Template Syntax

Feature	Runtime	Spec	Compiler
<div [attr.value]="exp">	✅	❌🡪✅	❌
<div [class.foo]="exp">	✅	❌🡪✅	❌
<div [style.foo]="exp">	✅	❌🡪✅	❌
{{ ['literal', exp ] }}	✅	❌🡪✅	❌
{{ { a: 'literal', b: exp } }}	✅	❌🡪✅	❌
{{ exp \| pipe: arg }}	❌🡪✅	✅	❌

---

Tuesday, March 13

Missing Pieces Sanitization ❌🡪✅

[Ploppy3]

Thursday, March 15

Template Syntax

Feature	Runtime	Spec	Compiler
{{ ['literal', exp ] }}	✅	✅	❌🡪✅
{{ { a: 'literal', b: exp } }}	✅	✅	❌🡪✅
{{ exp \| pipe: arg }}	✅	✅	❌🡪✅

@Query

Feature	Runtime	Spec	Compiler
@Query(descendants)	✅	✅	❌🡪n/a
@Query(one)	✅	✅	❌🡪n/a
@Query(read)	✅	✅	❌🡪n/a
@Query(selector)	✅	✅	❌🡪n/a
@Query(Type)	✅	✅	❌🡪n/a
@ContentChild	✅	✅	❌🡪✅
@ViewChild	✅	✅	❌🡪✅

[Ploppy3]

It looks like we will be able to check for future changes over here https://github.com/angular/angular/commits/master/packages/core/src/render3/STATUS.md

[GuskiS]

When you think it can't get any better you get this 😮 Thanks for the effort 👍

[sergey-morenets]

Was it included in Angular 6 RC.0? I tried to enable Ivy renderer in tsconfig.json:

  "angularCompilerOptions": {
    "enableIvy": true
  },

But when I built the project ng build --prod I didn't notice any changes in the size of the generated bundles.

[trotyl]

@sergey-morenets There's no inheritance support for angularCompilerOptions, you'll need to have that on direct tsconfig.json being used. For example, it should be src/tsconfig.app.json in a normal Angular CLI project.

[sergey-morenets]

@trotyl Thank you for the hints. When I included this flag in tsconfig.app.json and ran ng build --prod I got an error:

ERROR in : Error: Feature host dependencies is not supported yet
    at unsupported (C:\proj\node_modules\@angular\compiler\bundles\compiler.umd.js:30592:11)

[trotyl]

@sergey-morenets Any possible error are expected for now... 😃

[avatsaev]

Ivy isn't ready yet, expect some errors (along with some Spanish Inquisition)

[manfredsteyer]

Wondering, what's the meaning of❌🡪✅

[mlc-mlapis]

@manfredsteyer ... hmm, I think that it has the sense ... wasn't ready and now it is ready.

[sergey-morenets]

Tested Ivy rendering feature with Angular 6 RC1 - error still appeared.

[elepner]

I've migrated our 1.5 years old project from Angular 2 to Angular 5. After trying enabling AOT I got ~500 errors in the project that template cannot access private variables. I personally cannot justify such behavior because it's essential for me that component and template are the single unit and thus should share variables/state. This thread (#11978) says this will be fixed with Ivy compiler but it's not clearly stated when/if it will be supported. My question is: if anyone from Angular (Ivy) team can confirm or refute that private variables in templates will ever be supported with new compiler? It's very important for our project, we should decide weather we need to fix everything now or wait Angular 6-7 to be released (we are OK to wait 4-6 month).

[emilio-martinez]

@elepner Fix it now. Not sure what you mean by "single unit" but the "share variables/state" aspect is exactly why the properties the template interfaces with should be public—that isn't a bug and I wouldn't see why that would change in Ivy.

[elepner]

@emilio-martinez A single unit means that it self contained UI+behavior component exposing little API and hiding internal state. E.g. we have a typeahead component, it has many fields binded in template like hasFocus: boolean, onCompletionEnter(): void etc. Why would I want to make them public? I want to expose only 3 field/methods like inputText, onResult(), clear(). In WPF this is achieved via partial class. I hope Angular will come to the same conclusion. @trotyl mentioned that in the thread #11978

What exactly is available in ivy? Accessing private component property in template is available, without losing type-checking. I've just checked angular ivy, but just a quick view Both TypeScript private property and ECMAScript private fields are lexical scoped, so it can be observed easily with a quick look at the (position of) generated code.

but I want to get official confirmation.

[mlc-mlapis]

... just to notice ... the possibility to use private properties in Angular 2.x was made possible by a bug and it has been eliminated later. It was never designed as a feature.

[pburgmer]

Unfortunately, as @mlc-mlapis said, it works as expected.

But imho template-component-binding should work with private instead of public fields. Otherwise you can not distinguish between fields/methods for template-binding and API for component-to-component communication.

Maybe we should discuss it in a new ticket as it is not directly related to Ivy.

[theodorejb]

To me it makes sense that private properties aren't available in the template. We take advantage of this feature in our apps, using public/private properties to differentiate between fields used in the template and internal component state that should not be used in the template.

[trotyl]

There're pros and cons for allowing private properties or not, one possible problem is the this usage:

<p>Hello {{ this.name }}</p>
<ul>
  <li *ngFor="let item of this.items">{{ item }}</li>
</ul>

It's not quite convincing to say this is another class.

Also as mentioned above there're already open issues and this is off-topic.