Hacker News Reader

Comment by zoul | Hacker News Reader

JSX is the first template system that I really like.

I don't know, it's OK, but I don't really think conditional ternary or short-circuited logical operators are better than dedicated conditional blocks for a templating language. Or array methods over dedicated loop constructs.

It also has some weird gotchas (have to use className when you mean class).

I wouldnt call it a "gotcha". Using vanilla javascript you'd be using className as well:

    document.body.className = 'class1 class2'

JSX chose to align names to the DOM spec [0]. Same for htmlFor and friends.

[0] https://dom.spec.whatwg.org/#ref-for-dom-element-classname%E...

It's a gotcha because it looks wrong. The surface syntax looks like a tag, which prompts the thought "class". You've got to have additional information to know that's not what's needed.

> JSX chose to align names to the DOM spec [0]. Same for htmlFor and friends.

And the DOM spec changed these names because "class" and "for" are reserved words in Java (and if you look closely, you'll notice that the main target language for the DOM spec was Java). If you're writing a template language, you don't need to be bound by reserved words in another language, and matching the original attribute name is more intuitive than matching the underlying DOM implementation.

(But I can understand why JSX did that: since it maps directly to DOM calls, using the same name as DOM avoids the need for a table mapping from the attribute name to the DOM name. That is, implementation convenience was more important than usability.)

JS has proposals to add those. Unfortunately, the spec team is busier with garbage like private class variables.

The className thing is transitory. `class` was reserved in all non-string contexts previously, but in modern JS, you can add it bare in places like object literal keys. Preact allows you to use `class`, but react is more conservative.

Seems like a weird place to apply conservatism. That is, right after inventing entirely new tokens and grammar. But the keyword semantics SHALL NOT be modified.

Historically, you couldn't use ANY of them as object literal keys without risking problems. I believe it was an oversight.

JS has reserved a really long list of keywords that have been around for a long time.. I've seen this occasionally trip up new JS programmers because the words are special without having any use.

abstract, arguments, await, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, eval, export, extends, false, final, finally, float, for, function, goto, if , implements, import, in, instanceof, int, interface, let, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with, yield

Well, right, but this is JSX, not JS. The rest of JSX is also illegal in JS.

I understand the rationale behind using the native constructs of JavaScript as much as possible, but this is where I feel Solid.js made a reasonable compromise to pragmatism. There are JSX constructs for conditions and looping, making certain things easier or clearer to express.

Preact uses class="..." in JSX with no problem, as well as style="..." attributes. I get why React made those decisions when the idea of JSX was unproven and controversial, but it seems weirdly calcified, there's really no reason to keep up these peculiarities.

I think I like Clojure's Hiccup/Reagent a bit better. It gives you a structure that's basically the same as vanilla HTML, but it uses vanilla Clojure data types and keywords to do it.

Doing this makes testing trivial, and you also don't need to worry about closing tags as much. As far as I can tell, the compilation is fast enough to where the overhead of translating to HTML doesn't seem to take any amount of time.

Plus I just really like Clojure :)

Yeah, I really enjoy Hiccup's solution. Writing declarative structures for declarative "code" (html) in a declarative language (Clojure) just makes everything mentally work right for me.

Whenever I had to write JSX I have a lot of weird internal "switching" going on in my head.

Compilation of HTML. Now this is something.

Is that really any different than JSX? I'm assuming that JSX doesn't just directly do `"<div>" + user.name + "</div>"`. Presumably it maps it to some kind of data structure and eventually compiles that into something that can be rendered.

JSX is compiled into plain old Javascript react code. Or at least it used to, but I don't know if it still does - I don't use react these days:

https://legacy.reactjs.org/docs/introducing-jsx.html

Its not really a templating system - its just syntactic sugar for making very nested function calls that evaluate to a tree like data structure.

JSX: <div><div><div></div></div></div>

Compiles to: createElement('div', null, createElement('div', null, createElement('div', null)))

Tomato tomato, it is a templating system for a tree like data structure, rather than going through the middleman of a textual representation.

I was fine just transliterating html into functions. Most any language can make it so that `div(id("some id"), class("some classes"), text("Some <div><safe></div> text"))` would work fine. Yes, it is verbose, but so is HTML, all told.

That said, the problem always came down to the tooling aspect. If I'm just building my own toy web pages, this works great. See https://taeric.github.io/Sudoku.html for a rough look. Want to integrate with content authors and take in the pages that they are making? Yeah, this is terrible for that.

Yeah, jsx implements this idea the right way. Of course that also means it’s not a template language :)

Does JSX count as 'string interpolation'?

By definition, no. JSX is syntax sugar to some underlying function that transforms a JSX element (made by tagName, props, children) into something else. That could be a string, but usually it produces an abstract node representation, an object that collects those three parts.

And JSX is not a string templating system at all.

It's a macro, but you can vary the function that handles the output.

The builtin Server-side React renderer outputs an HTML string instead of a vdom.

The final output is not what matters for this classification.

You could make it output HTML instead of DOM elements fairly easily, and that's what server side renderers do.

Its still a structural template system, even if the output is a string

Reply on news.ycombinator.com