<Hello World />
If you are plugged into the world of JavaScript development, no doubt you have heard the news: React.js has gone Mobile. On the 28th of January, Tom Occhino, software engineer for Facebook and React.js Conf 2015 keynote speaker, introduced React Native to the world. Like React.js, React Native aims to afford composable component development to the iOS and Android universes.
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.
Virtual Dom
“Virtual DOM” refers to DOM elements first loaded into memory and then rendered as usual. In React.js, for example, this is implemented by inserting traditional DOM elements directly into JavaScript, via either ordinary JS syntax or through JSX (JavaScript syntaX) – an HTML-like structure based on XML. React uses a diffing algorithm that compares prior (virtual) state and the current (virtual) state in order to create a DOM patch. The contents of this patch are the only changes pushed into the real DOM. Therefore, refresh speed is amplified tremendously over more traditional methods. For an in depth discussion of this topic check out this Stack Overflow discussion.
(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.
Isomorphism
React is an example of isomorphic JavaScript; meaning JavaScript that can be rendered on both the server and client. Server rendered JavaScript can improve client side performance and user experience. Another benefit is improved SEO through application indexability. Traditional single page applications are coupled with an application variant served to search engines via headless browsers. Maintaining this variant adds complexity and sometimes additional cost. Since React code renders server side, all clients receive the same fully indexable experience, therefore eliminating the need for a headless browser.
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.
Cons include:
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.
Final Word
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.
