5 ms·
> 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
by tomphoolery 13y ago
> 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.
- themckman 13y agoMost 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.
- hbbio 13y agoIt's not exactly novel. Opa (http://opalang.org http://opalang.org) has been doing this for a few years...
- jbeja 13y agoOpa should be more popular.
- taivare 13y agoAlso, 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.
- jbeja 13y agoI never hear of it, i will give it a look. Thanks
- SkyMarshal 13y agoFwiw 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.
- thesnider 13y agoIf only opa were released under a license that let normal people feel safe about experimenting with it/reading its source :(.
- hbbio 13y agoMost of Opa is now licensed under the MIT license and all of it is open source. We changed the license two years ago.
- porker 13y agoI'd never heard of Opa before. Thanks for sharing, it looks interesting!
- ssorallen 13y agoThe 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.
- avolcano 13y agoHTMLBars is rendering to DOM instead of to string, to enable React-level performance: http://jsfiddle.net/Ut2X6/10/ http://jsfiddle.net/Ut2X6/10/
- ssorallen 13y agoThanks 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'.
- peterhunt 13y agoThere 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.
- verisimilidude 13y agoI'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.
- ufo 13y agoBeing 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.