11–20 of 170 posts
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...
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.
I don't see why it couldn't just live beside the current Element API.
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?
To check this, note that Hamlet produces `Html` [2], which (when following the link) is defined to be `Markup` [3], which is in turn `MarkupM` [4].
[1]: https://hackage.haskell.org/package/blaze-markup-0.8.2.3/doc...
[2]: https://hackage.haskell.org/package/shakespeare-2.0.24/docs/...
[3]: https://hackage.haskell.org/package/shakespeare-2.0.24/docs/...
[4]: https://hackage.haskell.org/package/blaze-markup-0.8.2.3/doc...
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
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…
[1]: https://github.com/hyperhype/hyperscript (Although this library does not look maintained anymore)
[1] http://reagent-project.github.io/ [2] https://github.com/weavejester/hiccup
https://reactjs.org/docs/react-api.html#createelement
In any case I find JSX quite productive only without React or a VDOM.
It may be interesting to recall that initially the only way to output HTML was by `document.write()` using strings (which was pretty declarative).
The genuine way of generating HTML in JS were various methods of `String.prototype` for generating HTML formatted output, as `anchor()`, `big()`, `blink()`, `bold()`, `fixed()` (providing "…"), `italics()`, `link()`, `small()`, `strike()`, `sub()`, `sup()`. However, there was no provision to set an ID or any other attributes or className, since these things (and CSS) hadn't been introduced yet, with the notable exception of the "name" attribute for anchor tags, the value of which was to be supplied as an argument to the `string.anchor()` method. This was pretty much sufficient to generate any of the HTML required then.
The first occasion for a more complex approach was the introduction of the `Link` and `Image` objects, which allowed for the first time not only a representation of a DOM object, but also means to manipulate their attributes on the fly (e.g., changing image sources), but this came only with Netscape Navigator 3.0 / JavaScript1.1.
Also, keep in mind that the JS object notation (object and array literals) was only introduced in the ECMA standard, which came another browser iteration later. Initially, in JavaScript1.0 (AKA LiveScript), there hadn't been even Array or Object constructors in the core language (these came, again, with JavaScript1.1), but only functions. (Meaning, you had to construct your own arrays from generic functions). Hence, something like a declarative HTML-in-JS syntax would have been totally out of place.