Hacker News Reader

Comment by Touche | Hacker News Reader

How would that work in practice, though? Using Babel JSX gets compiled to React.createElement('div', null, {}). You can configure babel to output something else if you use something other than React.

So what would a standardized JSX syntax output? It can't be document.createElement since that is a web API and not a generic JS API. So what would it do, exactly?

View on HN

I've written an in depth blog post on "generic jsx", which turns JSX into function bind/currying syntax that would work fine in any framework (or not framework at all, as we currently use it).

http://tolmasky.com/2016/03/24/generalizing-jsx/

We use this generic-jsx in DemoKit: https://github.com/runkitdev/demokit , and it's really cool because you can do fancy stuff like:

      // Curry your JSX tags!
      const wordmark = <span style = "font-face:custom; font-weight:bold" />;

      .... <wordmark>hello</wordmark>

That would be actually super useful. JSX became for me the best part after writing React applications for quite a while. Performance-wise not using React is actually faster ^^ (If you take care of the dirty updating work of course)

6 years ago I wrote a proof of concept to replace a large Rails application in pure JS using prototypes and constructing the html from strings. The latter turned out to be the most messy part so I stopped that and rather refactored the legacy Rails code to do something useful.

Could be really great for super lightweight JS apps!

Its also important to consider the environment as well since JSX is potentially much bigger than the web.

JSX is much like other generic user interface markup languages[0] and like many other is simply a dialect of XML. Any interface that can be represented with XML/HTML or any other markup language can use JSX and optionally react. We are already seeing this boom with in native mobile environments with React Native, NativeScript, Titanium...

Here are several examples where JSX is used that is not a browser:

- Native desktop apps for Linux, Mac, and Windows (Not including Electron/NW.js)[1][2][3][4]

- TVs with AppleTV apps or Netflix's Gibbon[5][6]

- Command line apps as stdin/stdout with react-blessed[7]/mylittledom[8]

- Direct to Canvas[9]/pixi.js[10]

- Latex documents[11]

- Web Audio[12]

- Conole.logs[13]

- Truly custom direct to hardware[14] as some C code like: `digitalWrite(led, HIGH)`

I definitely believe JSX could use standardization separate from any implementation, JavaScript or otherwise.

[0]: https://en.wikipedia.org/wiki/User_interface_markup_language

[1]: https://github.com/sidorares/react-x11

[2]: https://github.com/grassator/react-qml

[3]: https://github.com/ptmt/react-native-macos

[4]: https://github.com/Microsoft/react-native-windows

[5]: https://github.com/ramitos/react-tvml

[6]: https://www.youtube.com/watch?v=eNC0mRYGWgc

[7]: https://github.com/Yomguithereal/react-blessed

[8]: https://github.com/manaflair/mylittledom

[9]: https://github.com/Flipboard/react-canvas

[10]: https://github.com/Izzimach/react-pixi

[11]: https://github.com/vzaccaria/jsx-latex

[12]: https://github.com/FormidableLabs/react-music

[13]: https://github.com/mohebifar/konsul

[14]: https://github.com/iamdustan/react-hardware

Perhaps providing a parser from something like the tagged template literals[1] from e.g. 'tag `string interpolation`' could be used. For ones lacking a tag, a specially named variable could be looked for (e.g. something like __xml_parser__ ) , it would be up to the program to set that global.

if would mean that jsx would look something like

    function helloEl() {return jsx <div> Hello ${name}! </div>}

as opposed to

    function helloEl() {return <div> Hello {name}! </div>}

It would be a bit different though in what is actually going on though. The top example would just desugar to

    jsx.div(`Hello ${name}`)

jsx would be looked up like any other variable. So you could just define it in global scope to point to ReactDOM

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

You can already translate JSX to `document.createElement` with babel. I haven't seen one, but I wouldn't doubt a `customElements.define` translation is coming as well.

Could you specify the dom nodes that would be created and leave the API that JSX desugars to/calls into in order to create them unspecified?

Does syntax standardization have to necessarily equate to implantation standardization?

No, but the question is what would the syntax actually do? Would it be an extension/wrapper around document.createElement? Could you have custom parsers? What would it mean for React?

Reply on news.ycombinator.com