Sebastian Royer's Blog

Flavors of React

2018-02-01T18:17:03.907Z

React as framework began in 2013 as a single library to handle DOM manipulation through a virtual DOM. It was originally built by Facebook…

React as framework began in 2013 as a single library to handle DOM manipulation through a virtual DOM. It was originally built by Facebook to try to speed up build-times but they quickly discovered that by using the Virtual DOM to selectively re-render page update it had a significant effect on render speed in general. It is also opinionated in enforcing a component based hierarchy in the front end, allowing for easy code reuse in the form of isolated components that contain all of the information they need to produce their intended result.

It has grown over the years, and along the way the base idea has been implemented in different settings. Originally all of the DOM manipulation logic was in the core React library but fairly quickly (version 0.14) the team developing it realized that they could expand the reach of the platform by separating out the web specific rendering logic from the component based React framework. This led to the separation of React and React-DOM which is in use today. By doing this React can now be repurposed to build UI elements for different domains.

One of the major extensions is React Native, which Facebook released in 2015 to allow mobile app development with the React framework. Where React.js with React-DOM is used to generate HTML elements using JS, React-Native pairs the React DSL with native Andriod and iOS libraries to generate native mobile Views. It takes the component tree of React and parses it using libraries similar to React-DOM, but written to render to XML/Java for Android and Objective-C for Apple. It does this in a way that standardizes the results as much as possible across platforms, allowing for one set of React code to be written for both mobile platforms and massively reducing duplicated code in the process. Unlike mobile HTML5 or WebViews, React Native projects compile to the respective native machine code for each specific platform, becoming much more performant in the process. This has also led to JavaScript becoming a useable mobile development language, opening the door for Web Developers to build native mobile apps in a comfortable language environment.

A more recent addition to the React universe is React VR which was open sourced in 2017 by Facebook and Oculus as a way to build Virtual Reality interfaces using the React paradigm. It works by creating a similar component based API for 3D elements like shape and lighting. These can then by composed to create scenes in a very similar way to React.js creating web pages.

https://sdras.github.io/react-aframe-demo1/

So you can see that React as a framework is very flexible in what it can be taught to render and maintains a recognizable structure to its JavaScript codebase. This is an incredible improvement for extensibility, maintainability and possibility over previous frameworks, so thank a React dev today!