Hacker News Reader

Comment by kozlovsky | Hacker News Reader

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

View on HN

> 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>)}

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.

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>

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.

This is a great argument for using hiccup[1] and reagent[2] as well.

[1] https://github.com/weavejester/hiccup#syntax

[2] http://www.reagent-project.github.io

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.

Which is why I prefer Ractive.js to React.

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?

I have, and it works great. And the fact that it uses Mustache-like templates makes it much easier to collaborate with the designers.

Reply on news.ycombinator.com