9. Frontend directory structure and architecture
Date: 2023-05-16
Context
Our software project has a frontend that needs to be organized to facilitate maintenance, scalability, modularity, and ease of navigation. The current directory structure is outdated and hard to manage. As software engineers, we propose a new directory structure based on some criteria.
We studied Reduxβ documentation about common patterns for project structures.
Most of the discussion happened reviewing web/#1355.
Decision
We propose the following new directory structure for the frontend of our software project:
assets/js βββ app.js βββ common βΒ Β βββ Banners βΒ Β βββ Button β βΒ Β βββ Button.js β βΒ Β βββ Button.stories.js β βΒ Β βββ Button.test.js βΒ Β β βββ index.js βΒ Β βββ ListView βΒ Β βββ Modal βΒ Β βββ ObjectTree βΒ Β βββ Table βΒ Β βββ Tags βΒ Β βββ Tooltip βββ pages βΒ Β βββ AboutPage βΒ Β βββ ChecksCatalog βΒ Β βββ ClusterDetails βΒ Β βββ DatabaseDetails βΒ Β βββ DatabasesOverview βΒ Β βββ ExecutionResults βΒ Β βββ Health βΒ Β βββ HealthSummary βΒ Β βββ Home βΒ Β βββ HostDetails βββ hooks βββ lib βββ state βΒ Β βββ sagas β βΒ Β βββ clusters.js β βΒ Β βββ clusters.test.js βΒ Β β βββ index.js βΒ Β βββ selectors β βΒ Β βββ clusters.js β βΒ Β βββ clusters.test.js βΒ Β β βββ index.js βΒ Β βββ clusters.js βΒ Β βββ clusters.test.js βββ trento.jsx
Note that /common
contains truly generic and reusable utilities and
components.
Consequences
There may be some overhead associated with restructuring the frontend, such as updating dependencies, fixing references, or rewriting some parts of the application. However, in the long term, this new directory structure will ensure an organized and efficient system that can be easily maintained, scaled, and navigated. The new structure will also facilitate collaboration between developers as they will have a better understanding of where everything is located.
We have one drawback: action creators related to sagas now live along with slices and action creators generated by redux-toolkit. We found reasonable to have action creators all stuffed in one specific place, but it is well understood that it might not be the case for everyone.