Facebook has open sourced React, its JavaScript library for building reactive user interfaces, used to build the Instagram website as well as portions of the Facebook website. Following the recent trend of frameworks like AngularJS, MeteorJS and Model-Driven Views as implemented in Polymer, React is based on the idea of declaratively specifying user interfaces on top of a data model, where user interfaces automatically keep themselves in sync with underlying data. Unlike the aforementioned frameworks, React uses JavaScript rather than HTML to construct those user interfaces, citing flexibility as the reason for this design decision.
While not dependent on it, the code samples on the React website all rely on JSX, an extension of JavaScript with XML literals. For instance, here's the typical "Hello World" example expressed in React using JSX:
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return <div>{'Hello ' + this.props.name}</div>;
}
});
React.renderComponent(<HelloMessage name="World" />,
mountNode);
The embedded XML are translated to regular JavaScript DOM API calls in a pre-compilation step.
Since its launch, the library has been criticized widely. They critisisms generally fall into two categories: mixing of view and logic, and code verbosity compared to existing frameworks.
The (apparent) mixing of the View and Controller
Reddit user 'rhysbrettbowen' writes:
I understand that JSX isn't necessary, but we spent so long taking logic out of the HTML that now we want to go ahead and instead put HTML in the logic?
The biggest problem with this is that it doesn't do well in separating the HTML from the business logic. If they are split then you can have designers work on the html/styles and the coders can instead work on the code and just provide hooks to go in the template.
In response to this and similar comments, Peter Hunt of the React team at Facebook explains in a blog post that React does not try to mix the View of your application and logic at all:
We all remember the days of mixing our PHP in with HTML. Code was really hard to maintain and security was an afterthought. We do not want to go back to those days.
Since those days, we have developed client and server-side templating languages to prevent engineers from committing this sin. However, these templating languages have a cost: they make building user interfaces harder. Doing something simple like alternating row colors in a table requires jumping through hoops in many languages.
What we should do instead is accept that user interfaces are becoming more and more complicated and that we need a real programming language (with all of its expressive power) to build user interfaces at scale.
React is a library that embraces this idea. React still encourages separation of concerns: components fulfill only the role of the "view" in a traditional MVC application. However, instead of an oversimplified templating language, you get to use JavaScript to build abstractions and reuse code.
Verbosity of the examples compared to existing frameworks
Briefly after the React announcement, Vlad Yazhbin posted a translation of the React tutorial code to AngularJS, demonstrating how much more concise the resulting code is than the original React code. However, people have pointed out that the comparison may not be completely fair.
Nevertheless, the Facebook's effort to open source more of the libraries it develops is appreciated by the developer community. Previous high-profile open source releases of Facebook include the Hiphop PHP compiler, and Tornado, the efficient asynchronous Python web framework for building real-time applications, originally built to power FriendFeed.
React is available on github, and can be downloaded in various developer and production builds.