Hacker News Reader

Comment by kentor | Hacker News Reader

After using React, I am firmly in the #nevertemplates camp. I don't ever want to learn a template DSL again when I could be using the full power of javascript.

View on HN

Same here. In my opinion JSX is one of the best thing happened in the front-end world.

Let's not forget how horrible Angular templating was:

    <ul ng-if="::vm.items.length">
        <li ng-class="::{ 'active': item.active }" ng-repeat="item in ::vm.items | orderBy: 'id' as ordered track by item.id" ng-click="item.active = !item.active">
            {{::item.name}}
        </li>
    </ul>

    <select ng-options="item.subItem as item.label for item in ::vm.items2 track by item.id" ng-model="selected"></select>
    <div ng-include="selected.template.url" />

Wow, that looks really messy for what is essentially printing items in collection...

I believe that will always be the case when you have to embed logic into a relatively rigid markup language.

Syntactically, JSX feels more native, but both are addressing the same problem.

JSX is just a way to render data, so think like it's a templater, you can integrate it with any tool. React istelf is also just an advanced templater actually, it has no built-in data reactivity despite the name. In my opinion React is not needed in general and JSX is a back to the old fashion PHP coding (Facebook returns to its roots).

React is not a templater, it's a differ. The only similarity between PHP and React is that you can have tags in ("around" in PHP's case) your code.

Edit: After reading my comment again, I feel I must mention; even that similarity is not coming from React directly. It's JSX. Although they go like fish & chips together (Not a great analogy but I guess I'm hungry).

> React is not a templater, it's a differ.

It's a templater, read my message above - an advanced tempalter, which means it has some DOM rendering optimizations.

> The only similarity between PHP and React is that you can have tags in ("around" in PHP's case) your code.

Not just tags, but an entire "view" thing, a representation, so old fashion messy/sloppy/spaghetti-like PHP like code style.

You give React a state, it diffs that and passes the outcome to the ReactDOM, which can render it on the DOM. At its core React doesn't know what a <div/> is. It just diffs objects and generates instructions to reach the next state (very generally speaking here). The stuff you pass to it is an object and can't be malformed like a string can. Main function of React is maybe loosely related with templating.

For PHP (in its traditional form), everything around the code is just strings, which is also the case for most of the templating engines.

You can't shout "spaghetti code" every time you see XML tags in code. Think Scala or VB.

nothing about React is messy or sloppy. it is the exact opposite.

the notion that your view logic and it's template must be completely decoupled is an antiquated and misguided best practice.

Oh boy, what a mess. I have only heard the horror stories of Angular 1, but had never seen a disaster like that.

Just so you know Vue 2.0 supports both templates AND JSX (or hand-written render functions): https://github.com/vuejs/babel-plugin-transform-vue-jsx

Haven't tried Vue yet but I like the idea of having a choice. It would seem to me that for most cases one would simply a template since it gets you there easily and without any boilerplate. For the cases where one does need the full power of Javascript, JSX is the solution. I'd imagine that most components would initially be written as templates, and some would be refactored into JSX along the way, which is probably not much of a pain.

Really want to play with it ...

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

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

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

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.

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 horrible is mixing markup and code all over again A DSL like Elm does is much better

Elm doesn't have a DSL, you just call functions to create dom elements.

It's really much like JSX, but without the syntactic sugar of using HTML-like markup.

JSX is simply unobtrusive javascript realized at it's logical conclusion. I don't understand why people complain about it so much.

https://medium.com/@housecor/react-s-jsx-the-other-side-of-t...

jsx compiles to plain old function calls, which is how you write your templates in elm as well. there's very little difference besides developer ergonomics.

Reply on news.ycombinator.com