7 ms·

> However, all template languages are inherently crippled: they can never achieve the same expressiveness and power as code. Quite simply, {{# each}}, ng-repeat

> However, all template languages are inherently crippled: they can never achieve the same expressiveness and power as code. Quite simply, {{# each}}, ng-repeat and databind="foreach" are all poor replacements for something that is native and trivial in JavaScript: a for loop. On the other hand, when using a template language I can put `foreach` loops and `if` conditions right into the template itself. And when using JSX I need to calculate the result of a `for` loop before the actual template and it looks much more complex and cumbersome.

BerislavLopac 11y ago
Which is why I prefer Ractive.js to React.
- coldcode 11y ago
  I like it too when I read the docs but haven't been able to try it yet for anything real. Have you actually used it for real work?
  - BerislavLopac 11y ago
    I have, and it works great. And the fact that it uses Mustache-like templates makes it much easier to collaborate with the designers.
rattray 11y ago
Have you tried using react without JSX? I find it much nicer. Putting var R = React.createElement at the top of each file will make it more ergonomic.
escherize 11y ago
This is a great argument for using hiccup[1] and reagent[2] as well. [1] https://github.com/weavejester/hiccup#syntax https://github.com/weavejester/hiccup#syntax [2] http://www.reagent-project.github.io http://www.reagent-project.github.io
insin 11y ago
> On the other hand, when using a template language I can put `foreach` loops and `if` conditions right into the template itself. And when using JSX I need to calculate the result of a `for` loop before the actual template and it looks much more complex and cumbersome. You can inline eqivalent JavaScript statements in JSX, without typical template language limitations in terms of allowed expressions or scope: {this.props.foo > 5 && <div>...</div>} {this.props.foos.map(foo => <div>{foo}</div>)}
- xtrumanx 11y ago
  You've gotta admit though that inlining isn't the usual case. Especially if you're not using ES6 and the component your inlining is a few or more lines long.
  - insin 11y ago
    That's not been my experience - multiple lines nest quite nicely - but even when directly inlining isn't suitable (e.g. multiple if/else checks or rendering a list in a way which doesn't suit a straight .map()) I prefer creating another method and inlining the call to it, e.g. from my Hacker News API clone: <ol className="Items__list" start={page.startIndex + 1}> {this.renderItems(page.startIndex, page.endIndex)} </ol>
  - bryanlarsen 11y ago
    It depends on who's doing the coding. I've got some inlined loops that are ~20 lines long, and I think it works & looks better than assigning the loop to a variable before the render and inlining the variable.

BerislavLopac 11y ago

Which is why I prefer Ractive.js to React.

coldcode 11y ago
I like it too when I read the docs but haven't been able to try it yet for anything real. Have you actually used it for real work?
- BerislavLopac 11y ago
  I have, and it works great. And the fact that it uses Mustache-like templates makes it much easier to collaborate with the designers.

rattray 11y ago

Have you tried using react without JSX? I find it much nicer. Putting var R = React.createElement at the top of each file will make it more ergonomic.

escherize 11y ago

This is a great argument for using hiccup[1] and reagent[2] as well. [1] https://github.com/weavejester/hiccup#syntax https://github.com/weavejester/hiccup#syntax [2] http://www.reagent-project.github.io http://www.reagent-project.github.io

insin 11y ago

> On the other hand, when using a template language I can put `foreach` loops and `if` conditions right into the template itself. And when using JSX I need to calculate the result of a `for` loop before the actual template and it looks much more complex and cumbersome. You can inline eqivalent JavaScript statements in JSX, without typical template language limitations in terms of allowed expressions or scope: {this.props.foo > 5 && <div>...</div>} {this.props.foos.map(foo => <div>{foo}</div>)}

xtrumanx 11y ago
You've gotta admit though that inlining isn't the usual case. Especially if you're not using ES6 and the component your inlining is a few or more lines long.
- insin 11y ago
  That's not been my experience - multiple lines nest quite nicely - but even when directly inlining isn't suitable (e.g. multiple if/else checks or rendering a list in a way which doesn't suit a straight .map()) I prefer creating another method and inlining the call to it, e.g. from my Hacker News API clone: <ol className="Items__list" start={page.startIndex + 1}> {this.renderItems(page.startIndex, page.endIndex)} </ol>
- bryanlarsen 11y ago
  It depends on who's doing the coding. I've got some inlined loops that are ~20 lines long, and I think it works & looks better than assigning the loop to a variable before the render and inlining the variable.