Hacker News Reader

Comment by tomphoolery | Hacker News Reader

> You can choose to use this, but after getting over my initial distaste for it ("Ack! Who got markup in my code!"), I could never go back to not using it.

Or you could just use HTMLbars/Handlebars. Seems like "JSX" is just a more complicated version of a Mustache-esque logic-less template.

View on HN

The big difference is that Handlebars always produces strings that your browser has to parse as HTML. Handlebars also doesn't know how to mutate between states, meaning if you add a class 10 levels deep in the template the best you can do is re-render the entire thing.

JSX + React produce functions that return React's representation of the DOM, their "virtual DOM", and React knows how to make small mutations based on state. If a change in state only needs to add a class 10 levels deep in the hierarchy, that is the only change that happens in the real DOM; it doesn't have to re-render the entire template.

HTMLBars is rendering to DOM instead of to string, to enable React-level performance: http://jsfiddle.net/Ut2X6/10/

Thanks for the demo link; I hadn't heard of HTMLBars.

It makes for a good demo I suppose, but I prefer React in a couple places: there's no separate template, style construction is done with an object and not a string (constructing that style string for HTMLBars seems error prone), and the connection between the values on the Ember object and how they will be used in the DOM is guessed only by naming convention. You could use `this.set('hotdogs', count % 255)` and reference 'hotdogs' in your template in place of 'color'.

There is a very nuanced set of performance (mem and cpu) and usability tradeoffs you make when adopting a dirty checking vs change tracking system. I'm working on coming up with a reasonable talk about it.

Most of React's novelty, I think, comes from the Virtual DOM. Your view spits out a DOM tree using the React.DOM.* objects. The JSX allows you generate the appropriate calls to those constructors by writing something that more resembles HTML. You can't just use Handlebars, etc.

It's not exactly novel. Opa (http://opalang.org) has been doing this for a few years...

If only opa were released under a license that let normal people feel safe about experimenting with it/reading its source :(.

Most of Opa is now licensed under the MIT license and all of it is open source.

We changed the license two years ago.

I'd never heard of Opa before. Thanks for sharing, it looks interesting!

Opa should be more popular.

Also, fruitmachine (Github)- Financial Times - Graphics Lab. They say it handles multiple pages better then React. They also claim to have had the React concept first.

Fwiw the Lift web framework has been diffing a server-side virtual DOM back to the client-side DOM via Ajax since 2007. And I wouldn't be surprised if the concept existed elsewhere even before that. Claims to be the first to have had the idea should be taken with a grain of salt.

I never hear of it, i will give it a look. Thanks

I've gotta agree with the author on this one. Upon first glance at the example code, JSX looked really ugly and unnecessary. As I started to use it, I really came to appreciate it in the context of React. JSX syntax allows you to do React-y things, like call child components and pass in props, in a very concise way.

Being slightly more complicated is a feature, IMO. I always get the impression that the logicless templates end up as quite logicful languages once you add all the control flow directives. But its all very ad hoc so some simple things end up being tricky to do, like passing parameters to a subtemplates or giving different CSS classes to the even and odd rows. If you just use a regular programming language from the start these are just a matter of calling a subroutine or using an if statement instead of being something you will need to go to Stackoverflow to figure out.

Reply on news.ycombinator.com