Reactive programming

Web applications tend to use dynamic user interfaces. Rather than only using links (navigation) and buttons (form submissions) to drive a website, JavaScript can facilitate more complex feedback loops between the user and the system. This back-and-forth takes time. Sometimes it feels immediate. Sometimes it takes noticeably longer. Reactive programming tools and techniques are designed for asynchronous interactions, meaning that it can handle both immediate and delayed responses.

I’ve been exploring reactive programming in the context of modern rendering libraries, front-end architecture, and state management since 2013.

Early on, I used AngularJS to build functional prototypes and side projects. This gave me a foundation to lead the front-end development efforts of several web apps for Indiana University. Over the next few years, the teams I worked with adopted the React rendering library, given the straightforward API and growing community adoption. For a couple products developed in 2015, we paired React with a simplified implementation of the Flux data flow pattern, called Reflux. In practice, Reflux failed to scale well with complex applications.

Inspired by the Cycle.js framework, I started learning the RxJS reactive library. After integrating it into a number of experiments and products in 2016, I was convinced this tool was flexible and low-level enough to power any data flow architecture, without concern that it would lose community backing.

In 2017, I abstracted what I learned into a library called Conduit. It is primarily a set of patterns to help develop reactive, functional user interfaces. It is also a set of utilities to simplify things a front-end developer may do with RxJS (conduit-rxjs), including how to connect RxJS streams to rendering libraries (conduit-rxjs-react). Indiana University has used Conduit in a number of products, and as of 2019, it is now publicly released.

In 2019, I organized a workshop titled Reactive Components with RxJS, exploring how to integrate RxJS into web components.

The next year, I explored some alternative reactive patterns with RxJS, inspired by React Hooks. This would allow stateful logic with RxJS to be reusable and be more testable.

In 2022, I experimented with Reactive Controllers. This provides the same benefit of React Hooks, yet it is built using JavaScript classes, without any dependencies. It requires a small integration to get these controllers working with a rendering library, such as React. This technique replaced an old Reflux architecture on one of my team’s projects.