Skip to content
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

Closed
IgorMinar opened this issue Jan 22, 2018 · 211 comments
Closed

Ivy Renderer (beta) #21706

IgorMinar opened this issue Jan 22, 2018 · 211 comments
Assignees
Milestone

Comments

@IgorMinar
Copy link
Member

@IgorMinar 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
Copy link

@ansarizafar ansarizafar commented Feb 8, 2018

Looking forward for an early release.

@AhsanAyaz
Copy link
Contributor

@AhsanAyaz AhsanAyaz commented Feb 8, 2018

Super excited for this 👍 😄

@AndreaBarbasso
Copy link

@AndreaBarbasso AndreaBarbasso commented Feb 8, 2018

@ContentChildred

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

@avatsaev
Copy link
Contributor

@avatsaev avatsaev commented Feb 8, 2018

I want higher order components 😄

hope Component Composition will land in the 6

@Ploppy3
Copy link

@Ploppy3 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
Copy link

@chaosmonster 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
Copy link
Contributor

@trotyl 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
Copy link

@chaosmonster chaosmonster commented Feb 11, 2018

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

@trotyl
Copy link
Contributor

@trotyl 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
Copy link
Contributor

@avatsaev 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
Copy link
Contributor

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

@LinPoLen
Copy link

@LinPoLen LinPoLen commented Feb 12, 2018

waiting for compiler cli support

@GuskiS
Copy link

@GuskiS 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
Copy link
Contributor

@trotyl 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
Copy link

@tmair 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
Copy link
Contributor

@fknop fknop commented Feb 13, 2018

@Karasuni
Copy link

@Karasuni Karasuni commented Feb 14, 2018

Looking forward to this!

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

@listepo-alterpost
Copy link

@listepo-alterpost listepo-alterpost commented Feb 14, 2018

Will ivy allow #13764 and #13766 ?

@mlc-mlapis
Copy link
Contributor

@mlc-mlapis 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
Copy link

@HerringtonDarkholme 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
Copy link

@theodorejb 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!

@sharikovvladislav
Copy link

@sharikovvladislav sharikovvladislav commented Nov 7, 2019

How to get DebugElement in dev build (ng serve) in Ivy?

Previuosly, we could do it with: ng.probe(selector). In Ivy there is no probe method. What is analogue?

image

@sharikovvladislav
Copy link

@sharikovvladislav sharikovvladislav commented Nov 7, 2019

Why do I wonder about DebugElement in dev build?

There are two test outputs below. One is with Ivy enabled. One is with Ivy disabled. Same version: 9.0.0-rc.1.

Ivy disabled:

07 11 2019 16:45:38.713:INFO [Chrome 78.0.3904 (Mac OS X 10.14.6)]: Connected on socket wLxAErGHIZ52HWpWAAAA with id 69969590
LOG: '>> de.attributes', Object{ng-version: '9.0.0-rc.1', tabindex: null}
Chrome 78.0.3904 (Mac OS X 10.14.6): Executed 1 of 2 SUCCESS (0 secs / 0.062 secs)
Chrome 78.0.3904 (Mac OS X 10.14.6): Executed 2 of 2 SUCCESS (0.105 secs / 0.078 secs)
TOTAL: 2 SUCCESS
TOTAL: 2 SUCCESS

Ivy enabled:

07 11 2019 16:44:53.688:INFO [Chrome 78.0.3904 (Mac OS X 10.14.6)]: Connected on socket zalDmgVWKSP5geYKAAAA with id 8272420
LOG: '>> de.attributes', Object{id: 'root-ng-internal-isolated-1', ng-version: '9.0.0-rc.1'}
Chrome 78.0.3904 (Mac OS X 10.14.6): Executed 1 of 2 SUCCESS (0 secs / 0.037 secs)
Chrome 78.0.3904 (Mac OS X 10.14.6) AppComponent debug element FAILED
        Error: Expected undefined to be null. Tip: To check for deep equality, use .toEqual() instead of .toBe().
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9877/_karma_webpack_/src/app/app.component.spec.ts:29:36)
            at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1)
            at ProxyZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)
