Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!
Our natural way of dealing with complexity is to break it into smaller pieces and then put everything back together.
This is a two step process:
- decompose the problem into smaller parts
- compose the small parts to solve the problem
We decompose in smaller parts because they are easier to understand and implement. The smaller parts can be developed in parallel.
The process of decomposition is about assigning responsibilities and giving names. This makes it easy to talk and reason about. Once we identify a responsibility, we can reuse it.
Composition is about combining the small parts together and establishing a relationship between them. We decide the way these pieces communicate, the order in which they execute, and how data flows between them.
We find a system hard to understand even if it is split in smaller parts, if there is a high number of relations between these parts. In order to make a system easier to understand, we need to minimize the number of possible connections between its parts.
Object decomposition
Objects are more than state and behavior working together. Objects are things with responsibilities.
Decompose
In How to create a three layer application with React, I take a to-do list application and split the responsibilities between the following objects :
TodoDataService: responsible for the communication with the server Todo APIUserDataService: responsible for the communication with the server User API.TodoStore: the domain store for managing to-dos. It is the single source of truth regarding to-dos.UserStore: the domain store for managing users.TodoListContainer: the root container component displaying the list of to-dos.
As you can see, when decomposing, I assign responsibilities and give names.
Compose
Next, I compose them together in a single function. This is the place where all objects are created and dependencies injected. It is called Composition Root.
Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!
For more on applying functional programming techniques in React take a look at Functional React.
Learn functional React, in a project-based way, with Functional Architecture with React and Redux.