7 ms·

JavaScript once had a JSX-like syntax called E4X

171 points by jekrb 10y ago

riffraff 10y ago
I remember using this in a Firefox addon. Always seemed like a nice thing, but sadly it never became widespread.
vjeux 10y ago
I wrote a blog post a while ago about how JSX relates to E4X if you are interested: http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts...
nilved 10y ago
I wonder what made JSX seem like a good idea then.
- tannhaeuser 10y ago
  Don't know why this got downvoted. If a standard feature of JavaScript got no love because "XML sucks", then later becomes popular as part of a proprietary lib, this very much questions rationality and taste in JavaScript evolution.
- untog 10y ago
  Anyone that uses it ought to be able to explain that. I was sceptical when I first saw it but it really is very useful.
- hyperpape 10y ago
  The post explains a bunch of things that JSX does better. A heck of a lot of successful ideas look just like something that was tried before but without the one restriction that made that thing fail.
azernik 10y ago
Note that this is rather old (2013).
Marazan 10y ago
E4X was part of Actionscript 3. It was very nice.
- bshimmin 10y ago
  I always found it a little odd but quite pleasant - but I don't at all remember AS3's E4X having interpolation. Did I just never know about this feature (or have since forgotten - it's been, oh, half a decade at least since I've used ActionScript 3 in anger), or was it missing?
  - jsjohnst 10y ago
    It existed in AS3 too. Wasn't widely known to my knowledge though.
    - bshimmin 10y ago
      Thank you - confirmed. I just dug up a copy of Flash CS6 and tried this: var val : String = "foo"; var foo : XML = <foo><bar prop={val} /></foo>; ...and it worked. I swear this wasn't documented anywhere. That said, I just googled a few Flex examples (I never used Flex) and it seems to be common there, so I guess that explains why at least someone knew it existed!
      - jsjohnst 10y ago
        That's possibly why I knew about it then (for a brief period, I did Flex work ten years ago).
        robinduckett 10y ago
        I used to do Flex a long time ago, and I love how the frontend dev world is finally catching up to Flash from the late naughties.
        Marazan 10y ago
