Skip to content

Commit 8dce22f

Browse files
Add ADR for frontend directory structure (#27)
1 parent 2d931c5 commit 8dce22f

File tree

1 file changed

+70
-0
lines changed

1 file changed

+70
-0
lines changed
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# 9. Frontend directory structure and architecture
2+
3+
Date: 2023-05-16
4+
5+
## Status
6+
7+
Accepted
8+
9+
## Context
10+
11+
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.
12+
13+
We studied [Redux' documentation](https://redux.js.org/faq/code-structure/) about common patterns for project structures.
14+
15+
Most of the discussion happened reviewing [web/#1355](https://github.com/trento-project/web/pull/1355).
16+
17+
## Decision
18+
19+
We propose the following new directory structure for the frontend of our software project:
20+
21+
```
22+
assets/js
23+
├── app.js
24+
├── common
25+
│   ├── Banners
26+
│   ├── Button
27+
│ │   ├── Button.js
28+
│ │   ├── Button.stories.js
29+
│ │   ├── Button.test.js
30+
│   │ └── index.js
31+
│   ├── ListView
32+
│   ├── Modal
33+
│   ├── ObjectTree
34+
│   ├── Table
35+
│   ├── Tags
36+
│   └── Tooltip
37+
├── pages
38+
│   ├── AboutPage
39+
│   ├── ChecksCatalog
40+
│   ├── ClusterDetails
41+
│   ├── DatabaseDetails
42+
│   ├── DatabasesOverview
43+
│   ├── ExecutionResults
44+
│   ├── Health
45+
│   ├── HealthSummary
46+
│   ├── Home
47+
│   └── HostDetails
48+
├── hooks
49+
├── lib
50+
├── state
51+
│   ├── sagas
52+
│ │   ├── clusters.js
53+
│ │   ├── clusters.test.js
54+
│   │ └── index.js
55+
│   ├── selectors
56+
│ │   ├── clusters.js
57+
│ │   ├── clusters.test.js
58+
│   │ └── index.js
59+
│   ├── clusters.js
60+
│   ├── clusters.test.js
61+
└── trento.jsx
62+
```
63+
64+
Note that `/common` contains truly generic and reusable utilities and components.
65+
66+
## Consequences
67+
68+
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.
69+
70+
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.

0 commit comments

Comments
 (0)