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.
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.
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 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!