3 ms·
I can't quite see the logic behind a markup syntax for a transpiler to output code that builds other markup. Can someone with a better understanding explain wh
by themartorana 12y ago
I can't quite see the logic behind a markup syntax for a transpiler to output code that builds other markup.
Can someone with a better understanding explain what the benefit is here? It doesn't seem easier than JS or HTML so I don't understand the point of the abstraction. But I haven't built much on the browser-side in a few years so I am certain I am missing something.
- hderms 12y agoI think it's mostly to avoid the whole mess of having Javascript arbitrarily selecting DOM elements that are declared elsewhere and then manipulating them/cloning them to create some new DOM. If you were creating some DOM/code component intended to act as a black box, it may be conceptually simpler to have the DOM part of it created via code and explicitly referenced by the code. YMMV
- hcarvalhoalves 12y agoIn the "perfect world", we would be using LISP, and our code would be data and our data would be code. We're stuck with JS, so it's convenient to have a declarative syntax that compiles to JS, because nested function calls suck. As the doc states: > The purpose of this specification is to define a concise and familiar syntax for defining tree structures with attributes. This can be used for anything, it has nothing to do with HTML actually. Just like there are many languages and frameworks where you describe UIs with some flavor of XML that compile behind the scenes to API calls to create windows, append buttons, etc.
- coldtea 12y ago>In the "perfect world", we would be using LISP, and our code would be data and our data would be code. Well, it wouldn't be that perfect, because then we'd be forced to live with that Lisp (lack of) syntax.
- lispm 12y agoWell, Lisp has a lot of syntax. It just looks and works different. For example the syntax of IF is: if test-form then-form [else-form] Examples: (if foo 1 2) (if foo 1) That means: after IF there are exactly two or three expressions. LET looks more complicated: let ({var | (var [init-form])}*) declaration* form* Example: (let ((foo 10) bar) (declare (integer foo)) (setq bar foo) foo) Note, the notation with parentheses is not the syntax of the Lisp programming language, but of symbolic expressions. The Lisp syntax is defined on top of s-expressions. Not every s-expression is a valid Lisp program. For example the following are not valid Lisp expressions, but still valid s-expressions: (if foo 1 2 (3) (4)) (let a (declare (integer 10)) 3 + a)
- hcarvalhoalves 12y ago> Well, it wouldn't be that perfect, because then we'd be forced to live with that Lisp (lack of) syntax. ... then someone would invent LispScript; later it turns out LispScript sucks as a declarative syntax, so someone else would invent LSX that compiles to LispScript that compiles to LISP :)
- tracker1 12y agoFirst, your markup for the component lives with the JS handling for that component... you can require in child components and render them in the same manner.. using harmony/es6 syntax... var React = require('react') var other = require('../other-control') var { div, h2 } = React.DOM; module.exports = React.createClass({ render: function(){ return div({className="foo"}, [ h2(null,'My playa'), other() ]); } }); I don't use the JSX syntax, for testability, coffee-script can be a lot cleaner... With multiple components in a larger application and webpack it gets really nice.