Hacker News Reader

Comment by exogen | Hacker News Reader

Conditional-markup solutions always look inelegant.

I'd bet this looks absolutely crazy to many developers:

    <div *ngIf="foo; then bar else baz"></div>

An essentially eval'd code string inside a markup attribute? That uses some made-up language that's neither HTML nor JS?! I used to write plenty of code like this in various template languages, and it always felt bad.

View on HN

This is best and worst part about Angular. You have this declarative way of rendering parts of a page, but once this gets abused, it becomes a pain in the ass to understand the control flow.

They don't look bad in ClojureScript, IMO.

JS:

   const sampleComponent = () => {
     return isTrue && <p>True!</p>
   };

CLJS:

   (defn sample-component [is-true?]
     (when is-true? [:p "True!"]))

Any language that has if expressions would be preferable to JS in this case, I think.

I don't understand how you'd make a declarative style any more elegant?

  <Conditional bool={true}>
    <IfTrue/>
    <IfFalse/>
  </Conditional>

Doesn't seem any better

The reason OP's complaint is a bit silly is because JSX is just JavaScript and there's no need to be doing everything in a single JSX expression in the first place. That would be bad code just like any other situation. Do what you'd do in normal JavaScript code: use multiple statements and put the conditional elsewhere. Given complicated conditionals, an experienced React dev would do:

    render() {
      let foo
      if (someCondition) {
        foo = <ChildFoo/>
      }
      return (
        <Bar>
          {foo}
        </Bar>
      )
    }

or:

    renderChildFoo() {
      if (someCondition) {
        return <Foo/>
      }
    }
    
    render() {
      return (
        <Bar>
          {this.renderChildFoo()}
        </Bar>
      )
    }

or if possible, always render <Foo/> and conditionally return null in Foo's own render() method.

> JSX is just JavaScript

No, it's not. It's the bastard child of XML and JavaScript. I agree that your examples are about the best you can do with JSX. But actually just JavaScript is much easier:

  render() {
    return Bar(someCondition && Foo())
  }

  render() {
    return Bar(someCondition ? Foo() : null)
  }

That's not quite hyperscript but it's not far from it.

I believe the OP was saying that JSX is transformed into pure javascript, not that it's literally javascript.

Digs at JSX aside, I think you may have lost track of what this thread was about: complicated nested conditionals. These are a pain to do in a single JS expression, JSX or hyperscript or otherwise – even in your example. In JSX your simple example would look just as nice:

    <Bar>{someCondition && <Foo/>}</Bar>

Reply on news.ycombinator.com