New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ivy Renderer (beta) #21706

Open
IgorMinar opened this Issue Jan 22, 2018 · 82 comments

Comments

Projects
None yet
@IgorMinar
Member

IgorMinar commented Jan 22, 2018

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:

@ansarizafar

This comment has been minimized.

Show comment
Hide comment
@ansarizafar

ansarizafar Feb 8, 2018

Looking forward for an early release.

ansarizafar commented Feb 8, 2018

Looking forward for an early release.

@AhsanAyaz

This comment has been minimized.

Show comment
Hide comment
@AhsanAyaz

AhsanAyaz Feb 8, 2018

Super excited for this 👍 😄

AhsanAyaz commented Feb 8, 2018

Super excited for this 👍 😄

@AndreaBarbasso

This comment has been minimized.

Show comment
Hide comment
@AndreaBarbasso

AndreaBarbasso Feb 8, 2018

@ContentChildred

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

AndreaBarbasso commented Feb 8, 2018

@ContentChildred

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

@avatsaev

This comment has been minimized.

Show comment
Hide comment
@avatsaev

avatsaev Feb 8, 2018

Contributor

I want higher order components 😄

hope Component Composition will land in the 6

Contributor

avatsaev commented Feb 8, 2018

I want higher order components 😄

hope Component Composition will land in the 6

@Ploppy3

This comment has been minimized.

Show comment
Hide comment
@Ploppy3

Ploppy3 Feb 8, 2018

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.

Ploppy3 commented Feb 8, 2018

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

This comment has been minimized.

Show comment
Hide comment
@chaosmonster

chaosmonster Feb 8, 2018

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

chaosmonster commented Feb 8, 2018

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

@trotyl

This comment has been minimized.

Show comment
Hide comment
@trotyl

trotyl Feb 11, 2018

Contributor

@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.

Contributor

trotyl commented Feb 11, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@chaosmonster

chaosmonster commented Feb 11, 2018

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

@trotyl

This comment has been minimized.

Show comment
Hide comment
@trotyl

trotyl Feb 11, 2018

Contributor

@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.

Contributor

trotyl commented Feb 11, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@avatsaev

avatsaev Feb 11, 2018

Contributor

@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?

Contributor

avatsaev commented Feb 11, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@trotyl

trotyl Feb 11, 2018

Contributor

@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).

Contributor

trotyl commented Feb 11, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@LinBoLen

LinBoLen Feb 12, 2018

waiting for compiler cli support

LinBoLen commented Feb 12, 2018

waiting for compiler cli support

@GuskiS

This comment has been minimized.

Show comment
Hide comment
@GuskiS

GuskiS Feb 12, 2018

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

GuskiS commented Feb 12, 2018

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

@trotyl

This comment has been minimized.

Show comment
Hide comment
@trotyl

trotyl Feb 12, 2018

Contributor