Chrome 78.0.3904 (Mac OS X 10.14.6): Executed 2 of 2 (1 FAILED) (0 secs / 0.129 secs)
Chrome 78.0.3904 (Mac OS X 10.14.6) AppComponent debug element FAILED
        Error: Expected undefined to be null. Tip: To check for deep equality, use .toEqual() instead of .toBe().
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9877/_karma_webpack_/src/app/app.component.spec.ts:29:36)
            at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:365:1)
Chrome 78.0.3904 (Mac OS X 10.14.6): Executed 2 of 2 (1 FAILED) (0.158 secs / 0.129 secs)
TOTAL: 1 FAILED, 1 SUCCESS
TOTAL: 1 FAILED, 1 SUCCESS

Same component, same tests.

The component:

@Component({
  selector: 'example-app',
  template: `
    <button (click)="toggle()">Toggle</button>
  `,
  host: {
    '[attr.tabindex]': 'disabled ? null : 0'
  },
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  disabled = false;

  toggle() {
    this.disabled = !this.disabled;
  }
}

The unit test:

  it('debug element', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;

    app.disabled = true;
    fixture.detectChanges();

    const de = fixture.debugElement;
    console.log('>> de.attributes', de.attributes);

    expect(de.attributes.tabindex).toBe(null);
  });

Is it breaking change?

We have some unit tests broken in our project because of that.

I can't find any info in CHANGELOG (I made link for specific version which mensions bugfix about DebugElement) or in Known Issues

Should I start an issue? Or is it something known (issue in this repo, known issues anywhere, changelog) and I just should fix it in my unit tests: null -> undefined?

@lucasbasquerotto
Copy link

@lucasbasquerotto lucasbasquerotto commented Nov 7, 2019

@sharikovvladislav I don't know the reason why Ivy made such a change, being now undefined while it was null previously, but can't you change the condition to accept both null and undefined?

@sharikovvladislav
Copy link

@sharikovvladislav sharikovvladislav commented Nov 7, 2019

@lucasbasquerotto of course I can fix some unit tests somehow. The main question is:
Will this changes cause anything bad in development / production build?

Or I just have to change the unit tests and all will be fine.

@pkozlowski-opensource
Copy link
Member

@pkozlowski-opensource pkozlowski-opensource commented Nov 7, 2019

@sharikovvladislav @lucasbasquerotto could one of you file a separate issue for this particular case? There is a great chance that we are going to miss this case in the long discussion here. Thnx!

@sharikovvladislav
Copy link

@sharikovvladislav sharikovvladislav commented Nov 7, 2019

@pkozlowski-opensource Ye, sure. I will do it this evening.

@sharikovvladislav
Copy link

@sharikovvladislav sharikovvladislav commented Nov 8, 2019

@pshurygin
Copy link

@pshurygin pshurygin commented Nov 8, 2019

I think this 20s rebuild time is not typical and is probably caused by some bug, as i'm seeing much faster rebuilds on the app of similar size. Can this probably be related to #33532 or some other typechecking issue?

@fxck
Copy link

@fxck fxck commented Nov 8, 2019

How would I go about debugging it? Basically all of my build times increased, production build went from 8 minutes to 14 minutes.

Why can't you use JIT in dev build?

That's what I'm doing, but then you lose the benefits of template checking etc. As far as I know anyway.

It was my understanding that Ivy was supposed to be the best of both aot and jit combined, that you would finally be able to use it on larger projects without having to resolve to jit (as aot was already unusable for dev on larger projects - a known problem).

@vytautas-pranskunas-
Copy link

@vytautas-pranskunas- vytautas-pranskunas- commented Nov 8, 2019

Is it only me who had big belueve in I y but now it looks like it will not be so magical? Or do you think guys that they will show us magic?

@fxck
Copy link

@fxck fxck commented Nov 8, 2019

Ivy is just a groundwork for some highly requested features and I'm fine with that. But still a bit surprised by the build times, was expecting improvements from the get-go here.

@naveedahmed1
Copy link

@naveedahmed1 naveedahmed1 commented Nov 8, 2019

Lighthouse score for Mustakbil.com with Angular 9-RC1 (IVY)
(without any throttling):

Angular 8.x vs Angular 9-next.1 v Angular 9-RC1 (IVY)

