I split my source code on
Logic can be only in the
▸ — the icon of collapse directory tree
src/ api/▸ features/▸ lib/▸ pages/▸ ui/▸
1. Feature structure:
src/ features/ account/▸ editor/▸ settings/▸ users/ atoms/ index.js avatar.js lib/ lib-name/ index.js test.js readme.md models/▸ molecules/▸ organisms/▸ templates/▸ index.js
Feature — it is useful functionality for users or it is a suite of entities that are united by one idea. For example users, text-editor, accounts, and articles.
Feature cannot be grouped by type, it should not be too abstract. Examples how not to do: roles, forms, validate.
- Every feature must have the same structure.
account, ... — the arbitrary name of the feature in kebab-case.
- The feature's content may be received only from
- Every section can only be created if it has content inside.
lib/it is inner library of feature. It must have tests and documentation.
index.jsfor re-export necessary elements outside.
models/— effector models.
If every component assumes many files in such case you should create (
feature/ users/ atoms/▸ molecules/ personal-apply/▸ user-card/ index.js story.js test.js readme.md organisms/▸ templates/▸
No need of directories if you don't have many files. Important, that in range of feature all look the same.
feature/ settings/ atoms/▸ molecules/▸ organisms/ monitoring-editor.js monitoring-editor.test.js marketplace.js marketplace.test.js
src/ pages/ post/ model.js page.js posts/ create/▸ edit/▸ auth/ login/▸ register/ model.js page.js
- Page's nesting must map routing of true url.
- There is source code of component in
- There is uniq logic of the page in
- There is any common logic in library code
src/ pages/ post/ page.js model.js repo/ view/ pulls/▸ issues/ view/ page.js model.js page.js model.js index.js
- Page of blog post
- Viewer of repository issue
src/ ui/ atoms/ index.js component-name/ index.js readme.js story.js test.js molecules/▸ organisms/▸ templates/▸ index.js
- Atomic Design
- All UI are building blocks that allow to the creation of any feature.
- UI must be disconnected from any global stores.
- Components must be maximally reusable and independent of context (not React Context API).
Translated by Murgut
original article was wrote at 2019