Collaborate with ng-metadata

[timkindberg]

@Hotell has written the ng-metadata project: https://github.com/ngParty/ng-metadata

The project serves the same overall purpose as ng-forward so it would be good to see how we can collaborate. This thread can serve as a place for transparent discussion.

First and foremost how do the two projects compare and contrast?

@MikeRyan52

[timkindberg]

@Hotell @MikeRyan52 basically we just want to polyfill Angular 2 as much as possible but currently we want to support ES6 and TypeScript (not just TypeScript). So that does limit us technically in some ways. Perhaps we should just go full TypeScript though if its holding us back too much. Considering ES6 isn't even really supported much by Angular 2 (it's either ES5 or TypeScript).

[timkindberg]

Wow @Hotell, I'm reviewing ng-metadata and you have quite a lot implemented! You certainly seem to have implemented your polyfill more like how the actual ng2 codebase has done it and organized it in the same way with folders/modules.

I'm not sure how you are going to feel about our codebase in that it follows a completely different structure. It's clear you've taken directly from Angular 2's codebase whenever possible, which is cool. We probably don't have the capacity to reorganize ng-forward to match the same structure :(

I totally understand that you are probably very attached to your codebase and might find it difficult to let that go and work with us on ng-forward. I'd say at the least we'd love to learn from your codebase and see if we can implement some of the features you've already added (and you could do the same from us).

Do you have any dead code? Like features that look like they are there but that aren't actually working (for example @Self(), @SkipSelf() decorators)?

I'm seeing things that you have in your code base but that we don't have are listed here. Let me know if any of these are not actually implemented:

• forwardRef: https://github.com/ngParty/ng-metadata/blob/master/src/core/di/forward_ref.ts
• DI decorators: @Self, @SkipSelf, @Inject, @Optional, @Host
• Children decorators: @ContentChild(ren), @ViewChild(ren), etc
• Angular 2 project structure and utils:
  • e.g. import Whatever from 'ng-metadata/core'
  • Wrapper utils: ListWrapper, StringWrapper, isBlank, isWhatever, etc

Does this sound about right, am I missing anything? Any other gripes with ng-forward (don't worry you won't offend us :)?

[Hotell]

Hi guys,

here are basic ideas behind ng-metadata:

• use just pure angular 1 api under the hood (no zones/rx/templates)
• allow to use same decorators and component driven architecture like angular 2 does
• when migrating to ng2, the module registration files will be just deleted
• allow seamless migration from es5 codebase to Typescript with decorators and not throwing too much new stuff on developer by introducing concepts like observables and complete different unit testing story
• don't try to create various language versions like ng2 provides, because it doesn't make sense anyway, to provide new template syntax and angular 1 registration api for ES5 code ( if you wan't do this it is much smoother to use ng-upgrade with es5 style directly )
• don't try to match template syntax to ng2, because anyway there will be a tool for that developed by angular team or we can write that tool on our own, shouldn't be to hard

[Hotell]

@timkindberg thanks for kind words!

First I've created my own logic for handling decorators and related stuff, but I've decided to look at ng2 codebase. What I saw, made perfect sense to me, so I've adopted their style of decorating classes which is very extensible. So I did complete rewrite by mirroring modularity to ng2 hehe.

Dead code:

yes it's there :)

• forwardRef
  • not used anywhere, I've just kept it for reference or any future use but it'll be deleted probably
• Children decorators: @ContentChild(ren), @ViewChild(ren)
  • not used yet, just exist to include them in future release. Implementation of this will be quite easy though

DI decorators: @Self, @SkipSelf, @Inject, @Optional, @Host

• yes they work! but wait for it.... just for directives :), because that's the only think that make sense in angular 1 context, because services are all global, only directive instances can be local with different host placements via ng1 require property.
• this feature is missing from docs though, but we are already using it in production :), will update docs in upcoming days

So what's left to be done in ng-metadata:

• @ContentChild(ren), @ViewChild(ren)
• DI via typescript type annotations design:paramtypes

[Hotell]

I've skimmed through your code base. Nah it isn't so bad :P, but the biggest pain point is that you want to support ES5 and ES6 as first class citizen. IMHO that doesn't make sense ( at least the ES5 version ).

Using @Inject on class is really inconvenient, but you can't use it within constructor parameters because babel is kind of ignorant and doesn't support parameter decorators. So maybe ngForward should drop @Inject support for ES6 version, anyway angular 2 doesn't provide any sugar for es6 users either so what's the point :)

If we do this, then I see a way for ngForward to implement @Host @Optional etc di decorators like ngMetadata does.

[timkindberg]

Talked with @Hotell, list of things in ng-metadata that is missing from ng-forward:

• Inject element controllers such as ngModel into @Directive or @Component (do we have this?)
• Support @Input and @Output for @Directive

//@Input
$scope.$watch($attrs.myFoo,(value)=>this.foo = value)
//@Output 
$scope.$evalAsync($attrs.onFoo)

• @HostBinding @HostListener