Redux or MobX: An attempt to dissolve the Confusion

redux mobx

I used Redux excessively the last year, but spent the recent time with MobX as state management alternative. It seems that an upcoming alternative to Redux evolves naturally into confusion in the community. People are uncertain which solution to pick. The issue isn’t necessarily Redux or MobX. Whenever there exists an alternative, people are curious what’s the best way to solve their problem. I am writing these lines now to clear the confusion around both state management solutions Redux and MobX.

In the beginning of 2016 I wrote a fairly big application in React + Redux. After I discovered MobX as alternative some time ago, I took the time to refactor the application from Redux to MobX. Now I am pretty comfortable in using both and hopefully in explaining both approaches.

Continue reading

Redux Observable RxJS: Going Epic with Reactive Programming

redux observable rxjs

The Redux Observable RxJS: Going Epic with Reactive Programming tutorial builds up on The SoundCloud Client in React + Redux.

The good thing about the Redux + React ecosystem is you can always have a shot at something novel in the JavaScript landscape. Especially when it comes to the middleware of Redux to handle asynchronous requests, one will find a great selection of paradigms and implementations to choose from. In the beginning you often end up with a Promise based middleware to deal with asynchronous actions, but there is more in JavaScript like Observables and Generators to deal with asynchronous requests.

The tutorial will show you how to use Observables in Redux. Moreover it will give you an entry point into Reactive Programming. Keep in mind that it will only scratch the surface, but maybe afterwards you get the idea and want to give it a shot in some of your projects as well.

Reactive Programming gained a lot of attraction in the recent years. Netflix is one of the bigger companies using and representing it openly. The Rx family is well known for providing libraries for all kinds of platforms to make Reactive Programming happen – JavaScript is one of these platforms.

The Redux Observable RxJS: Going Epic with Reactive Programming tutorial uses redux-observable as middleware for asynchronous actions in Redux. It takes advantage of RxJS to provide observable streams. Observables are in contrast to Arrays collections over time – one can call them streams as well. Operators (filter, map, scan..) on Observables allow one to return a new stream while keeping the old stream untouched. That characteristic is called immutability, because we don’t alter the previous object. We might be already familiar with the same functionality (filter, map, reduce…) in plain JavaScript Arrays, but we can also apply them on streams over time. For instance one can even merge two streams into one stream to enable orchestration of the business logic.

Continue reading

MobX React: Simplified State Management in React

mobx react

The MobX React: Simplified State Management in React builds up on The SoundCloud Client in React + Redux.

MobX is a state management solution. It is a standalone pure technical solution without being opinionated about the architectural state management app design. The 4 pillars State, Actions, Reactions and Derivations make state management in MobX possible. First the State encapsulates all of your application state which can consist of primitives to complex objects. While Actions mutate the State, Reactions are running every time the State was mutated. Derivations are similar to Reactions, but they produce a new value depending on the State.

mobx react

The MobX React: Simplified State Management in React tutorial will teach you how to use MobX instead of Redux for state management in React. We will come from a Redux + React seed project and refactor it from Redux to MobX. While we do so, I will explain in detail the concepts behind MobX and the similarities and differences compared to Redux.

Continue reading

Redux Normalizr: Improve your State Management

react redux normalizr

Redux Normalizr: Improve your State Management tutorial builds up on The SoundCloud Client in React + Redux.

The Normalizr in Redux tutorial will teach you how to use normalizr for an improved data management in your Redux store. The library itself will help you to avoid deep nested data structures although the returned data from a server is deeply nested. Additionally it comes for free to enable a manageable single source of truth for data entities in your global store.

Continue reading

Redux Ducks: Restructure your Redux App with Ducks

redux ducks

The Redux Ducks tutorial builds up on The SoundCloud Client in React + Redux.

The Redux Ducks: Restructure your Redux App with Ducks tutorial will teach you how to bundle action creators, action types and reducers side by side in your Redux app.

Usually in the beginning of learning Redux you have a technical separation of concerns which gets reflected in the folder structure. Basically there is one folder for your actions and one folder for your reducers. Additionally you collect all action types at one place that they can be reused by reducers and actions.

Since it is often the case that an action is followed by a reducer and both of them share the same action type, a new recommendation came up to collocate all of them at one place. They call it Ducks.

The tutorial itself will not strictly follow all proposed guidelines of the recommendation, but it gives you a good understanding of how your app would look like after the refactoring and the advantages of using the bundling.

Continue reading

Flow: Type Checking with Flow in React + Redux

react flow

The Flow tutorial builds up on The SoundCloud Client in React + Redux.

The Flow: Type Checking with Flow in React + Redux tutorial will teach you how to use Flow in a React + Redux environment. Since JavaScript itself is a dynamically typed language, you will end up with several bugs in your JavaScript career, which could have been prevented due type safety. In terms of using Flow for type safety, it only needs a simple setup to get the advantage of a more robust application. Moreover your feedback loop during development will improve, since you get the type safety in your terminal/IDE. Flow was introduced the first time at the Scale Conference in September 2014.

Continue reading

React ESLint: Code Style like Airbnb in React

react eslint

The React ESLint tutorial builds up on The SoundCloud Client in React + Redux.

The React ESLint: Code Style like Airbnb in React tutorial will teach you how to setup ESLint in a React + Babel + Webpack environment. In addition to the setup of usual code style rules, you will add React rules to enforce a better code style in your React environment as well. Moreover you will learn how to extend your ESLint rules with existing best practices rules of companies like Airbnb.

Continue reading

The SoundCloud Client in React + Redux

react redux

In the beginning of 2016 it was time for me to deep dive into the React world. I read tons of articles about React and its environment, especially Redux, so far. Several of my colleagues used it in side projects and on a theoretical level I could participate in the discussions.

In my company we relied heavily on Angular 1 at this point. Since we are using it in a quite large code base, we know a lot about its flaws. Back in 2015 we already adopted our own flux architecture in the Angular world with the usage of stores and an unidirectional data flow. We were highly aware of the change coming with the React environment.

Again in the early days of 2016 I wanted to see this hyped paradigm shift in its natural environment (React and its flux successor Redux) with a hands on side project.

It took me some weeks to implement FaveSound a simple SoundCloud client. Being both a passionate SoundCloud consumer and producer, it felt compelling for me to do my own SoundCloud client in React + Redux.

Professionally I grew with the code base, but also got an entry point into the open source community by providing a larger code base example for beginners in the React + Redux world. Since I made this great experience, I wanted to give the community this hands on tutorial, which will guide people to get started in React + Redux with a compelling real world application – a SoundCloud client.

At the end of this tutorial you can expect to have a running React + Redux app, which consumes the SoundCloud API. You will be able to login with your SoundCloud account, list your latest tracks and listen to them within the browser. Additionally you will learn a lot about tooling with Webpack and Babel.

In the future I am going to write some smaller tutorials based on this one. They will simply build on top of this project and help you to get started in various topics. So keep an eye on this tutorial, follow me on Twitter or GitHub or simply star the repository to get updates.

Continue reading

D3 on Angular: Reusable Components

Components become more important these days. In the future you will get to hear more and more about Web Components, which get available in Angular 2.0 as well, to create different reusable components. While you already weave multiple angular directives into each other, there are only a few articles which describe this reusability with d3 directives. The article shows how you can achieve reusable components with D3 on Angular. The coding example builds up on D3 on Angular: Small Multiples with Brushing.


Continue reading