Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

What if we'd had better HTML-in-JS syntax all along?

leontrolski.github.io

Post reply on HN
Print view View original

21–30 of 170 posts

Re: What if we'd had better HTML-in-JS syntax all along?

#22

Post by texodus »

Scarbutt wrote: post #16
flowerlad wrote: post #13

I think the JSX is just fine as an HTML-in-JS syntax. You can use JSX independently of React. Here's a 200-line library that lets you use JSX as a templating language just like Handlebars: https://github.com/wisercoder/uibuilder

What's the issue with web components that they have never took off?

My $0.02, this was mostly due to historical lagging a more out-of-the-box 'complete' solution like JSX/React, specifically in:

(1) Poor native browser support until recently, Firefox originally refused to support Web Components v0 at all (now called Custom Elements in v1, they are supported in all evergreen browsers mostly).

(1a) Available polyfills were initially buggy and had severe performance issues on older browsers.

(2) Lack of proper templating, though I personally quite adore template literals and approaches like e.g. `lit-html`.

(3) Lack of robust styling API - custom styles felt coarse and tacked on in v0 especially, and were poorly supported by pre-processors like LESS/SASS.

(4) Lots of impedance mismatch issues connecting standard JS/HTML/CSS libraries with the Shadow DOM.

Re: What if we'd had better HTML-in-JS syntax all along?

#23

Post by glutamate »

applecrazy wrote: post #17
glutamate wrote: post #8

Something close to this is possible already in JS, I'm working on a library for generating HTML in node, heavily inspired by Haskell's blaze and lucid. Example code: div( { class: "table-responsive" }, table( { class: ["table table-sm", opts.onRowSelect && "table-hover"] }, thead(tr(hdrs.map(hdr => headerCell(hdr)))), tbody( vs.map(v => tr( mkClickHandler(opts, v), hdrs.map(hdr => td(typeof hdr.key === "string" ? tex…

This actually already exists as a library. This type of syntax is called Hyperscript[1], and it's existed (at least) since 2012. [1]: https://github.com/hyperhype/hyperscript (Although this library does not look maintained anymore)

Cool! I was looking for something like this but couldn't find it. Oh well, building my own kept me sane during lockdown.

I think combinator libraries like this and one I'm building are definitely better than templating languages, although JSX can also work really well, in particular because it retains the HTML syntax making it easy to copy from the browser into code.

Re: What if we'd had better HTML-in-JS syntax all along?

#24

Post by adambard »

The "object" syntax reminds me a lot of Clojure/script's Hiccup (https://github.com/weavejester/hiccup) style, which has become a de-facto standard across many popular libraries. In hiccup, this example:

    {
        tag: "button",
        attributes: {
            "id": "baz",
            "class": "foo bar",
            "data": "1",
            "onclick": f,
        },
        children: [
            "Hello",
            {
                tag: "em",
                attributes: {},
                children: ["there"],
            }
        ]
    }
Would be represented as:

    [:button#baz.foo.bar {:data 1 :on-click f} "Hello" [:em "there"]]

Re: What if we'd had better HTML-in-JS syntax all along?

#26

Post by [deleted] »

adambard wrote: post #24

The "object" syntax reminds me a lot of Clojure/script's Hiccup ( https://github.com/weavejester/hiccup ) style, which has become a de-facto standard across many popular libraries. In hiccup, this example: { tag: "button", attributes: { "id": "baz", "class": "foo bar", "data": "1", "onclick": f, }, children: [ "Hello", { tag: "em", attributes: {}, children: ["there"], } ] } Would be represented as: [:button#baz.foo.b…

[deleted]

Re: What if we'd had better HTML-in-JS syntax all along?

#27

Post by wilsonfiifi »

glutamate wrote: post #23
applecrazy wrote: post #17

Earlier quoted context omitted.

This actually already exists as a library. This type of syntax is called Hyperscript[1], and it's existed (at least) since 2012. [1]: https://github.com/hyperhype/hyperscript (Although this library does not look maintained anymore)

Cool! I was looking for something like this but couldn't find it. Oh well, building my own kept me sane during lockdown. I think combinator libraries like this and one I'm building are definitely better than templating languages, although JSX can also work really well, in particular because it retains the HTML syntax making it easy to copy from the browser into code.

You can also take a look at mithril.js implementation of hyperscript [0]

  [0] https://github.com/MithrilJS/mithril.js/blob/next/render/hyperscript.js

Re: What if we'd had better HTML-in-JS syntax all along?

#29

Post by jannes »

brlewis wrote: post #11
52-6F-62 wrote: post #5

Earlier quoted context omitted.

Wow. I'd never heard of this. And now instead we have virtually the same thing via JSX except we now require a compilation stage to achieve essentially the same thing...

I'm sure it was one of the inspirations for JSX -- https://facebook.github.io/jsx/#prior-art

The creators of JSX (Facebook employees obviously) once said in a talk that their biggest inspiration for JSX was server-side PHP code which supports being interspersed with HTML.

Re: What if we'd had better HTML-in-JS syntax all along?

#30

Post by dukoid »

glutamate wrote: post #8

Something close to this is possible already in JS, I'm working on a library for generating HTML in node, heavily inspired by Haskell's blaze and lucid. Example code: div( { class: "table-responsive" }, table( { class: ["table table-sm", opts.onRowSelect && "table-hover"] }, thead(tr(hdrs.map(hdr => headerCell(hdr)))), tbody( vs.map(v => tr( mkClickHandler(opts, v), hdrs.map(hdr => td(typeof hdr.key === "string" ? tex…

Slightly more verbose (buying code size): https://github.com/stefanhaustein/notemplate
Post reply on HN