React JS: Facebook’s JavaScript library under the microscope

The popularity of React JS is exploding. Let’s take a look at the main features and benefits of this new kind of web rendering engine.

React (also called React.js or React JS in common language) is a JavaScript rendering engine that stands out from its competitors by an architecture that is efficient and effective. It was initially created at Facebook which used it to develop the news feed of its social network. React was released as open source in May 2013, under the Apache 2.0 License. Since the release of its version 0.12 in October 2014, React has been offered under a BSD clause 3 license – Facebook authorizing in parallel the use of patents associated with the software. In the wake of its move to open source, its level of popularity has continued to grow as shown in the Google Trends curve below (illustrating the evolution of interest in the query “React JS” in Google).

Alongside Facebook, React is also used by Instagram, Netflix, Airbnb, WhatsApp or even Atlassian. At the end of 2015, Automattic also announced the redesign in JavaScript and React of the administration interface of, its declination of WordPress in SaaS mode.

React JS : la librairie JavaScript de Facebook au crible
Since 2013, more and more Internet users have been entering the query “React JS” in Google (blue curve). In January 2015, the curve exceeds that of the queries “Backbone JS” and “Ember JS”. The level of popularity of Angular JS in Google remains much higher (green curve).

React offers a best of breed logic

React can be described as a web rendering engine. It is a JavaScript library and not a framework – like AngularJS for example. “Choosing AngularJS is comparable to buying a ready-made PC. It’s a full-stack framework. Unlike React, which is more like a PC to assemble yourself,” says Nicolas Cuillery, consultant-trainer at Zenika. Thus, React focuses on managing the rendering of the view. Moreover, it can be combined with a third-party MVC (Model-Vue-Controller) or MVVM framework… like AngularJS. “But this is not the most natural approach,” Nicolas Cuillery continues.

To manage the application structure of a website under React, Facebook has developed Flux. A design pattern that does not impose a reference implementation. “There are several implementations of Flux. Redux is the one that tends to impose itself, especially because of the simplicity it allows in terms of coding,” continues Nicolas Cuillery. Proof that Redux is becoming more popular: its creator, Dan Abramov, has been hired by Facebook (see his presentation on Youtube about the advantages of Redux at React-Europe). In terms of routing, React Router is also beginning to emerge as a de facto standard for building React applications, even if, here again, there are other solutions. Finally, on the AJAX side, there is no specific brick in the React ecosystem, so why not turn to the Fetch API.

A very flexible architecture

In terms of performance, React optimizes operations on the DOM by using a virtual DOM. Concretely, this device compares the existing DOM to the one whose display is requested (returned by the .render() method), then via a reconciliation mechanism modifies only the part of the virtual DOM that needs to be modified. In the end, only the elements impacted by a change in the web page are updated.

Another particularity, React is component-oriented. This makes it suitable for the creation of modular architectures, or even microservices oriented (although its components can not be contained). “It is also possible to optimize the display performance component by component,” adds Nicolas Cuillery.

To manipulate the Virtual DOM, React uses JSX. A language that extends JavaScript with a declarative syntax to define the HTML rendering mode of the component. “It’s quite surprising at first, but it becomes natural as you get into the Component logic. It’s nice not to switch back and forth between the two HTML and JavaScript files. So nice that it’s a pity that the styles don’t follow this logic”, says Zenika. Of course, it is always possible to use CSS style sheets in parallel. But for those who want to push the logic to the end, it is possible to manage CSS within React objects, in inline mode. To facilitate this approach, a library like Radium can emulate the CSS in the component file. The advantage being to have all the rendering code in the same file, and also to avoid dead code.

React is not yet in stable version

Important point, React is not yet in stable version. This can, in some cases, lead to painful version upgrades. In its latest beta (0.15), React is evolving with a view to eventually open up to the management of other rendering technologies than the DOM.

“Thanks to its openness to other rendering modes, React should evolve towards the notion of React Core, which would make it possible to address several categories of React Native-type views[the declination of React for native apps NDLR] or React DOM. It’s a vision that is part of the project’s roadmap,” explains Nicolas Cuillery.

Leave a Comment