ads1018 10y ago
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?
samuel 10y ago
Yes! I use it from time to time in applications which have rhino as its scripting language(mirth connect and Orion's rhapsody, mainly).
midnightmonster 10y ago
In 2008 I built a production website in Helma (server side JavaScript framework running on Rhino, JS on the JVM) with E4X for the view. You could say I've been waiting for React for a long time. Also that I used way-too-niche technology for a one-off project. :-/
- tannhaeuser 10y ago
  Avantgarde rather than niche I'd say. Helma, v8cgi and co. pioneered server-side JavaScript and around 2010 inspired CommonJS for portability, which Node.js became the dominant implementation of. I believe Netscape's original web server product featured JavaScript as server-side scripting language back in 1995/6 already.
  - rurban 10y ago
    And the TU-Graz Hyper-G system => Hyperwave, which was very popular in the early internet days. It preceded WWW and Netscape by a bit.
dkarapetyan 10y ago
Anyone remember Yahoo Pipes? I wrote some flows at some point and used E4X. It was fun.
- peteforde 10y ago
  So far ahead of its' time. I was at their launch at ETech in like 2005?
  - trolliloquy 10y ago
    > So far ahead of its' time Or, JSX is so backward, behind its time?
oomkiller 10y ago
If you've ever used Mirth[1] then you've used E4X, for better or worse (usually the latter). It's still used very heavily inside of the transformers, even though Mozilla deprecated it years ago. [1] https://www.mirth.com/ https://www.mirth.com/
- HNcow 10y ago
  Haha came to the comments looking for this. Mirth is love, Mirth is life.
mccr8 10y ago
One bit of E4X trivia: a bug in the Firefox E4X implementation was taken advantage of by an exploit called "EgotisticalGiraffe", according to the Snowden documents. The implementation of E4X in Firefox was large and complex. https://www.schneier.com/blog/archives/2013/10/how_the_nsa_att.html https://www.schneier.com/blog/archives/2013/10/how_the_nsa_a...
- deleted 10y ago
  [deleted]
- luke_wagner 10y ago
  Related: http://mozillamemes.tumblr.com/post/20381316930/inspired-by-a-bugfix-which-caused-a http://mozillamemes.tumblr.com/post/20381316930/inspired-by-... http://mozillamemes.tumblr.com/post/22247147806/desperate-times-require-desperate-measures http://mozillamemes.tumblr.com/post/22247147806/desperate-ti... http://mozillamemes.tumblr.com/post/19721622462/no-matter-how-many-unstoppable-forces-appear-e4x http://mozillamemes.tumblr.com/post/19721622462/no-matter-ho...
maxpert 10y ago
Hahahaha so interesting, I posted it few days back on reddit :P and now it's here
abalone 10y ago
Yes, this was back when the web was all crazy about XML as a data transfer format (redundancies and all). The goal of E4X was to make that data format easier to work with. JSON spelled the end of that. JSX is more about XML as a development syntax, which makes more sense.
nthcolumn 10y ago
Fb says: Prior Art # The JSX syntax is similar to the E4X Specification (ECMA-357). E4X is a deprecated specification with deep reaching semantic meaning. JSX partially overlaps with a tiny subset of the E4X syntax. However, JSX has no relation to the E4X specification.
tootie 10y ago
Wait till they find out where "use strict" came from.

171 points by jekrb 10y ago

I remember using this in a Firefox addon. Always seemed like a nice thing, but sadly it never became widespread.

vjeux 10y ago

I wrote a blog post a while ago about how JSX relates to E4X if you are interested: http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts...

nilved 10y ago

I wonder what made JSX seem like a good idea then.

tannhaeuser 10y ago
Don't know why this got downvoted. If a standard feature of JavaScript got no love because "XML sucks", then later becomes popular as part of a proprietary lib, this very much questions rationality and taste in JavaScript evolution.
untog 10y ago
Anyone that uses it ought to be able to explain that. I was sceptical when I first saw it but it really is very useful.
hyperpape 10y ago
The post explains a bunch of things that JSX does better. A heck of a lot of successful ideas look just like something that was tried before but without the one restriction that made that thing fail.

azernik 10y ago

Note that this is rather old (2013).

Marazan 10y ago

E4X was part of Actionscript 3. It was very nice.

bshimmin 10y ago
I always found it a little odd but quite pleasant - but I don't at all remember AS3's E4X having interpolation. Did I just never know about this feature (or have since forgotten - it's been, oh, half a decade at least since I've used ActionScript 3 in anger), or was it missing?
- jsjohnst 10y ago
  It existed in AS3 too. Wasn't widely known to my knowledge though.
  - bshimmin 10y ago
    Thank you - confirmed. I just dug up a copy of Flash CS6 and tried this: var val : String = "foo"; var foo : XML = <foo><bar prop={val} /></foo>; ...and it worked. I swear this wasn't documented anywhere. That said, I just googled a few Flex examples (I never used Flex) and it seems to be common there, so I guess that explains why at least someone knew it existed!
    - jsjohnst 10y ago
      That's possibly why I knew about it then (for a brief period, I did Flex work ten years ago).
      - robinduckett 10y ago
        I used to do Flex a long time ago, and I love how the frontend dev world is finally catching up to Flash from the late naughties.
        Marazan 10y ago

ads1018 10y ago

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?

samuel 10y ago

Yes! I use it from time to time in applications which have rhino as its scripting language(mirth connect and Orion's rhapsody, mainly).

midnightmonster 10y ago

In 2008 I built a production website in Helma (server side JavaScript framework running on Rhino, JS on the JVM) with E4X for the view. You could say I've been waiting for React for a long time. Also that I used way-too-niche technology for a one-off project. :-/

tannhaeuser 10y ago
Avantgarde rather than niche I'd say. Helma, v8cgi and co. pioneered server-side JavaScript and around 2010 inspired CommonJS for portability, which Node.js became the dominant implementation of. I believe Netscape's original web server product featured JavaScript as server-side scripting language back in 1995/6 already.
- rurban 10y ago
  And the TU-Graz Hyper-G system => Hyperwave, which was very popular in the early internet days. It preceded WWW and Netscape by a bit.

dkarapetyan 10y ago

Anyone remember Yahoo Pipes? I wrote some flows at some point and used E4X. It was fun.

peteforde 10y ago
So far ahead of its' time. I was at their launch at ETech in like 2005?
- trolliloquy 10y ago
  > So far ahead of its' time Or, JSX is so backward, behind its time?

oomkiller 10y ago

If you've ever used Mirth[1] then you've used E4X, for better or worse (usually the latter). It's still used very heavily inside of the transformers, even though Mozilla deprecated it years ago. [1] https://www.mirth.com/ https://www.mirth.com/

HNcow 10y ago
Haha came to the comments looking for this. Mirth is love, Mirth is life.

mccr8 10y ago

One bit of E4X trivia: a bug in the Firefox E4X implementation was taken advantage of by an exploit called "EgotisticalGiraffe", according to the Snowden documents. The implementation of E4X in Firefox was large and complex. https://www.schneier.com/blog/archives/2013/10/how_the_nsa_att.html https://www.schneier.com/blog/archives/2013/10/how_the_nsa_a...

deleted 10y ago
[deleted]
luke_wagner 10y ago
Related: http://mozillamemes.tumblr.com/post/20381316930/inspired-by-a-bugfix-which-caused-a http://mozillamemes.tumblr.com/post/20381316930/inspired-by-... http://mozillamemes.tumblr.com/post/22247147806/desperate-times-require-desperate-measures http://mozillamemes.tumblr.com/post/22247147806/desperate-ti... http://mozillamemes.tumblr.com/post/19721622462/no-matter-how-many-unstoppable-forces-appear-e4x http://mozillamemes.tumblr.com/post/19721622462/no-matter-ho...

maxpert 10y ago

Hahahaha so interesting, I posted it few days back on reddit :P and now it's here

abalone 10y ago

Yes, this was back when the web was all crazy about XML as a data transfer format (redundancies and all). The goal of E4X was to make that data format easier to work with. JSON spelled the end of that. JSX is more about XML as a development syntax, which makes more sense.

nthcolumn 10y ago

Fb says: Prior Art # The JSX syntax is similar to the E4X Specification (ECMA-357). E4X is a deprecated specification with deep reaching semantic meaning. JSX partially overlaps with a tiny subset of the E4X syntax. However, JSX has no relation to the E4X specification.

tootie 10y ago

Wait till they find out where "use strict" came from.