5 ms·

JSX is the first template system that I really like.

by zoul 3y ago

scrollaway 3y ago
Yeah, jsx implements this idea the right way. Of course that also means it’s not a template language :)
- madeofpalk 3y ago
  Does JSX count as 'string interpolation'?
  - yuchi 3y ago
    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.
tombert 3y ago
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 :)
- cynicalsecurity 3y ago
  Compilation of HTML. Now this is something.
  - tombert 3y ago
    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.
    - bcrosby95 3y ago
      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 https://legacy.reactjs.org/docs/introducing-jsx.html
- bcrosby95 3y ago
  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.
toastercat 3y ago
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).
- hajile 3y ago
  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.
  - recursive 3y ago
    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.
    - hajile 3y ago
      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
      - recursive 3y ago
        Well, right, but this is JSX, not JS. The rest of JSX is also illegal in JS.
spion 3y ago
And JSX is not a string templating system at all.
- hajile 3y ago
  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.
  - spion 3y ago
    The final output is not what matters for this classification.
- nitwit005 3y ago
  You could make it output HTML instead of DOM elements fairly easily, and that's what server side renderers do.
  - spion 3y ago
    Its still a structural template system, even if the output is a string
a_humean 3y ago
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)))
- kroltan 3y ago
  Tomato tomato, it is a templating system for a tree like data structure, rather than going through the middleman of a textual representation.
- deleted 3y ago
  [deleted]
taeric 3y ago
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 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.

JSX is the first template system that I really like.

by zoul 3y ago

JSX is the first template system that I really like.

scrollaway 3y ago

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

madeofpalk 3y ago
Does JSX count as 'string interpolation'?
- yuchi 3y ago
  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.

tombert 3y ago

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 :)

cynicalsecurity 3y ago
Compilation of HTML. Now this is something.
- tombert 3y ago
  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.
  - bcrosby95 3y ago
    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 https://legacy.reactjs.org/docs/introducing-jsx.html
bcrosby95 3y ago
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.

toastercat 3y ago

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).

hajile 3y ago
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.
- recursive 3y ago
  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.
  - hajile 3y ago
    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
    - recursive 3y ago
      Well, right, but this is JSX, not JS. The rest of JSX is also illegal in JS.

spion 3y ago

And JSX is not a string templating system at all.

hajile 3y ago
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.
- spion 3y ago
  The final output is not what matters for this classification.
nitwit005 3y ago
You could make it output HTML instead of DOM elements fairly easily, and that's what server side renderers do.
- spion 3y ago
  Its still a structural template system, even if the output is a string

a_humean 3y ago

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)))

kroltan 3y ago
Tomato tomato, it is a templating system for a tree like data structure, rather than going through the middleman of a textual representation.
deleted 3y ago
[deleted]

taeric 3y ago

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 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.