Translated by Murgut
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 user or suite of entities which are united by one idea. For instance: users, text-editor, account, articles.
Feature cannot be grouped by type, too much abstract entity. Examples how not to do: roles, forms, validate.
- Every feature must have the same structure.
account, ... — arbitary name of the feature in cebab-case.
- The feature's content may be recieved 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 asumes 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 which allow to create any feature.
- UI must be disconnected from any global stores.
- Components must be maximally reusable and independent on context (not React Context API).