5 ms·

Would be nice to see JSX syntax become standardized. Clearly lots of people like it.

• Touche 10y ago
  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?
  • hyperpape 10y ago
    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?
  • benjaminjackman 10y ago
    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/Reference/Template_literals#Tagged_template_literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
  • TomatoTomato 10y ago
    Does syntax standardization have to necessarily equate to implantation standardization?
    • Spivak 10y ago
      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?
  • tolmasky 10y ago
    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/ http://tolmasky.com/2016/03/24/generalizing-jsx/ We use this generic-jsx in DemoKit: https://github.com/runkitdev/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>
    • blablabla123 10y ago
      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!
    • sscotth 10y ago
      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 https://en.wikipedia.org/wiki/User_interface_markup_language [1]: https://github.com/sidorares/react-x11 https://github.com/sidorares/react-x11 [2]: https://github.com/grassator/react-qml https://github.com/grassator/react-qml [3]: https://github.com/ptmt/react-native-macos https://github.com/ptmt/react-native-macos [4]: https://github.com/Microsoft/react-native-windows https://github.com/Microsoft/react-native-windows [5]: https://github.com/ramitos/react-tvml https://github.com/ramitos/react-tvml [6]: https://www.youtube.com/watch?v=eNC0mRYGWgc https://www.youtube.com/watch?v=eNC0mRYGWgc [7]: https://github.com/Yomguithereal/react-blessed https://github.com/Yomguithereal/react-blessed [8]: https://github.com/manaflair/mylittledom https://github.com/manaflair/mylittledom [9]: https://github.com/Flipboard/react-canvas https://github.com/Flipboard/react-canvas [10]: https://github.com/Izzimach/react-pixi https://github.com/Izzimach/react-pixi [11]: https://github.com/vzaccaria/jsx-latex https://github.com/vzaccaria/jsx-latex [12]: https://github.com/FormidableLabs/react-music https://github.com/FormidableLabs/react-music [13]: https://github.com/mohebifar/konsul https://github.com/mohebifar/konsul [14]: https://github.com/iamdustan/react-hardware https://github.com/iamdustan/react-hardware
  • sscotth 10y ago
    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.
• vjeux 10y ago
  Note that there is a formal specification for JSX: https://facebook.github.io/jsx/ https://facebook.github.io/jsx/ This has been helpful to make sure that all the tooling around JavaScript can work with JSX.