React made its debut on Facebook, where it was used for the first time in 2011 in the newsfeed, and quickly made it into the front-end of Instagram. The framework then became open source technology in 2013, and is now being used and further developed by a worldwide community.
React vs. Angular
If React is the challenger, Angular is the top dog. What both technologies have in common is that they are equally prominent in today’s modern web applications – but that’s as far as their similarities go. While Angular takes a full-service approach that provides the front-end developer with a whole suite of features from a single toolbox, React focuses on the three core components – One Way Data Flow, Virtual DOM, and JSX. For developers of React applications, this means that many of the required functions are not included in the delivery, but they can be taken from the already known ecosystem of modules. Developers can then use technology that is already known, and only need to integrate functions that they really need.
One Way Data Flow
As the term suggests, unlike bidirectional data flow, unidirectional data flow means that data flows in one direction only – from top to bottom. It is only events that are forwarded in the opposite direction, and these are triggered by the user via actions in the user interface, e.g. by clicking on a button such as “Buy now”, “Send” or the like. These events are typically passed upwards until they arrive at a component that manages a sub-state of the application. There, the event is used to calculate a new state from the current state, which is then passed on from there to all subcomponents.
Thanks to the unidirectional data flow, the relationships and interactions of an application can be surveyed very well, since the information flow runs exclusively in these described paths. Components can also be reused very well, thanks to the unified interfaces of data and events.
With dynamic web applications, performance is a challenge. To enable dynamic web pages, a DOM (Document Object Model) is built in the browser that stores all the elements, however small, in a tree structure in order to then perform operations such as the calculation of positions or properties such as colour, size, etc. Each time a change is made to the DOM, these properties need to be recalculated. These calculations are usually quite complex since elements can affect each other in many different ways.
React solves the associated performance problem by minimising the number of DOM updates. To do so, React saves its own version of the DOM – the Virtual DOM. Changes in this Virtual DOM are very fast because no representation needs to be calculated there. React now summarises those changes that happen almost simultaneously, first running them in the Virtual DOM, then comparing them to the “real” DOM and then swapping all the changed elements together in one combined operation. This sounds elaborate at first, but since the browser needs to make only one calculation for displaying the elements, this procedure is many times faster than many small updates.
All in all, React provides a lightweight and proven user interface library based on a few well thought-out concepts. In terms of scalability, performance and flexibility, it’s hard to beat React. Its huge popularity and rapidly growing market share show that React has become well-established and is more than just an alternative to Angular.