@GuskiS Will only be available behind a flag (non-default) in v6.
The compile build time would be greatly reduced in bazel tooling(#19058 (comment) for EAP), regardless of using ivy or not.

Contributor

trotyl commented Feb 12, 2018

@GuskiS Will only be available behind a flag (non-default) in v6.
The compile build time would be greatly reduced in bazel tooling(#19058 (comment) for EAP), regardless of using ivy or not.

@tmair

This comment has been minimized.

Show comment
Hide comment
@tmair

tmair Feb 13, 2018

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

tmair commented Feb 13, 2018

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

@fknop

This comment has been minimized.

Show comment
Hide comment
@fknop
Contributor

fknop commented Feb 13, 2018

@Karasuni

This comment has been minimized.

Show comment
Hide comment
@Karasuni

Karasuni Feb 14, 2018

Looking forward to this!

Will ivy allow components to dynamically load html templates as prophecized in #15275?

Karasuni commented Feb 14, 2018

Looking forward to this!

Will ivy allow components to dynamically load html templates as prophecized in #15275?

@listepo-alterpost

This comment has been minimized.

Show comment
Hide comment
@listepo-alterpost

listepo-alterpost commented Feb 14, 2018

Will ivy allow #13764 and #13766 ?

@mlc-mlapis

This comment has been minimized.

Show comment
Hide comment
@mlc-mlapis

mlc-mlapis Feb 14, 2018

@Karasuni ... mentioning ivy in #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.

mlc-mlapis commented Feb 14, 2018

@Karasuni ... mentioning ivy in #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

This comment has been minimized.

Show comment
Hide comment
@HerringtonDarkholme

HerringtonDarkholme Feb 18, 2018

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

HerringtonDarkholme commented Feb 18, 2018

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

@theodorejb

This comment has been minimized.

Show comment
Hide comment
@theodorejb

theodorejb Feb 18, 2018

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

theodorejb commented Feb 18, 2018

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

@robwormald

This comment has been minimized.

Show comment
Hide comment
@robwormald

robwormald Apr 4, 2018

Member

If you really have some organizational reason for this (note that most usage of Angular is in templates, where we do enforce a separation via the @Input() decorator), you could just do something like:

class SomeComponent {
  $viewModel = {
    foo: 'bar'
  }
}
<div>{{$viewModel.foo}}</div>

and you could then use a tslint rule or similar to enforce this constraint. See https://github.com/mgechev/codelyzer for some ideas - this would be a reasonably trivial thing to do via linting, vs abusing/hacking/changing the semantics of the Typescript APIs.

Member

robwormald commented Apr 4, 2018

If you really have some organizational reason for this (note that most usage of Angular is in templates, where we do enforce a separation via the @Input() decorator), you could just do something like:

class SomeComponent {
  $viewModel = {
    foo: 'bar'
  }
}
<div>{{$viewModel.foo}}</div>

and you could then use a tslint rule or similar to enforce this constraint. See https://github.com/mgechev/codelyzer for some ideas - this would be a reasonably trivial thing to do via linting, vs abusing/hacking/changing the semantics of the Typescript APIs.

@trotyl

This comment has been minimized.

Show comment
Hide comment
@trotyl

trotyl Apr 4, 2018

Contributor

@robwormald I know you may not have really considered that, but there's actually no way to disallow private property usage in current Ivy design:

image

The model of Angular template compilation is:

  • Transforming to TypeScript;
  • Performing type-checking on transformed code;
  • Mapping diagnostics issue back to template code;

So if TypeScript complains nothing for that, Angular compiler will not fail as well. (unless doing extra efforts).

Contributor

trotyl commented Apr 4, 2018

@robwormald I know you may not have really considered that, but there's actually no way to disallow private property usage in current Ivy design:

image

The model of Angular template compilation is:

  • Transforming to TypeScript;
  • Performing type-checking on transformed code;
  • Mapping diagnostics issue back to template code;

So if TypeScript complains nothing for that, Angular compiler will not fail as well. (unless doing extra efforts).

@robwormald

This comment has been minimized.

Show comment
Hide comment
@robwormald

robwormald Apr 4, 2018

Member

@trotyl true! but: I wouldn't rely on that behavior yet - we're pretty sure we're going to be doing the static class property thing, but that's subject to change :) also, I'm not sure on how this would work if/when we actually get true private properties in Javascript.

Member

robwormald commented Apr 4, 2018

@trotyl true! but: I wouldn't rely on that behavior yet - we're pretty sure we're going to be doing the static class property thing, but that's subject to change :) also, I'm not sure on how this would work if/when we actually get true private properties in Javascript.

@trotyl

This comment has been minimized.

Show comment
Hide comment
@trotyl

trotyl Apr 4, 2018

Contributor

@robwormald Technically the stage-3 private fields is also lexical scoped, so could be supported as well without inconsistency. But that require extra efforts for template parser to recognize that syntax. (If it landed in TypeScript first).

EDIT: But that's only true for AOT, supporting private fields is impossible in JIT, the current stage-2 decorator does only allow creating new private fields, but not allowed to access literal private fields or ones created by other decorator.

EDIT: Found out that class decorator do have access to literal private fields (but not new private fields added by other decorator), so should be fine.

Contributor

trotyl commented Apr 4, 2018

@robwormald Technically the stage-3 private fields is also lexical scoped, so could be supported as well without inconsistency. But that require extra efforts for template parser to recognize that syntax. (If it landed in TypeScript first).

EDIT: But that's only true for AOT, supporting private fields is impossible in JIT, the current stage-2 decorator does only allow creating new private fields, but not allowed to access literal private fields or ones created by other decorator.

EDIT: Found out that class decorator do have access to literal private fields (but not new private fields added by other decorator), so should be fine.

@glebmachine

This comment has been minimized.

Show comment
Hide comment
@glebmachine

glebmachine Apr 12, 2018

Sorry for offtopic.

Could you please, take a look at this proposal: #20713
This is very important missed functionality (comparing angularjs/vue and etc..).

