Hacker News Reader

Comment by madeofpalk | Hacker News Reader

Reading through the syntax changes they made makes me really appreciate the decisions made around JSX and how that works, syntactically. It's just javascript, and none of these weird constructs need to be added into some DSL to support it. There's the reasonably minimal html-ish syntax, then "escape to javascript" to add in conditionals or loops or whatever.

I wonder if there was (or still is) a way to do something similar for Swift and SwiftUI.

View on HN

It’s hard to claim that JSX is more “just JavaScript” than SwiftUI. If anything I’d say it’s the opposite.

Swift evolved the language hand in hand with SwiftUI so everything you see is standard there.

And in my humble opinion they did a knockout job. And this is coming from someone whose spent a ton of time evangelizing React.

SwiftUI is far more beautiful, pleasant to write, and well thought out. It does have a couple awkward points but it’s not the “DSL” or it’s defaults (it’s just Swift) which is fine, it’s all on the dev tooling, performance, debugging, random bugs, and error messaging side of things (ie, maturity).

> It’s hard to claim that JSX is more “just JavaScript” than SwiftUI. If anything I’d say it’s the opposite.

Yeah, that's fair. What I saw was that SwiftUI added special constructs to this DSL for if and ForEach statements, something which just isn't needed in JSX because it 'escapes' to JS fairly well.

Definitely think they did a pretty decent job of it - I couldn't have done better (and I can't judge whether a better job could have been done, I know next to nothing about Swift, hence my initial question), but it does strike me as unfortunate that they needed to specially re-create basic language features.

You can map over things much like react, the ForEach is not quite as clean but you can still write your .map function in the body function and then just pass it where you want. I think the strict typed nature makes some of these things a little less flexible but it wins in many other categories.

I’d say give it a twist! If you like React you’ll like it, just has different trade offs.

Surely JSX is ... well it's something that looks a lot like XML, hence the name. It's not just JavaScript, is it? It's pretty much the definition of embedding a DSL.

I've not used SwiftUI but I've used TornadoFX which is similar, but with Kotlin instead of Swift. There's no weird syntax or DSLs (even though they call it that). It's all just functions and lambdas, so the language is always there and the syntax is always consistent with what you use elsewhere. It's not like React/JSX where UI code syntactically looks different.

JSX is 'just' an XML-like syntactic sugar for making nesting function calls nicer in Javascript. Yes, its a DSL, but it keeps the "domain" extremely small and it transpiles in a very straightforward way down plain javascript

    <Container>
      <Text weight="bold">madeofpalk</Text>
      <Image src={profilePic} />
    </Container>
    
    // is syntactic sugar for
    React.createElement(Container, null,
      React.createElement(Text, { weight: "bold" }, "madeofpalk"),
      React.createElement(Image, { src: profilePic })
    );

Whenever you need 'logic', you just escape out to javascript with braces

    <Container>
      { isVerified ? <Tick /> : null }
      <Text weight="bold">madeofpalk</Text>
      <Image src={profilePic} />
    </Container>

JSX has no conditional syntax, no ternaries or any extra constructs apart from how to nest children. This is I think a simplicity that would have been nicer to see in SwiftUI.

I guess I'm not sure why this is better than the Kotlin/Tornado/SwiftUI approach of allowing you to move a lambda in the last parameter visually out of the function. So:

    container {
        text(weight = "bold") { "madeofpalk" }
        image(src = profilePic)
    }

It seems more logical and consistent with the rest of the language. The only reason for the HTML-like syntax is JavaScript's tight connection to the web, after all.

I apologise for not being clear, but the point I'm trying to make is not around the angle bracket syntax, but with how light the DSL is and for any sort of logic syntax, you just escape back to Javascript.

JSX does not have conditionals or loops in its syntax. SwiftUI does.

Interesting that in PHP days, mixing logic and markup was taboo, and now it's all the rage.

Very specifically, this is not mixing "logic and markup" in the way that was taboo.

This is all UI logic. Should a button be displayed or not. How large should this rectangle be. React encourages you to place that logic close to where it's used so it's easier to understand.

The line React devs has used is when people look at JSX and shout "separation of concerns", what they're really grasping at is "separation of languages".

So it's reinventing PHP and Java Server Pages?

I’d say it’s a re-creation of what E4X brought to ECMAscript / Actionscript. Saying JSX is similar to PHP / JSP is a gross mischaracterization imho.

It's syntax sugar which does directly translate into JS though - you could actually just write the original/underlying code.

e.g.:

    <Foo var={'a'}>
        <Bar />
    </Foo>

Becomes something like:

    React.createElement(Foo, { var: 'a' }, React.createElement(Bar))

It all boils down to

    React.createElement(component, props, ...children)

https://reactjs.org/docs/react-without-jsx.html

.nib & .storyboard files are XML based so one could conceivably write a dsl to represent interface builder xml in swift if one doesn't already exist.

SwiftUI is a definite move away from interface builder.

Those two statements contradict somehow.

Why wouldn’t Apple be able to switch XML with a Swift DSL and keep the Interface Builder UI intact after most of the biggest SwiftUI issues get fixed?

Reply on news.ycombinator.com