Navigating the Evolving Web - Part III: React

Developer: Facebook
Paradigm: Functional
Default Language: ES6+ (ES2015...)
Size: 42K (with Redux) *
Job Market: (UK) No.2
*gzipped value at end of 2017

History

React was very much a product of its time. The technological turbulence of 2013 brought with it tectonic changes. Mobile had risen to become the No.1 digital consumer platform overtaking desktops and laptops for the first time. And even large companies were feeling the pain (and cost) of developing and maintaining premium applications in at least two distinct mobile worlds.

Web applications, inherently cross-platform, should have been the answer. However some felt they lacked the power to deliver the kind of user experience a good, handcrafted native mobile application seemed to ooze.

Some engineers at Facebook though, thought differently. Given a library designed to squeeze every ounce of performance out of the browser, the web could deliver - and so React began to gain momentum.

Philosophy

A prime concern of React is speed. It has long been known that DOM manipulations slow web pages. What does that mean? As you look at a web page, it is doing all kinds of processing in the background. Web pages can do that quite quickly these days. But as soon as they have to start shuffling around the things you can actually see, things get slower.

React minimises interaction with the DOM. It does this by providing the programmer with a virtual DOM - a fast in-memory representation of the real DOM. The programmer's code updates (or mutates) this virtual DOM. Periodically, React examines the differences between the virtual and real DOM and then calculates the minimum set of changes to bring the real DOM into line with the virtual one.

This leads to a completely different model of user-interface development. Every time any state changes within the application, the virtual DOM, this in-memory representation of the UI, is entirely re-rendered. Meaning that at any given moment :

This means that the developer never need think about the difference between the state of the application and the state of the UI as the two are intrinsically connected.

However, one highly significant, but little talked about, characteristic of React is its unabashed embrace of Functional Programming. Yes, you can use classes - you can even use TypeScript - but React always feels functional and has attracted much thought from the Functional community inspiring libraries like Immutable.js.

Tooling

React too has strong tooling support. Again Visual Studio supports React development out of the box and Visual Studio Code has several React extensions. Facebook maintains the react-devtools GitHub repo' with extensions for Chrome and Firefox (in fact the Firefox dev tools are themselves written in React) and even a standalone app.

It is also worth mentioning Jest, the unit test framework spun out of the React ecosystem. With easy setup and built-in support for mocking, Jest is rapidly gaining popularity as the way to test Javascript both inside and outside the React community.

Popularity

In industry, React is the number two framework behind Angular. And while VueJS may have superceded it in terms of % growth, in terms of sheer weight of adoption (downloads/week) it leads.

Perspectives

The .NET Team Leader

 

For the .NET Team Leader, well, React is not .NET. For the object-oriented .NET team, React may be an option if they are pretty daring and willing to take on a paradigm shift.

The Start Up

 

For a hot new StartUp, React with its forward looking impetus, ability to reach both web and mobile platforms simultaneously, and power to attract motivated and skilled developers must be a strong option.

The Job Seeker

 

For the Job Seeker, React remains a good proposition but there are still more jobs in Angular at this time.

The Learner

 

For the Learner, the sheer number of new concepts and the pace of change could make getting into web development via React a challenge.

Summary

If you could sum up React in one word it would be 'innovation'.The big ideas driving front-end development in recent years have mostly come out of the React community. The two other major frameworks we are considering here have both adopted the virtual DOM since React introduced it. Other ideas introduced by React like Hot Module Reloading (allowing the developer to see changes happen 'live' on the web page as it is being built), Server Side Rendering and others have become benchmarks against which all others are measured.

There are ideas we have not covered like Redux, JSX and React Native which could be (and have been) blog posts by themselves. But suffice it to say that, for better or worse, the React community has become a hotbed of new ideas about web development in particular and UI development in general.

Next up, the framework that seemed to come from nowhere to explode in to 3rd position in 2017 - VueJS

*size is gzipped value at the end of 2017