class FooBar extends Element {
render() {
return <form.foobar>
<button.foo>Foo</button>
<button.bar>Bar</button>
</form>
}
// event handlers:
["on click at button.foo"](evt,button) {
console.log("click on button foo")
}
["on click at button.bar"](evt,button) {
console.log("click on button bar")
}
}
document.body.append(<FooBar />);
And there is a slight difference between Sciter's components and React ones. Sciter component is real DOM element:
const foobar = document.$("form.foobar");
foobar instanceof FooBar; // true
It's like the folks who refused to use anything but the DOM APIs when JQuery was sitting right there. Or who keep on using onclick handlers on their div tags instead of using perfectly good HTML tags like:
<a>
<button>
<input type="submit">
<details>
Would you mind elaborating on what the better options are? The way I see it, there are a few possible alternatives:
1) Keep the same runtime DOM representation but use normal JS (something like `div({className: 'beer'})`). I know some people disagree, but I strongly believe that this is strictly worse than JSX because it's more verbose and far less readable.
2) Use string templates parsed at runtime. You lose most of the structure you get with JSX—static syntax checking, type safety, autocomplete, etc. Composition becomes a matter of string concatenation, which is possibly the worst way to do it. On top of that, you have to learn templating primitives specific to your templating library instead of being able to simply use what you already know: JavaScript.
3) Use templates parsed at compile-time. This removes most of the drawbacks of #2, but you still have to learn a new templating language and all of the idioms that come with it. On top of that, you're entirely dependent on IDE integration for syntax highlighting and autocomplete. (I realize that JSX has the same problem with custom syntax, but the tooling around it is ubiquitous by now.)
You could make a strong case for #3 being a good way to do templating, but there is no "best" or "most maintainable" option; there are only tradeoffs. JSX happens to have a really good set of tradeoffs going for it, and no one has (yet) created anything that's strictly better.