Reactive Extensions: A New Tool in Your Toolbox

If you’re not familiar with Reactive Extensions (Rx), let’s take a quick step back to imperative vs. declarative programming. An imperative program uses specific commands, and focuses on describing how an application operates. A declarative program, in contrast, focuses on what the application should accomplish, without specifying how to achieve that result.

Rx is a set of tools that allows imperative programming languages to operate on sequences of data regardless of whether that data is synchronous or asynchronous. By providing a set of sequence operators that operate on each item in the sequence, it allows for event-based asynchronous programming while eliminating several layers of callbacks.

But why did we start looking into Rx? With the rise of ReactJS, we started to challenge the way we were building Angular applications, and we focused especially on the idea of passing data from parent controller to child controller as a way to manage component interaction. That’s when we started to consider a lightweight implementation of flux known as Redux, which is a predictable state container for JavaScript Apps – read more about Redux .

With JavaScript single-page applications becoming incredibly complex, our code must manage more state than ever before. Multiple server responses, cached data, and locally created data that hasn’t yet been persisted to the server all cause their own changes. UI state complexities are increasing as well. Add in server-side rendering, optimistic updates, fetching data before route transitions, and so on, and you’ve got a situation where you’ve lost control over why the state changed, let alone how and when. Or you have bits and pieces of state floating across the application, creating a disaster situation of shared mutable state.

Libraries like React can help with this problem in the view layer by removing both asynchrony and direct DOM manipulation, but where application data-flow architecture like Redux comes in especially handy is making state mutations predictable by imposing certain restrictions on how and when updates can happen. First introduced around July 2015, Redux became popular quickly due to its simplicity, small size (2 KB) and great documentation. It is completely framework agnostic and, as a bonus for us, works really well with Angular.

The beauty of Redux is that it maintains the state of an entire application in a single, immutable state tree (an object) that can’t be changed directly. When something does change, actions and special functions known as reducers create an entirely new object.

At Intelliware, we’re using a Redux implementation called @ngrx/store  on one of our largest projects and, quite frankly, we love it. In terms of componentization, subscribing to events instead of relying on parent-child interactions gives us a valuable extra layer of abstraction, and reduces the dependencies between components. It also simplifies our code and makes our components more flexible and easier to use. Because the parent component is now irrelevant, you can technically use our components anywhere in the page.

Some of the other benefits of Redux include:

  • Having a predictable outcome, because the store is always the source of truth. No confusion exists about how to sync the current state with actions and other parts of the application.
  • Code that is easier to organize and more consistent, making it easier to maintain.
  • Improved server rendering, with the result of a better user experience, enriched search engine optimization, and so on.
  • Better developer tools that can track everything going on in the app in real time, from actions to state changes.
  • Testing that is easier due to independent functions that are small, pure, and isolated.

Finally, one of the greatest benefits of implementing Redux is its ecosystem. The user community is strong, and they are constantly making unique articles, tutorials, middleware, tools, and boilerplates available. Samples of use cases can be found here , and many authors are becoming known for their ability to use Redux creatively and, equally as important, explain it coherently.

If you want to know more about our use of Redux or what we’re working on next, feel free to contact us.

 

It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

Leave a Reply