-
Notifications
You must be signed in to change notification settings - Fork 24.8k
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
JSX like templates in angular #5131
Comments
Agree that this might be nice for folks who like JSX, but it will have to be an external contributor who works on it rather than the core team as most of this is opinion rather than benefits. My thoughts: 1 & 4: can work fine with Angular 2 templates. Already demonstrated start of this in WebStorm. Coming in other IDEs soon. 2: Angular likely performs better than JSX as compilation happens as a build step (landing soon). 5: Yes, this could be nice and could work well for folks using Flux style data flow. There will likely soon be more components in native Angular 2, however, so not so sure of the actual benefit to the ecosystem. In general, we like the HTML-spec compliant template as all tools work with them and designers have easier time interacting with them. |
@bradlygreen @malekpour I have an example here where I integrate a Flux/React based component into an Angular 2.0 component: Some more details here too: |
@bradlygreen I agree on almost all of your points. I didn't mean to change anything in the current Angular 2 design or removing the run time template parsing which I am a big fan of. To clarify what I mean please compare these two components: @Component({
selector: 'key-up',
template: `
<div>
<h4>Give me some keys!</h4>
<div><input (keyup)="onKey($event)"><div>
<div>{{values}}</div>
</div>
`
})
class TestComponent {
values = '';
onKey(event) {
}
} @Component({
selector: 'key-up',
templateJsx: (
<div>
<h4>Give me some keys!</h4>
<div><input (keyup)={ onKey($event) }><div>
<div>{{values}}</div>
</div>
)
})
class TestComponent {
values = '';
onKey(event) {
}
} While onKey in the first template is double quoted string inside another multi line string, in the JSX template it is an identifier and it makes more sense. Also compiler would generate something similar to this which I strongly doubt if any parser can perform better than this at run time. AngularJsx.create("div", null,
AngularJsx.create("h4", null, "Give me some keys!"),
AngularJsx.create("div", null, AngularJsx.create("input", {keyup: onKey($event) })),
AngularJsx.create("div", null, {values})
) I am not aware of the plan you mentioned in your comment (number 2), but even better if angular will support compiled templates. So the JSX compiler will output the same. And don't forget that this will be a great attraction for react community members to contribute or migrate. |
And this is funny, I randomly copied the above component snippet from https://angular.io/docs/ts/latest/guide/user-input.html page. Only when I tried to compile the JSX template, I realized that the |
@malekpour you may want to have a look at the design documentation for the template compiler - it outputs code not unlike JSX : https://docs.google.com/document/d/11r8IuS4xDyhVSEBp7fDYo7aiLYsLEXKs4lPd36umUGM/edit That said, you could certainly implement this as a 3rd party render plugin - in fact, we have a react-native renderer that might get you started: https://github.com/angular/react-native-renderer/ @thelgevold super cool demos by the way - your components page is great! |
Thanks @robwormald I appreciate that! |
I never liked the idea of XML in my JavaScript. The only benefit I can see is static analysis of template HTML strings. It's possible to write static analyzers that lint those HTML strings though. You can either mark the template strings with a tag function like html`<div>...</div>` or somehow use TypeScript type system to hint a string is HTML... |
I like templateJsx. |
+1 templateJsx
|
This issue is solving in Typescript project, see @MikeRyan52 comment in #7100. |
When using TypeScript the templates are strongly typed (TSX) this helps to prevent errors and to provide a better development experience I 👍 for TSX template support! |
Unlike politicians I'm not afraid to say I've changed my mind about JSX! Using TypeScript and JSX (TSX) has been a pleasure in my recent react project. Typed HTML is really great! |
See below for typed HTML that's actually HTML, coming soon to an Angular near you |
this is great. Will this also be possible in linked html templates via templateurl? I don't understand the closing of the other issue. This is more a typing thing than a jsx one? |
@robwormald It's great than jsx. |
TSX and in general JSX benefits are not limited to editor intellisense and syntax coloring. I personally like the way JSX naturally eliminates run-time parse and AST generation, comparing to current Angular 2 template parsing or even future build time template compilation. Please do not forget that |
I like where TypeScript extensibility is going to and I can see some day typescript drops all of JSX stuff and move it to an extension. What I saw on the issue referenced above is better than JSX actually. JSX has its own pitfalls like |
@mohsen1 I agree that TypeScript Extensibility is so cool, but why
|
@malekpour because it can be solved in programming language level? |
@mohsen1 You are right that it can be solved in programming language level. In fact it is already solved by TSX and supported by TypeScript for a while now. Regardless of how TypeScript Extensibility can help in development time, value type of |
This is not true. There is already a PR open that will compile templates as part of the build step instead of at runtime #7155 |
@MikeRyan52 So, simply that is true unless you post-compile templates in an additional build step. |
I don't exactly know how TypeScript extensibility will work out with Angular but I hope it's going to be better than TSX. Two issues I have in TSX that I think the new proposal will fix:
|
In TSX you can use This 10 line jsbin shows how easily a TSX template works |
Yes, I'm aware of that. Thank you for the gist though! |
Maybe I missed something - in this case sorry for the following… From my point of view, angular runtime have to analyze both template-string and templateUrl-file in order to composite Component tree. "Analyze" means to convert string to any JavaScript representation (object tree or something similar). TSX (parsed into JavaScript object tree by TypeScript, in compile time) could be another representation of Angular template. Maybe I am wrong but solving microsoft/TypeScript#6508 issue must be much more difficult than using JavaScript object tree as another Angular template representation. Besides,
I think that “Template as function” is a bit different from "JSX like templates in angular" so I created new #7339 issue. Angular 2 orientation on Typescript (together with "Angular - one framework" concept) was one of the main reasons I left React to Angular. The only thing I am missing now are strictly typed functional templates. Thanks @malekpour for many excellent arguments supporting TSX/JSX/functional templates idea. I believe Angular team will listen to them. |
Another React and JSX lover chiming in: everything about NG2 is fine until there's the "good old" HTML templates coming in with the custom attributes for onClick, onBlur and other ev. handlers, basic map functions, etc. I'd like to ask - WHY? Why NG2 templates must contain some obscure HTML-like attributes that accepts a string to run a loop? Why the the ev. handlers must have some kind of prefix? Why it must NOT be consistent to the usual HTML that front-end devs work with? Look at JSX. It's very simple. It has very clean, approachable and well-defined syntax. Scopes are very clearly defined by the correct usage of curly braces. It's plain JS. It doesn't try to reinvent the wheel like NG2 templates. And speaking of the ease for designers to modify the rendered content (HTML vs JSX), from my experience, if a designer is capable, it's very easy for him to explain how JSX works instead of all the weird *ngIf, etc. HTML attrs. For me, personally, JSX is the clear winner here. Of course, that's debatable and it's a matter of habit in general, but at least both sides are allowed to speak out and compare things :) |
@Inlesco just have to note, that I find it unlikely that a designer will have a better time modifying an JSX template with JS involved in it, rather than an HTML that has |
@gioragutt a designer finds it difficult to modify xml templates for android apps. That's not a valid reason to use html for building android apps |
@m3l7 consider this:
versus
And so on. Of course this is opinionated, I'm not saying one approach is absolutely better than the other. Unlike what I always hear from React developers: This also implies for all other frameworks/libraries out there. All this |
@gioragutt it's not an opinion. Type checking in templates is a huge step forward. For the second point: correct, that's why many people take angular and try to improve it (i.e. by adding jsx/tsx) |
@m3l7 Yes, type checking is important, and is possible in Angular templates with typescript language service. On the other hand, having unlimited expressiveness in templates hinders tooling support and has other implications, such as how much energy one potentially needs to spend understanding a template file. On that one can have opinion whether it is worth the power and consistency of having same language. |
@m3l7 As @egaga said, You can have Type checking and linting and validation in general in html templates. In fact, this comes built in with angular today. I think that it's might worth mentioning that comparing Also, take for example: |
See - https://github.com/angular/vscode-ng-language-service Our position on this has not changed, nor is it likely to. You are, of course, welcome to integrate React or any of the JSX-based libraries into Angular, as it's trivial to do yourself. We will not be supporting this in Angular core. |
Then u just open the market for Vue |
@robwormald We need a way to have strong type html integrated with typescript, finding references and refactoring features based on this references. The same for selectors of components, We should not use a selector name string based, instead use the class name of the component, so we can find references based on the class instead the selector and do quick refactoring instead finding and replacing. C'mon guys angular can do it better on this, please take a decision soon before it is too late. |
@bradlygreen Please make it happen a lot of benefits will be for angular if this happens |
Are there any third party libs that can accomplish this as of right now? |
@John0x It would be counter productive to use angular without its native features / choices 🌹 |
please make this happen :) |
The fact that people are actually using the |
@KamiShikkaku ... if you like JSX so much, you may be interested in the NG-VDOM, introduced by @trotyl ... see: |
lets not forget about this |
I don't really get why Angular devs are against the variety of templating languages available on the market. The more we have, the better, especially if it's something thought-out, powerful and TS-compatible like JSX. If JSX happens and, presumably, hits the deck big time, some will continue to use NgJs' HTML templating, some will jump ship and migrate their apps to JSX. Where's the problem here? Definitely nowhere, the way I see it. |
@Inlesco ... not sure that it's true.
|
@Inlesco probably |
I have a component with dynamic dropdown menu which I want to configure from within the child components (context menu). This is 5 mins work with React, what about Angular? |
@mitevdev ... a component with dynamic dropdown usually has an input with its configuration. Not sure what a child component (context menu) is and why it's a child of the dropdown component at all. |
There is a component A (parent) which is a wrapper for component B (child). A has a toolbar wich can be customized by component B. There are many different implementations of B but A stays always the same. The contents of that toolbar may vary with the implementation of B. Of course, I can "predict" all possible combinations and use *ngIf or *ngSwitch but this is not so elegant as if component B could just sent the contents (elements) configured as views and callback handlers as well (which is exactly what React supports). |
@mitevdev I think |
@khaledosman good point, looking for The idea behind is to define the toolbar's elements within child component B:
Component A fetches the IDs of that elements and use <ng-container *ngTeplateOutlet=""> to render the elements defined in B.
The only I need to test is if the elements IDs are available on global scope without the need to disable the default component encapsulation. UPDATE: It works ....! |
Not that I'm against people asking for help, but @mitevdev's problem is barely even tangentially related to the issue of support for JSX in Angular. Would be nice to stay on topic. |
@John0x "Are there any third party libs that can accomplish this as of right now?" My google-fu has turned up this currently experimental library: ng-vdom. I've not yet tested it, but it claims to provide support for React style render() methods with JSX inside Angular |
The best solution to this problem is to use React. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
It would be cool to support JSX like templates in angular 2. JSX can hold all required information required to generate the DOM at run time. Following are some benefits come with JSX to angular:
The text was updated successfully, but these errors were encountered: