How to structure your React app 2.
In the previous story of how to structure your react app, I wrote about using bundles as the top level of entry points of your app, which might work for some and might not for others. Today I am going to tell you about another way of structuring your react app which we are using at unicorndev — domains. I would recommend reading the first version of this topic before you continue.
Before we start
Before we even start talking about domain, let’s take a look at it:
We define a domain called alert it has components and redux folders but it also has constants file which is related only to this domain.
As you might see it’s quite tiny.
We define a domain and two folders inside it: components & redux. It depends on you what to put inside a domain folder. Whether you are using redux or relay. The idea is to keep everything related to a domain inside it’s own folder.
Idea
Having domains as the top level of your app is beneficial for some reasons:
- Domains are small. It’s easy to keep it in mind while working with it because everything you work on is in the same folder. It’s also easy to reorganise in case you don’t like it.
- Main application’s structure remains flat. Easier to planning the app on the initial stage because domains are independent.
- No deep folder structure — 3 levels average. Don’t need to write long imports that’s why it’s easier to remember what you need to import and from what domain.
- Each domain has a similar structure and usually has some subset of entities like
componentsredux actionsreducerssagas. As long as you keep all the domain look similar it’s easy to remember and used to it. - Domains are easy to specify because it’s always clear what component you are going to write it’s also easy to specify a domain. If you need to create a common text input or a button, so you might want to create a domain called
input. - This approach eliminates things like
sharedorcommonwhere usually all the things which has nothing in common are. You usually put a thing which you can’t specify in one of those folders.
Humans
We’re humans and our brain works in a specific way. It means that for our brain some things are easy to remember and work with rather than others. We tend to remember small and simple things faster. This is why this approach is compatible with a human brain:
- Clear to understand what is what. Domain’s name represents the main function of it.
- Easy to find domain by feature’s name/description.
- Easy to keep them tiny because domains are specifically created for a purpose, and they mostly keep stuff only related to their domains logic.
How to specify
Before you even start thinking of what is a domain you are working or going to work on now you might want to think if you already have this domain in your app. If you don’t have the domain so you need to create one:
- Choose the name. Name should reflect the main function of a domain. Just think about what’s the main purpose or reason you are creating it. Usually name should be singular and start from a lower case letter. Like:
userauth,navigation. - Try to keep all the domain structures similar. To be able to write/find stuff quickly you would have to keep a similar structure for all the domains. For example:
Difference
A bundle is a higher level of abstraction for keeping components than a domain. Defining a bundle is always hard because you need to think about what type of components will be there and because it’s a high-level abstraction it’s always hard to determine, several bundles could have logic intersections that lead to extracting a new bundle or keep it as technical debt. A domain is easy. Simple and exact.
What is better
It is absolutely up to you how to structure your react app. Just think about other people who are working or might be working on the same project with you.
Like & Share. Piece.
P.S. Thanks to all from unicorndev team for reviewing & helping with this article.
