Navigating the Evolving Web - Part III: React
Date: Friday, May 25, 2018
|Default Language||ES6+ (ES2015...)|
|Size||42K (with Redux) *|
|Job Market (UK)||No.2|
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.
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.
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.
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.
For the Learner, the sheer number of new concepts and the pace of change could make getting into web development via React a challenge.
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