This will be great to have it in Ivy Renderer. Thank you for doing great job anyway!)

glebmachine commented Apr 12, 2018

Sorry for offtopic.

Could you please, take a look at this proposal: #20713
This is very important missed functionality (comparing angularjs/vue and etc..).

This will be great to have it in Ivy Renderer. Thank you for doing great job anyway!)

@benbraou

This comment has been minimized.

Show comment
Hide comment
@benbraou

benbraou Apr 30, 2018

Contributor

By the way, I thought it would be nice to have a dedicated website to track the progress on Ivy (just like is fiber ready yet for react).

So, I created a responsive web application that does that.
url: https://is-angular-ivy-ready.firebaseapp.com/
source code: https://github.com/benbraou/is-angular-ivy-ready

It is based on a REST API that parses the STATUS.md file that is regularly updated by the Angular team
url: https://ivy-status-api.appspot.com/v1/status
source code: https://github.com/benbraou/ivy-status-api

Contributor

benbraou commented Apr 30, 2018

By the way, I thought it would be nice to have a dedicated website to track the progress on Ivy (just like is fiber ready yet for react).

So, I created a responsive web application that does that.
url: https://is-angular-ivy-ready.firebaseapp.com/
source code: https://github.com/benbraou/is-angular-ivy-ready

It is based on a REST API that parses the STATUS.md file that is regularly updated by the Angular team
url: https://ivy-status-api.appspot.com/v1/status
source code: https://github.com/benbraou/ivy-status-api

@Ploppy3

This comment has been minimized.

Show comment
Hide comment
@Ploppy3

Ploppy3 Aug 13, 2018

@benbraou I found the challenge interesting and challenging enough to give it a try.
Therefore I come to you with a different approach: client-side only, library free, and lightning fast!

URL: https://angular-evolution.firebaseapp.com/
Source: https://github.com/Ploppy3/angular-evolution

We will see how this version handles future changes of the main file!

Edit: Not sure why you are 'confused', I would like to know though :D

Ploppy3 commented Aug 13, 2018

@benbraou I found the challenge interesting and challenging enough to give it a try.
Therefore I come to you with a different approach: client-side only, library free, and lightning fast!

URL: https://angular-evolution.firebaseapp.com/
Source: https://github.com/Ploppy3/angular-evolution

We will see how this version handles future changes of the main file!

Edit: Not sure why you are 'confused', I would like to know though :D

@jasonaden jasonaden added this to the v7.0 milestone Aug 16, 2018

@vytautas-pranskunas-

This comment has been minimized.

Show comment
Hide comment
@vytautas-pranskunas-

vytautas-pranskunas- Aug 21, 2018

What about DOM Hydration (for prerendered websites for example)? Will ivy cover that?
#13446 (comment)

vytautas-pranskunas- commented Aug 21, 2018

What about DOM Hydration (for prerendered websites for example)? Will ivy cover that?
#13446 (comment)

@new-mikha

This comment has been minimized.

Show comment
Hide comment
@new-mikha

new-mikha Sep 19, 2018

I wonder is the whole Ivy thing still alive?? There was pretty much no movement in it's status page recently....

new-mikha commented Sep 19, 2018

I wonder is the whole Ivy thing still alive?? There was pretty much no movement in it's status page recently....

@freemanlam

This comment has been minimized.

Show comment
Hide comment
@freemanlam

freemanlam Sep 19, 2018

@new-mikha in repo I can see it's in active development

freemanlam commented Sep 19, 2018

@new-mikha in repo I can see it's in active development

@nsksaisaravana

This comment has been minimized.

Show comment
Hide comment
@nsksaisaravana

nsksaisaravana Sep 19, 2018

@freemanlam expect in v7.0 or it will be delayed. Much awaited feature.

nsksaisaravana commented Sep 19, 2018

@freemanlam expect in v7.0 or it will be delayed. Much awaited feature.

@avatsaev

This comment has been minimized.

Show comment
Hide comment
@avatsaev

avatsaev Sep 19, 2018

Contributor

Almost certainly won't land in 7, it will land when it's ready (to quote some of the core members)

Contributor

avatsaev commented Sep 19, 2018

Almost certainly won't land in 7, it will land when it's ready (to quote some of the core members)

@joseluisq

This comment has been minimized.

Show comment
Hide comment
@joseluisq

joseluisq Sep 19, 2018

