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 · 91 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.

ansarizafar commented Feb 8, 2018

Looking forward for an early release.

@AhsanAyaz

This comment has been minimized.

AhsanAyaz commented Feb 8, 2018

Super excited for this 👍 😄

@AndreaBarbasso

This comment has been minimized.

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.

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.

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.

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.

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.

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.

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.

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.

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.

LinBoLen commented Feb 12, 2018

waiting for compiler cli support

@GuskiS

This comment has been minimized.

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.

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.

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.

Contributor

fknop commented Feb 13, 2018

@Karasuni

This comment has been minimized.

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.

listepo-alterpost commented Feb 14, 2018

Will ivy allow #13764 and #13766 ?

@mlc-mlapis

This comment has been minimized.

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.

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.

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!

@Ploppy3

This comment has been minimized.

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.

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.

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.

freemanlam commented Sep 19, 2018

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

@nsksaisaravana

This comment has been minimized.

nsksaisaravana commented Sep 19, 2018

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

@avatsaev

This comment has been minimized.

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.

joseluisq commented Sep 19, 2018

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

@denisyilmaz

This comment has been minimized.

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.

joseluisq commented Sep 19, 2018

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

@vytautas-pranskunas-

This comment has been minimized.

vytautas-pranskunas- commented Sep 19, 2018

@maxime1992

This comment has been minimized.

maxime1992 commented Sep 27, 2018

@benbraou

This comment has been minimized.

Contributor

benbraou commented Oct 12, 2018

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

@naveedahmed1

This comment has been minimized.

naveedahmed1 commented Oct 12, 2018

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

@vytautas-pranskunas-

This comment has been minimized.

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.

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.

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.

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.

@marcelnem

This comment has been minimized.

marcelnem commented Oct 24, 2018

We should not expect ivy in v7. v8 is planned for March/April 2019. If we should not expect ivy in v7, is there a recommendation/consensus about what to use for internationalization (i18n) until ivy is released? - since in the new runtime implementation of i18n #16477 is dependant on ivy

@marcelnem marcelnem referenced this issue Oct 24, 2018

Open

[i18n] plans #16477

0 of 20 tasks complete
@mikesimmonds

This comment has been minimized.

mikesimmonds commented Oct 24, 2018

@marcelnem We have had good experience with
https://github.com/ngx-translate/i18n-polyfill
Using the current Angular i18n implementation alongside this means we hope we have fewer changes to make when Ivy and runtime i18n arrrives.
The author knows a lot about Angular i18n (ocombe)

@odahcam

This comment has been minimized.

odahcam commented Oct 24, 2018

We can expect IVy on V7, just not in the release. IVy should be released as a minor version as already said:

[...] since IVy was designed and implemented as a non-breaking API, it should be released in any minor version [...]

V7 is already out there, so any moment in the next months we should see at least a beta Ivy release.

@fxck

This comment has been minimized.

fxck commented Nov 3, 2018

What will Ivy mean for animations? Will there be some major improvements / changes of any sort? @matsko

@Ploppy3

This comment has been minimized.

Ploppy3 commented Nov 13, 2018

There is a popular Javascript framework benchmark that exists, I thought it would be a great idea to bring its results here to compare the performance of the current render against Ivy since @trotyl just updated the Angular Ivy entry (not sure if it the right word) to v7. In the following picture, I also added popular frameworks such as React, VanillaJs and VueJs.

Why bring other frameworks to the table you may ask? Not to start a drama, for sure, but as you know, competition drives innovation. So please, if you want to talk about this, keep the conversation centered on Angular.

From the results it is quite noticeable that Ivy gives a lot of benefits, especially regarding memory allocation and startup time, which brings it on par with other competitors and this is huge.

Though, I am kind of worried that the bench in its current state (and also its previous version) shows a
slowdown of about 7% for DOM manipulation. I know that Ivy is not complete and that those results are not final. Though it was stated that Ivy would come with speed improvements.

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

image

@PierBover

This comment has been minimized.

PierBover commented Nov 13, 2018

Though, I am kind of worried that the bench in its current state (and also its previous version) shows a slowdown of about 7% for DOM manipulation. I know that Ivy is not complete and that those results are not final. Though it was stated that Ivy would come with speed improvements.

Those results are actually quite disappointing. I was also under the impression the performance improvements would be much more significants.

@odahcam

This comment has been minimized.

odahcam commented Nov 14, 2018

They're not switching to shadow dom hehe. But the application bundle size seems to be by far the best improvement here. @Ploppy3 can you post some benchmark showing ng7 ivy vs ng7 vs ng6 and ng5?

@tatsujb

This comment has been minimized.

tatsujb commented Nov 14, 2018

Though, I am kind of worried that the bench in its current state (and also its previous version) shows a slowdown of about 7% for DOM manipulation. I know that Ivy is not complete and that those results are not final. Though it was stated that Ivy would come with speed improvements.

Those results are actually quite disappointing. I was also under the impression the performance improvements would be much more significants.

I think the thing to look at here is the script bootup time. which you do want to be on par-with competitors for basically same-set features.

and ivy seems to accomplish this although it does fall short of bypassing react or vue on this front but that is to be expected with it's greater feature set.

so personally I do see this as a positive.

the thing that worries ME though is the swap rows. why does vue get near-vanillajs perf on swap rows and we don't? what? why?

surely this can be remedied

@trotyl

This comment has been minimized.

Contributor

trotyl commented Nov 14, 2018

the thing that worries ME though is the swap rows. why does vue get near-vanillajs perf on swap rows and we don't? what? why?

@tatsujb It's about differ implementation, being requested at #18178 already, and you can check the angular-optimized column which is using a different differ.

I don't think it's a big concern as differs in Angular is just a normal provider/service, not part of the runtime, so one can always implement their own solution when have real needs. I'd rather Angular team focus on non-user-controlled parts first.

EDIT: not accurate enough, angular-optimized is still using a brute-force implementation but with better algorithm (known as bidirectional diff).

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