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

1–10 of 170 posts

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

#3

Post by pier25 »

I've been thinking about this for some time now and I totally agree. Maybe not with the implementation but with the idea that we need a better native way of working with markup.

> It would be constantly staring us in the face that our html is just structured data

Not only html, but css too.

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

#4

Post by unilynx »

db48x wrote: post #2

Don't forget E4X: https://developer.mozilla.org/en-US/docs/Archive/Web/E4X_tut... It never really caught on.

That MDN article is fairly limited - a whole javascript syntax for querying documents came with it: https://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e...

In the end we jumped from ES3 to ES5, skipping all of E4X. I wonder if we're better off.

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

#5

Post by 52-6F-62 »

db48x wrote: post #2

Don't forget E4X: https://developer.mozilla.org/en-US/docs/Archive/Web/E4X_tut... It never really caught on.

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

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

#6

Post by one-punch »

Reminds me of the “Shakespearean Templates“ [1] from the Yesod web framework [2].

[1]: https://www.oreilly.com/library/view/developing-web-applicat...

[2]: https://www.yesodweb.com/

Copied below to save you a click:

Hamlet (HTML)

    $doctype 5
    
        
            #{pageTitle} - My Site
            
        
            #{pageTitle}
            
Here is a list of your friends:
            $if null friends
                
Sorry, I lied, you don't have any friends.
            $else
                
                    $forall Friend name age #{name} (#{age} years old)
            ^{copyright}
Cassius (CSS)

    #myid
        color: #{red}
        font-size: #{bodyFontSize}
    foo bar baz
        background-image: url(@{MyBackgroundR})
Lucius (CSS)

    section.blog {
        padding: 1em;
        border: 1px solid #000;
        h1 {
            color: #{headingColor};
        }
    }
Julius (JavaScript)

    $(function(){
        $("section.#{sectionClass}").hide();
        $("#mybutton").click(function(){document.location = "@{SomeRouteR}";});
        ^{addBling}
    });
For those curious, the above is implemented in the metaprogramming framework of Template Haskell.

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

#7

Post by eyelidlessness »

db48x wrote: post #2

Don't forget E4X: https://developer.mozilla.org/en-US/docs/Archive/Web/E4X_tut... It never really caught on.

I mean, it kind of caught on. It's syntactically very close (if not identical) to JSX. It just caught on in a different form/technology than what was built into Gecko. I think if it had been introduced later, with the kinds of performance seen in VDOM implementations, it may have had a greater chance of becoming a web standard.

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

#8

Post by glutamate »

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" ? text(v[hdr.key]) : hdr.key(v))
              )
            )
          )
        )
      )
The first argument to a tag is optionally an object with the attributes, any subsequent arguments are children of the tag, or an array with the children.

EDIT:

the library as a gist: https://gist.github.com/glutamate/69d38fb1d2024cb829edfff57d...

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

#9

Post by eyelidlessness »

one-punch wrote: post #6

Reminds me of the “Shakespearean Templates“ [1] from the Yesod web framework [2]. [1]: https://www.oreilly.com/library/view/developing-web-applicat... [2]: https://www.yesodweb.com/ Copied below to save you a click: Hamlet (HTML) $doctype 5 #{pageTitle} - My Site #{pageTitle} Here is a list of your friends: $if null friends Sorry, I lied, you don't have any friends. $else $forall Friend name age #{name} (#{age} years…

Does Hamlet produce structured data, or a string?

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

#10

Post by tjansen »

db48x wrote: post #2

Don't forget E4X: https://developer.mozilla.org/en-US/docs/Archive/Web/E4X_tut... It never really caught on.

Yes, I am still sad about this. A simplified XML (without entities, PIs and CData sections), XHTML and E4X would have been an awesome platform. Almost as simple as JSON, and with a single format for both data and markup.
Post reply on HN