Software development

React

: Why everyone is in love with the web framework for JavaScript.

React Web framework

React is a JavaScript library for creating modern user interfaces (UI) for web applications. With over 110,000 stars on GitHub, it is also one of the most recognised frameworks in the JavaScript family today. But what exactly makes it the darling of front-end developers? An attempted explanation.
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.

Virtual DOM

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.

JSX

The third fundamental concept of React is JSX. JSX is an extension of the JavaScript programming language, which makes it possible to seamlessly use HTML-like elements in JavaScript. In this way, React elegantly combines the (display) logic with the layout. At the same time, JSX breaks with the widespread concept of strictly separating layout and logic. Many other user interface frameworks define logic with a programming language, but layout with a template language (for HTML). In contrast, the idea behind JSX is to separate according to responsibility rather than technology. This concept is called Separation of Concerns (SoC). By removing the need to create a component by combining two entities, JSX helps to write self-contained components that are highly reusable.

Summary

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.

Philipp Mandler

Software developer