Has maybe the team a deadline or an estimated date for releasing?

joseluisq commented Sep 19, 2018

Has maybe the team a deadline or an estimated date for releasing?

@denisyilmaz

This comment has been minimized.

Show comment
Hide comment
@denisyilmaz

denisyilmaz Sep 19, 2018

As far as I know the team decided to not give a release date not to stoke expectations. It will be ready when it’s ready.

denisyilmaz commented Sep 19, 2018

As far as I know the team decided to not give a release date not to stoke expectations. It will be ready when it’s ready.

@joseluisq

This comment has been minimized.

Show comment
Hide comment
@joseluisq

joseluisq Sep 19, 2018

Ok, it means more long time in uncertainty...

joseluisq commented Sep 19, 2018

Ok, it means more long time in uncertainty...

@vytautas-pranskunas-

This comment has been minimized.

Show comment
Hide comment
@vytautas-pranskunas-

vytautas-pranskunas- Sep 19, 2018

vytautas-pranskunas- commented Sep 19, 2018

@maxime1992

This comment has been minimized.

Show comment
Hide comment

maxime1992 commented Sep 27, 2018

@benbraou

This comment has been minimized.

Show comment
Hide comment
@benbraou
Contributor

benbraou commented Oct 12, 2018

Ivy is 92.47% complete !
http://is-angular-ivy-ready.firebaseapp.com

@naveedahmed1

This comment has been minimized.

Show comment
Hide comment
@naveedahmed1

naveedahmed1 Oct 12, 2018

Awesome news! Should we expect feature complete beta in V7?

naveedahmed1 commented Oct 12, 2018

Awesome news! Should we expect feature complete beta in V7?

@vytautas-pranskunas-

This comment has been minimized.

Show comment
Hide comment
@vytautas-pranskunas-

vytautas-pranskunas- Oct 12, 2018

While dom hydration is not solved the speed of ivy is secondary thing for PWA from my point of view

vytautas-pranskunas- commented Oct 12, 2018

While dom hydration is not solved the speed of ivy is secondary thing for PWA from my point of view

@odahcam

This comment has been minimized.

Show comment
Hide comment
@odahcam

odahcam Oct 15, 2018

@naveedahmed1 as I can understand in the chart above, that's exatly what we should expect. The Ivy beta will come after V7 release.

odahcam commented Oct 15, 2018

@naveedahmed1 as I can understand in the chart above, that's exatly what we should expect. The Ivy beta will come after V7 release.

@spock123

This comment has been minimized.

Show comment
Hide comment
@spock123

spock123 Oct 16, 2018

Awesome news! Should we expect feature complete beta in V7?

As far as i can tell, only features missing are documentation and i18n related stuff. I might have overlooked something. I realize there still needs to be a long period of bugfixing and testing so don't expect it to be ready for V7, but this is promising indeed.

Personally I don't expect to use IVY in production until sometime in the Spring.. and that' s fine. Better do this right as opposed to rush it out. Angular as we know it now already is awesome. IVY is going to be really cool but it won't change our lives, people.. :) ok maybe a bit lol

spock123 commented Oct 16, 2018

Awesome news! Should we expect feature complete beta in V7?

As far as i can tell, only features missing are documentation and i18n related stuff. I might have overlooked something. I realize there still needs to be a long period of bugfixing and testing so don't expect it to be ready for V7, but this is promising indeed.

Personally I don't expect to use IVY in production until sometime in the Spring.. and that' s fine. Better do this right as opposed to rush it out. Angular as we know it now already is awesome. IVY is going to be really cool but it won't change our lives, people.. :) ok maybe a bit lol

@manekinekko

This comment has been minimized.

Show comment
Hide comment
@manekinekko

manekinekko Oct 16, 2018

Member

The team is hard at work on IVy. You can follow the status of all the implementations here:
https://github.com/angular/angular/blob/master/packages/core/src/render3/STATUS.md

However, don't expect IVy to be ready for prime time in v7. And since IVy was designed and implemented as a non-breaking API, it should be released in any minor version, whenever it's been tested and validated.

Member

manekinekko commented Oct 16, 2018

The team is hard at work on IVy. You can follow the status of all the implementations here:
https://github.com/angular/angular/blob/master/packages/core/src/render3/STATUS.md

However, don't expect IVy to be ready for prime time in v7. And since IVy was designed and implemented as a non-breaking API, it should be released in any minor version, whenever it's been tested and validated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment