In JavaScript we typically deal with asynchronous interactions by observing some object for an event and firing a callback whenever that event occurs. However, when there is a more complex set of interactions (e.g. wait for event A, then wait for event B, ...) things start to become more complex. You can quickly end up in what is affectionately known as callback hell.
Reactive programming is a programming paradigm which attempts to address this inherent complexity in asynchronous systems. It does so by modelling the flow of data between the parts of a system using data structures called streams.
Rather than dealing with discrete events, you can think of streams as a continuous flow of data. Streams are first-class values and can be manipulated using all of your usual functional programming tools (e.g. map, reduce, filter, etc). They are also like little garden hoses which can be split, joined, and interleaved.
- What is Reactive Programming?
- Mostly adequate guide to FP
- The introduction to Reactive Programming you've been missing
- Reactive Streams
- Swarm.js
- react-nexus
- Reactive stream with Bacon.js
- Mori - Persistent data structures
- Avoid forEach
- Cycle - Reactive framework
- Functional Reactive React.js
- javascript-allonge - Book
- Read JavaScript Allonge
- Persistent and optionally immutable data tree with cursors
- Immutability in React
- Reactive React using Reactive Streams
- Functional Programming on Front-end with React and ClojureScript
- react-cursor
- RxMarbles??
- Functional React
- Atom-React - Inspired by Om, but in JavaScript
- Omniscient.js - Simpler UI reasoning with unidirectional data flow and immutable data
- Elegant functional architecture for React
- Ramda.js - Functional library for JavaScript
- What color is your function?
- Monads: From Web 2.0 to Hardware Drivers
- ancient-oak: Immutable data trees
- Seamless Immutable
If you have an object or an array. Changing the object's properties or pushing a new element into the array will not constitute a change since the original references is still the same. This is why immutable.js or Mori are helpful to get a "pure" function.
Or just don't use objects in props and state.
- Values "over time". If you do computation over those values, it will also change over time.
- Continuous, not discrete
- FRP is a form of Functional Programming, which is a form of Declarative Programming
- Everything is a stream: variables, user inputs, properties, caches, data structures, etc. You listen to that stream and react accordingly.
- You
combinethe stream, youfilterthe stream, and you generally use functional programming to do whatever you like to the stream to make it consumable. - The stream is the observable. The official terminology for a stream is "Observable", for the fact that it can be observed.
- The listener is the observer
- And yes, a Promise is an observable
A spreadsheet cell reacts to changes in other cells (pulls) but doesn't reach out and change others (doesn't push). The end result is that you can change one cell and a zillion others 'independently' update their own displays. The others react to you! You don't manually change them. Let them react to you!
Observable === Collections + Time
Able to tell when I am done.
If I am interested in the keystroke "a" followed by "b" followed by "c" I can create an event that notifies me when this occurs. The observable pattern has huge benefits for code simplification.
- Making React reactive using MOBservable
- Cold vs Hot Observables
- Silent subscriptions
- Pure rendering in the light of time and state
Observable is a concept from the world of Functional Reactive Programming. They are used in other UI framework like Ember and Knockout.
While Flux suggests using low-level EventEmitter which requires manual event handling, RxJS and similar event processing tools are powerhouses capable of replacing a lot of boilerplate that a typical Flux application contains.
- Using RxJS for data flow instead of Flux
- irecord - An immutable store that exposes an RxJS observable
- react-rx-component - Yet another RxJS library for React
- RxJS at Modern Web UI for Netflix
- Asynchronous JavaScript at Netflix
- Reactive MVC and Virtual DOM
- 2-minute intro to Rx
// Convert a Promise to an Observable
var stream = Rx.Observable.fromPromise(promise);- Performance of
push - Plant a Baobab tree in your Flux application
- Handling states in your React Flux application with Baobab
- Declarative data fetching in React with Baobab
A cursor is a pointer to some data in your tree. The brilliant thing that cursors give you is the ability to listen for changes, but not only changes to the value the cursor points to.