1st Contentful Paint: 0.3s > 0.5s >0.3s
Speed Inex: 0.5s > 1.4s > 1s
Time to Interactive: 1.8s > 2.4s > 0.8s

Scripting 1219ms > 1547ms > 552ms
Rendering 458>292 > 145
Painting 100 >63 > 47
System 345 >268 > 271
Idle 302 > 277 > 1002

Bundle sizes:

	8.2.3	  	9.0-RC
Total	12.7mb 	> 	9.71mb
ES2015	6.18mb 	> 	4.57mb
ES5	6.43mb 	> 	5.0mb

mustakbil-matrices1

In my case production build takes 95 seconds on Angular 9-RC1 (IVY).

@vytautas-pranskunas-
Copy link

@vytautas-pranskunas- vytautas-pranskunas- commented Nov 8, 2019

@naveedahmed1
Copy link

@naveedahmed1 naveedahmed1 commented Nov 8, 2019

@vytautas-pranskunas- Angular 9 rc1 is with Ivy enabled.

@vytautas-pranskunas-
Copy link

@vytautas-pranskunas- vytautas-pranskunas- commented Nov 8, 2019

@naveedahmed1
Copy link

@naveedahmed1 naveedahmed1 commented Nov 8, 2019

Angular 8 without IVY, Angular 9.next and Angular 9.RC both with IVY

@vytautas-pranskunas-
Copy link

@vytautas-pranskunas- vytautas-pranskunas- commented Nov 8, 2019

@tayambamwanza
Copy link

@tayambamwanza tayambamwanza commented Nov 8, 2019

I remember reading that current ivy is doing backward compatibility, so that's why there's extra size and time, bit as new versions release and libraries fix compatibility they can drop the dead weight so to speak.

@albyrock87
Copy link

@albyrock87 albyrock87 commented Nov 12, 2019

Hi! A question: will markDirty<T>(component: T) and detectChanges<T>(component: T) be public APIs? As of release 9-rc1 they are not. Thanks

@sergey-morenets
Copy link

@sergey-morenets sergey-morenets commented Nov 12, 2019

Hi

The same question about renderComponent function. Will it be used in Angular 9? Angular 8 Ivy samples used it for bootstrapping. But I see in new Angular 9-rc-1 application that's absent:

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
@Ks89
Copy link

@Ks89 Ks89 commented Nov 12, 2019

Is Ivy compatible with universal?
I tried to download the example https://next.angular.io/generated/zips/universal/universal.zip and execute ng update @angular/cli @angular/core --next to upgrade to angular 9.
After the upgrade I can run npm run build:ssr && npm run serve:ssr, but when I try to navigate to the main page at localhost:4000 I get this error:

Node server listening on http://localhost:4000
Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped

Do you have any suggestions?

@naveedahmed1
Copy link

@naveedahmed1 naveedahmed1 commented Nov 12, 2019

Yes IVY works fine with SSR/Universal, we're using it on our website without any issue.

@fabionolasco
Copy link

@fabionolasco fabionolasco commented Feb 14, 2020

I just created a Hello World using Angular 9.0.1 (Ivy and AOT with build --prod), with no CSS and no Router. The final size on the browser was 135Kb.

Is that correct?

Thank you for your help!

Log:
chunk {2} polyfills-es2015.442fa3cc45520cc0d518.js (polyfills) 35.6 kB [initial] [rendered]
chunk {3} polyfills-es5.abdd41dcd206a6689f72.js (polyfills-es5) 127 kB [initial] [rendered]
chunk {0} runtime-es2015.0811dcefd377500b5b1a.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.0811dcefd377500b5b1a.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main-es2015.c3215eff7b2f311317ff.js (main) 94.6 kB [initial] [rendered]
chunk {1} main-es5.c3215eff7b2f311317ff.js (main) 116 kB [initial] [rendered]
chunk {4} styles.0e4338761429b4eb16ac.css (styles) 0 bytes [initial] [rendered]

@jorgellose
Copy link

@jorgellose jorgellose commented Feb 14, 2020

  • br compression and voila
@pkozlowski-opensource
Copy link
Member

@pkozlowski-opensource pkozlowski-opensource commented Feb 14, 2020

Given that ivy landed as a default renderer in v9, it is time to close this issue :-)

@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Mar 16, 2020

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 16, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet