Thinking Reactively
At the heart of reactive programming is the concept of declarative data streams and "push-based" propagation change through an application. This is an excellent fit for modern JavaScript apps due to their single-threaded nature, and increasing use of asynchrony. We will develop a mental model for how reactive programming works and study the core primitives of the RxJS library.
-
Thinking ReactivelyTech Check and Setup
We will get to know each other, set some goals for the workshop, and ensure that everyone's project is correctly set up.
-
Thinking ReactivelyThinking Reactively
All JavaScript apps run on a single thread, but increasingly apps have to manage many asynchronous processes managed by your browser (or node) runtime. The way JavaScript developers have managed this async complexity has evolved from callbacks and events to promises, to async functions and generators. We will look at the strengths and weaknesses of these patterns, and introduce a new primitive at the heart of RxJS: the Observable.
-
Thinking ReactivelyDEMO 1: Shortcomings of Events, Promises, Callbacks
We willl walk through some code demos, illustrating the shortcomings of events, callbacks, and promises.
-
Thinking ReactivelyFunctional Programming with Collections in JS
Reactive and functional programming go hand-in-hand. In the 2015 version of the JavaScript language standard, several new concepts were added to make life easier in these domains. We will discuss higher-order functions, pipelines, iterators, iterables, and finally, generator functions.
-
Thinking ReactivelyDEMO 2: Generator function for question and answer
One of the most powerful thing about a generator function and the iterator it returns is the ability to push values into it, as we pull the next value out. We will step through a demo that models a multi-question form as an iterator that collects each answer while providing us with the next question.
-
Thinking ReactivelyEXERCISE 1: Implement our own array higher-order functions
Now that we have learned about higher order functions and how they work, let’s implement a few ourselves. Build your own map, filter, reduce, some and every functions. Keep in mind that many of these functions can be built on top of reduce!
-
Thinking ReactivelyDEMO 3: Compose and Pipe functions in JS/TS
Any self-respecting functional programming library should come with either a compose or pipe function — ideally both! We do not have these in JavaScript, but they are easy to build. We will make both compose and pipe functions together as a class, and illustrate their usefulness in composing functions together.
-
Thinking ReactivelyThe Reactive Mental Model
Reactive programming is all about setting up data pipelines and then sending events through later on. Just like when we deal with promises or events, we often set up “handling logic” before our data arrives. Through minimizing side effects and keeping our functions pure, we can produce reliable and extensible code that’s less complex and more expressive.