The evolution of React

This blog post was written under the Pusher Guest Writer program.

ReactJS started out as a library for XHP. XHP is Facebook’s version of PHP, which was open-sourced in 2010. The aim of creating XHP was to make frontend development easier and help avoid cross-site scripting attacks (XSS). XSS is a very common attack vector that inserts malicious code into a web application.

XSS does not attack the web application directly; instead, it attacks the users of that web application by attaching an embedded JavaScript code to the user’s request, which in turn steals information and compromises the integrity of the user trying to access a resource on that application.

This is where XHP comes in. XHP has an Automatic XSS protection; all page rendering is done inside XHP and it knows what Hypertext Markup Language (HTML) is and what a context is, hence escaping all contexts without any hassle.

However, XHP failed when it comes to building dynamic web applications. Meaning, once a change occurs, or a state changes, the web application re-renders itself, causing the user to lose any information previously stored in the Document Object Model (DOM). This got the Facebook Ads Org team thinking: why do we have to re-render the entire page just because a state changed? They realized early enough that this process was terrible for performance as well as user experience.

In 2011, Jordan Walke, a Software developer at Facebook, started working on a prototype to make this process more efficient while also providing a reasonable user experience. And this was how a JavaScript library for building user interfaces was conceived (React). A few months after, the ‘Like’ and commenting features on the Facebook site were built using React and Flux.

Around the same time that Facebook started using React on the like and commenting UI, and also on the Ads product (2012), they acquired Instagram. One of the first products Instagram wanted to build was their website. After taking a good look at Facebook’s stack, Pete Hunt made a case to use React on Instagram’s website. At the time, though, React was closely coupled to Facebook’s stack. Pete Hunt did not give up: he did most of the work required to decouple React from Facebook’s stack so that Instagram could use it as well, making Instagram the first external product to use React. With this, Facebook was a step away to blessing developers around the world with the awesomeness of React.

May 2013, React was open-sourced at JSConf in the United States. Since then, developers across the world actively use React in production. Companies like, Trello, Slack, Docker, Airbnb, Khan Academy, New York Times, Codecademy to mention a few actively use React.

In April 2015, Facebook released a patent regarding the usage of React which basically says, ‘In as much as you do not sue us for patent infringement, we will give you this software for free; you can sell, distribute, import, make, and use this product. In addition, we also promise not to sue you for any patent infringement as regards this open source software.’ You can read about it here.

6 Highlights of React

• Virtual Document Object Model: To explain this, picture a “Car” object, with four wheels, four doors, coloured black, and let’s give it a name of “Pusher”. When there is a change to any of these properties (for example, the colour is changed to “red”), React performs a “diffing algorithm“, which essentially means it identifies what has changed. Once it notices the change, it then performs another step called “reconciliation“, which essentially updates the DOM with the result of the diffing algorithm. Isn’t that cool? Instead of updating the entire DOM, it is smart enough to update just the nodes that changed.
• Server-Side Rendering: React can comfortably handle server-side rendering. So, when a user makes a request to our application, the server renders (and packages as an HTML string) the components needed for our application to show up, after which it sends the response to the client. Once the components get to the client, the client renders the page.
• React Native: React Native was released in 2015. This library allows developers build real native Android and iOS applications using Javascript and React. In effect, learning Java and Objective-C is no longer a requirement for building native applications.
• React VR: At the recent F8 Developer Conference, React VR was released to the public. React VR allows developers to create virtual reality (VR) applications using only Javascript. React VR also leverages WebGL and WebVR to bring the perfect VR experience to the user. Just like React, developers can now create awesome VR experiences by using the declarative components approach.
• React Fiber: React Fiber, also know as React 16, was introduced to the public at React Conf 2017. It promises to be a complete reimplementation of the React core algorithm from the ground up, with support for built-in scheduling and incremental rendering. It is an update that is fully backwards compatible with existing applications made with React. React Fiber is not yet ready for public consumption, but you can visit this link to follow up with the release.
• React Primitives: react-primitives is a library created by Leland Richardson. The Library proposes a set of ideal primitives that can be used on all React applications irrespective of the platform. React-Primitives is built based on seven, out of the seventy three APIs React Native provides (Text, View, Image, StyleSheet, Touchable, Animated, and Platform ). With React-Primitives, you can now render your exact code base on web, native applications, ReactVR and Sketch.

“React 16″ will be the first major publicly available release that uses the React Fiber Implementation.

A quick search of tech trends on Stack Overflow, shows a steady increase in the growth of React from 2014 – 2017. In essence, developers around the world actively seek and get answers to questions asked about React. Looking at a list of contributors on the react core repository , it shows a massive developer ecosystem around React.

React is such a good idea that we will spend the rest of the decade continuing to explore its implications and applications – Guillermo Rauch.

Interested in React? Visit here to get started.

Thanks for reading!