I'm a huge fan of Clojure's Hiccup library. It allows the user to make html like the following.

Here's a function that always returns true - but it could do any kind of data access. It is just plain Clojure.

    (defn selected? [] true)

Here is a datastructure that represents html:

    [:h2 {:class (when (selected?) "selected")} "Hello"]

Calling the function hiccup.core/html on that datastructure yeilds an html string like this:

    "<h2 class='selected'>Hello</h2>"

So that's great for _strings_ right? But there is an awesome library for ClojureScript called Reagent. And it uses those simple datastructures to generate react components!! I put some more examples at: http://hiccup.space

I love Clojure, but I'm tired of embedded DSLs, they're a dime a dozen. You can argue the benefits of Hiccup's syntax & s-expr all day, but it's still a different, and unpopular syntax for describing HTML.

The ability to copy snippets of HTML from web, or old code when refactoring, or from Clojure/Hiccup to another language & framework, or changes from developer tool, or familiarity for new engineers, or not having to care about what flavor of HTML is hip today is a huge productivity boost for me.

I would love to see push for template strings [1] in Clojure, it should be trivial with macros. It would only take some time for IDEs to catch up. They're good. So good they've even influenced Python 3 to add them.

    (defui my-component [x]
      "<h2 class=(when (selected? x) ["selected"])>Hello</h2>")

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

So you _actually_ use function names as strings? That seems like a problem, and that it would need its own special editor tooling. Yikes.

    (defui my-component [x]
      <h2 class=(when (selected? x) ["selected"])>Hello</h2>)

It's possible to macro the above to the code below, without any language extensions. IntelliJ has powerful nested DSL introspection, it would be neat if Cursive allowed to hook into this through defui's metadata for highlighting. I was a hater of JSX until I used it. Now I hate eDSLs. :D

    (defn my-component [x]
      [:h2 {:class (when (selected? x) ["selected"])} "Hello"])

> I'm a huge fan of Clojure's Hiccup library. It allows the user to make html like the following.

It helps that Clojure's syntax is based on s-expressions, and s-expressions are already isomorphic to HTML/XML.

So in a way, you're still mixing your templates and your code, but you happen to be using the same syntax for both. Which is arguably an improvement.

I don't know man. Every time I've worked with that style of approaching the problem, it feels like I'm just writing HTML with different syntax.

If (if) you already like lisp, it more feels like writing HTML with cleaner, more composable syntax. Were I working on an all-lisp team, I'd be totally happy to use it. Since I'm generally not, JSX function components seem to be the next best (or at least next-least-worst) thing.

I have discovered this little gem, allowing you to do the same in pure Javascript: https://github.com/leeoniya/domvm

The equivalent would be something like

  function() selected { return true }
  ["h2", {class: function() {if (selected()) {return "selected"}}}, "Hello"]

Not as clean, but still usable IMO

If you are trying to make a language that doesn't need a different syntax for logic and layout, do you not end up with a templating language similar to PHP? Is this the right goal?

Yes – look for example at the .erb templates that rails uses. It's still possible to do evil stuff in those, but I actually haven't seen it in practice. The whole framework is organized in such a way that people get where their logic belongs.

The worst I've seen is a bit of confusion between models and controllers. But views are usually as clean as the Gods of MVC commanded.

Scala has inline XML support.

Not a good thing, IMO, since it makes the syntax way more complicated, but there you have it.