Skip to content

Building a React/Redux-like Architecture w/ Inferno, Most, & FP Tools/Techniques

Photo of Tony Winn
Hosted By
Tony W. and 2 others
Building a React/Redux-like Architecture w/ Inferno, Most, & FP Tools/Techniques

Details

Writing Functional & Reactive JavaScript:
Building a React/Redux-like Architecture with Inferno.js, Most.js, & Various Functional Programming Tools & Techniques (Josh Burgess)

Redux (and The Elm Architecture, which Redux is influenced by) has proven to be a very popular & effective tool for structuring modern client-side web applications. It promotes reliability by forcing the programmer(s) to adhere to certain constraints (unidirectional data flow, pure functions, etc.), and this typically leads to more consistent & predictable code. However, at the same time, frameworks like Cycle.js have shown that alternative approaches based 100% on reactive programming can work just as well, while arguably being cleaner due to having even more rigid constraints (using Observables to handle all asynchronicity). Unfortunately, some people tend to find the cyclic design & declarative style of Cycle.js to be a little confusing or even slightly intimidating at first.

So, in what other ways could we use streams? It's worth noting that it is possible to make use of reactive streams while using Redux by using a middleware library like redux-observable or redux-most, and this is a great idea if you want to continue to have the awesome debugging experience of the Redux DevTools... but what if we were interested in taking a more purist approach? After all, Redux is a fairly small library. It's really just a pattern. So, could we reimplement the core concepts of Redux using nothing but streams while retaining the unidirectional, top-down data flow that React + Redux users are already accustomed to? What might that look like? I will walk through how you could implement an architecture like this using Inferno.js (the current fastest virtual DOM library) and Most.js (the current fastest Observables library), but keep in mind that the same idea could be applied to any other virtual DOM library (ex: Snabbdom, React, etc.) + any other reactive streams library (ex: RxJS, xstream, Flyd, etc.).

Photo of Functional Ybor group
Functional Ybor
See more events
Robert W. Saunders, Sr. Public Library
1505 N Nebraska Ave · Tampa, FL