<Hello World />
In 2011 Facebook created a UI library for internal use which they eventually named React.js. Following the acquisition of Instagram, Facebook developers used React.js to build the web site compliment to the popular mobile application. In May of 2014, Facebook released React.js as a BSD licensed open source project. Since release to the general public React.js has been iterated several times, currently resting at v0.12.2 (v0.13.0 is in beta).
Why React Anything?
React.js/React Native (or simply, “React”) is a UI library designed to tackle use cases commonly encountered by Facebook engineers. However, these use cases are not unique to Facebook. In fact the library’s popularity is rising because organizations like Khan Academy share the same design challenges. A few of the especially popular React features include: Virtual DOM, (one-way) data flow, and isomorphism.
(One-Way) Data Flow
As opposed to the two-way binding popular in MVC frameworks, React uses a one-way binding architecture. Data passed from a parent element into a child element is owned by the parent. In addition to the one way data share, each component retains a unique state, which is mutable only by the component’s own methods. This arrangement ensures fewer dependency connections within the application, and therefore a simpler mental model for the developers.
React goes Mobile
React.js has entered the JS ecosystem with viable answers to well defined problems. React Mobile will seemingly continue the trend. React Native runs the JS engine as a separate, background thread which communicates with the main native server (written in Objective C or Android) via a batched and asynchronous messaging protocol. This protocol is simply a plugin loaded alongside other JS resources. The chief differences between the React siblings are minor. DOM elements expressed in JSX are replaced with native component counterparts, and css-flexbox is used for layout and positioning. React Native uses the same APIs as React.js, so emphasis shifts from learning specific libraries to learning APIs and core syntax. Finally, thanks to close connection between the JS engine and the main server thread, the native application is far more performant and capable of handling touch events better than traditional single page applications.
Ready for Prime Time?
Given the strength of React’s solutions there are major pros to consider when evaluating it for your next project:
React does not overreach. It is targeted at specific use cases where one-way binding architecture can help improve performance while decreasing developer confusion.
JSX allows the use of familiar “HTML-like” syntax, softening the unusual blending of code and markup. This is particularly useful in React Native, where the native components boost the code’s overall semantic value.
Simplified cross training between the native and web platforms will improve developer productivity and will help reduce costs associated with maintaining multiple code bases.
The learning curve includes both a conceptual and syntax aspect. React is unlike popular libraries like jQuery, and totally unlike MVC / MVVM type frameworks like AngularJS or Ember.js.
Deciding to use React will require buy-in from designers, product managers, content owners, and anyone else who touches markup. JSX is not HTML, and those not comfortable with markup may cause bugs or inadvertently push defective client facing content.
React Native champions CSS via JS, a new delivery mechanism for CSS that pushes CSS inline on component rendering. Cool – but another best practice violation, and potentially another source of defects from non-developer contributors.
React.js and React Native are two peas in an appealing pod. While the implementation details violate best practice, they are designed to achieve a somewhat remarkable goal: a highly performant, easy to use library emphasizing user experience and code maintainability. React Native, like React.js, is isomorphic – fantastic for slow mobile devices. React Native will soon be open sourced, and available to the Android platform. Best of all? A React Native developer is a React.js developer. Two formerly divergent skill sets brought back together by a common solution. Not perfect, but definitely a welcome addition to the JS ecosystem.