The Rise and Fall of React, Flux, Redux, and Cycle

Apart from brilliant researchers, many individuals and companies (e.g. Facebook) are trying to improve the state of web development. One entity that have received a lot of attention is Facebook’s React library. It presents an intuitive mental model through its more or less thorough tutorial. Its popularity is rising at an unsettling pace as more developers successfully adopt and exhort the benefits they have personally experienced:

• Rethinking best practices

• Secrets of the Virtual DOM

• Building Applications with a Unidirectional Data Flow

• A Deep Dive into React Native

• Communicating with Channels

• react-router increases your productivity

• Full Stack Flux

• Turning the database inside out with Apache Samza

• Formatting with FormatJS and react-intl

• Removing User Interface Complexity, or Why React is Awesome

Indeed Facebook’s Flux UI design pattern have inspired a lot of variations such Redux, container components, higher-order components, and CSS in JS. While all of them together present a very attractive story, when one tries to put it into practice, there are many hurdles to overcome:

• no concensus on how to structure the application,

• many different ways to specialize Flux,

• differing best practices,

• no one to rein in the plethora of software packages,

• and worst of all is the vast amount of useless information (at best mediocre content) on the web.

Fortunately, there is an excellent tutorial, a decent minimal example, and a good cookbook. Unfortunately, taking the intuitive mental model that Facebook proposed and turning it into a real nontrivial application is still hard; yet the majority of developers are glossing over this issue. Is the high learning curve necessary? The attractive idea in React is its unidirectional user interface architecture, but that is merely an instantiation of Model-View-Intent. If all the noise in React / Flux are removed, then one would arrive at reactive programming. There are several library implementations and even an optional framework that focus on this paradigm; each of them has a very low learning curve. See the following for a handful of helpful introductory materials:

• Functional Programming in Javascript

• The Reactive Manifesto

• How to Quantify Scalability

• A Dead-Simple Todo List with RxJS

• Cold vs Hot Observables

• RxJS GitBook

Hopefully the next generation of Javascript will include Observables as native code.