4 ms·
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
by thu2111 7y ago
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.
- BillinghamJ 7y agoIt'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 https://reactjs.org/docs/react-without-jsx.html
- madeofpalk 7y agoJSX 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.
- jimbokun 7y agoSo it's reinventing PHP and Java Server Pages?
- jsjohnst 7y agoI’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.
- skocznymroczny 7y agoInteresting that in PHP days, mixing logic and markup was taboo, and now it's all the rage.
- madeofpalk 7y agoVery 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".
- thu2111 7y agoI 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.
- madeofpalk 7y agoI 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.