React
I’m personally intrigued by frameworks that introduce new ways of thinking in web development. It opens the door to new opportunities, which is a fun way to learn. That’s perhaps how I got to love Ext JS and Sencha Touch. Facebook’s React is that kind of a JavaScript library.
Although fresh on the market, React already has a couple of major players using React in production – Facebook and Instagram. It’s often compared to Angular, but combined with Backbone (for the features and speed of Views).
We know that modifying and querying DOM is a major performance bottleneck in mobile web application development. If I had to single out one reason to use React it would be exactly the optimizations in that namespace.
Although incredibly fast with DOM operations, React comes with no bundled user interface elements. This makes it on par with Angular and Backbone, both of which I already presented with an adequate UI bundle. In this review I won’t focus on the UI as most of the UI-only frameworks (such as Zurb Foundation, Twitter Bootstrap, or even jQuery Mobile) depend on 3rd party JavaScript (jQuery actually).
MV* Pattern
Here comes a shocker – but keep on reading – React is not an MVC framework! Optimized for one-way binding (or one-way data flow) Models in the sense known to Backbone or Sencha Touch are not present in React. Fear not, two-way binding essentially happens in form of events triggered by a change in Component state. Here we introduced a Component, which is a mixture of View and Controller. With this notion in mind it’s hard not to notice that something almost revolutionary is happening here. I will discuss Components further down in the DOM section.
Class System
As everything revolves around Components, so does the class system. Perhaps it’s valid to say that Component makes it’s own class (eco)system. Components are designed with Abstraction in mind, one of the most commonly used methods will be React.createClass. However, with lack of traditional MVC, traditional class system becomes obsolete as well.
DOM control
React is a library for building User Interfaces, but approaches things differently by breaking them into components. Instead of classic templates, React uses JSX, an XML-based template language that compiles to JavaScript. The real magic just happened. When compiled into JavaScript, React actually creates a lightweight representation of the document.
This lightweight representation helps in so many ways, most notably:
* Quantitatively minimizes DOM creation and communication
* React can take a diff between current state and an update and change only the part of DOM where change is due
* Events are automatically delegated
* Allows WebWorkers to use the virtual DOM, whereas WebWorkers are actually unable to access the document itself
Without getting into a greater detail, we can immediately tell that React could easily become one of the fastest libraries to interact with user interfaces.
Third party plugins
The market of 3rd party plugins for React is still scarce. Useful extensions that bridge React with Angular, Backbone, and even ClojureScript are amongst the popular few. Follow the official blog to learn about the upcoming plugin releases.
Extensibility
Being in the 0.x stage with updates released rapidly (0.5 – 0.8 in two months) it may be early to comment on extensibility of the framework. The experience teaches us that APIs can change dramatically from 0.x to the (hopefully) stable 1.x branch, although we already know that React is a special product.
However, React already displays excellent signs of maturity as it advocates for abstraction and building reusable components. These components have a lifecycle on their own, including support for mounting (inserting into the DOM), updating, and unmounting (removing from the DOM). Coupled with mixin support, React is on a good target to becoming one of the most extensible JavaScript libraries.
Documentation
For a young framework, documentation is full of useful guides and tips, exactly what newbie developers need to start on the right foot. Hopefully more external learning resources will also emerge in the months to come.
License
React is available under the Apache license.
Community
Facebook has been delivering APIs for a while now and they know how to build a quality community around their technology. This is still work in progress with React, but gaining ground fast. The developers organize round-ups every few weeks, which are particularly useful for the newcomers. Unfortunately the project is a bit hard to distinguish amongst others for those searching for React on the web or StackOverflow. Search for ReactJS on SO will yield merely 40 questions.
What would they say?
JavaScript developer:
The library shows incredible perspective. There are a few new concepts to master, such as JSX, which will take time no matter how good a developer. The obvious lack of community and resources is challenging, but the documentation is helpful for starters. Simple tests show 2-5x better performance when working with DOM, comparing to Backbone (jQuery) and Angular. This makes it a great candidate for early adopters.
Designer:
To a designer, working with React is essentially starting from scratch and working on custom HTML + CSS. There are no models or widgets to build on, which may be good or bad depending on the amount of time available and experience level of the designer.
Product manager
Great for those wanting cutting edge on a completely cut-to-fit app. Surely a bit early for production, but advisable for prototypes and in-house apps that are less than mission critical. JavaScript generalists would make suitable candidates for your development team.
Five Best Mobile Web App Frameworks
