Hacker News Reader

Comment by Yaggo | Hacker News Reader

So what is JSX if not DSL? (Yeah, you can use React without JSX, but still.)

You can think of it as sugar for `React.createElement()`, and some other stuff (like spread) but that's it. It's really easy to translate into javascript in your head.

Why is this good?

1. Let's say I want to stick a debugger in my template or render function. How would you do it in Vue? Angular? I don't know, gotta look it up, not even sure if possible. How would you do it in React? I don't have to look anything up, I just have to think (use an iife):

   <div>
     <SomeComponent
       debug={(() => { this.state; debugger; })()}
       someProp="prop"
     />
   </div>

2. Let's say I want to use Immutable.JS instead of plain js arrays. How would I iterate over an immutable list in Vue. In Angular? I don't know, probably have to download some third party directive. React:

    <ul>
      {immutable.toSeq().map(x => <li>x</li>)}
    </ul>

You can totally use JSX with Vue.

I use ractive, which uses a virtual DOM and simple mustache templates. I'd use a ractive expression to do the debugging.

People seem to think using a familiar templating language excludes using the full power of JavaScript. It doesn't.

>How would you do it in Vue?

     {{ data | json }}

will give you formatted json output of the data object (i.e. state/props) In reality you can put anything that's in the Vue object's scope between curly braces, pipe it through the json filter.

>immutable list in Vue

    <li class="for-example" v-repeat="item in list">{{item}}</li>

> {{ data | json }}

So neither debugger support nor printf-debugging, you just have to hope you'll be dumping garbage in a place where it can be seen and doesn't break the page entirely?

> <li class="for-example" v-repeat="item in list">{{item}}</li>

Ignoring that vue changed the name of the directive a while ago[0] that doesn't even remotely work, according to its documentation v-for (née v-repeat) works on native arrays, it's not going to work in any sensible manner on immutable.js structures.

[0] https://github.com/vuejs/vue/issues/1200

The nice thing about JSX is that it is an embedded DSL. When you use JSX you can take advantage of all of Javascript: variables, loops, conditionals, subroutines, closures, etc.

The bad thing about most other template DSLs is that they recreate all of these features from scratch, often in buggy ways. For example, many template DSLs have dynamically scoped variables instead of lexically scoped ones.

It's a sugar over React.createElement which is just a souped up document.createElement.

JSX:

  <div className="classy" onClick={this.handleClick} />

No JSX:

  React.createElement('div', { 
    className: 'classy',
    onClick: this.handleClick,
  });

Native (note this naive implementation lacks proper scoping):

  var el = document.createElement('div');
  el.className = 'classy';
  el.onclick = handleClick;

This has been available on all major browsers for quite some time, React just provides some convenience around it and a sugar for those that prefer code that looks like HTML because people tend to (fairly, imo) associate their HTML with the state of the DOM.

JSX is a DSL for creating HTML, a "language" that has very little custom logic. Vue.js and Angular.js are DSL for creating custom logic, which will always pale in comparison of an actual language designed for custom logic like javascript

Technically it's a DSL, but the experience of learning and remembering it is not the same as your typical DSL because there's so little JSX-specific syntax.

It's markup mixed with code. a DSL is a different thing

Reply on news.ycombinator.com