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.
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.
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.
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.
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.
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.
React is available under the Apache license.
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?
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.
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.
Five Best Mobile Web App Frameworks
- 5 Best Mobile Web App Frameworks: Kendo UI Mobile
Kendo UI Mobile Kendo UI Mobile is a performance focused UI framework top of jQuery.…
- 5 Best Mobile Web App Frameworks: jQuery Mobile + Backbone