[majewsky]

So I'm looking at the example JS snippet and suddenly it embeds HTML in the middle. Can someone who knows current JS explain how this even parses?

[dianthrow]

What you are looking at is called JSX[1]. It's not valid JavaScript, but is turned into function calls by transpilers such as Babel[2]. It's used as a more HTML-like syntax of writing function calls that output a representation of the DOM known as a "virtual DOM". You can embed JavaScript inside of JSX by using single curlies.

[1] https://facebook.github.io/jsx/

[2] http://babeljs.io/

[ryandvm]

It's JSX which is basically PHP reborn as a front end technology.

Everything old is new again...

[enobrev]

JSX is more like Cold Fusion, I think.

[jbucaran]

I remember I was perhaps 17 and while I really didn't understand very well what ColdFusion was about, I wanted to try it out so badly. Unfortunately, it wasn't free, so I was never able to get do anything with it. I enjoyed AS3 to the fullest though.

[enobrev]

My first major development project was an intranet I wrote in Cold Fusion 4.

I was an on-site support tech for a software company who wrote software for tracking market data for trading companies around Wall Street. The company used a huge MS Access "app" to track our knowledge base and customer support requests. The app obviously took a ton of time to develop but was slow and difficult to use and required a weekly upload / merge to the main office in Colorado.

So one day while strolling around downtown after lunch, I randomly happened upon some guy selling business and programming books on a table on the sidewalk (on Broad Street for those familiar). I bought a book on Cold Fusion 4 for $20 and over the next two months put together a prototype in my spare time that was a slick interface on top of the Access Database.

It was a hit with the NY office, and after about a year of working on it in my spare time, the whole company started using it. They replaced the Access app with my intranet and hired a SQL server guy to manage the database behind it. They didn't want me to leave my on-site support position because I was doing really well with it, so I ended up splitting my job - half time as a tech, half as a programmer.

That company, which was incredibly successful at the end of the 90s, has since shrunk from 150 or so employees around the world to less than 10. From what I understand they're still using that old Cold-Fusion based intranet I wrote all those years ago.

After I got laid off I moved on to PHP because I couldn't afford CF on my own.

AS3 remains, to this day, one of my favorite programming languages. I had really hoped JavaScript would start to resemble it eventually.

[wereHamster]

It doesn't, that's not valid ES{4,5,6,2016,2017} code.

[jbucaran]

It's called JSX. I used it in the example because it's popular among the JavaScript crowd, popularized by React.

That code is not directly consumed by the browser, instead, it's compiled into the code below by a compiler like Babel, minified and bundled into a tiny blob of code we ship to the browser.

    app({
      state: {
        count: 0
      },
      view: (state, actions) =>
        h("main", {}, [
          h("h1", {}, [state.count]),
          h("button", { onclick: actions.down }, "-"),
          h("button", { onclick: actions.up }, "+"),
        ]),
      actions: {
        down: state => ({ count: state.count - 1 }),
        up: state => ({ count: state.count + 1 })
      }
    })

So, I used JSX for "familiarity", but you don't need to use it to build your own apps. You can just write the code shown in the snippet above and you'd do just as well. You can also minimize and bundle your code to tap into the JavaScript ecosystem, code using a modular style and still not have to use JSX at all.

Hope that helps :)

[majewsky]

Indeed. Thanks very much.

Coincidentally, the h() function up there looks very similar to what we used to render HTML in a 15-year-old Perl application that I maintained at work.