Asosiy tarkibga o'tish

Migration from legacy

Maqola yozilish jarayonida

Uning yaratilishini tezlashtirish uchun siz:


๐Ÿฐ Stay tuned!

The article aggregates the experience of several companies and projects on moving to Feature-Sliced Design with different initial conditions

Why?

How much does the move need? "Death by a thousand cuts" and those debt. What is missing? How can the methodology help?

See the talk of Ilya Klimov about the need and procedure for refactoring

approaches-themed-bordered

What's the plan?

1. Unification of the code base

- โ”œโ”€โ”€ products/
- |   โ”œโ”€โ”€ components/
- |   โ”œโ”€โ”€ containers/
- |   โ”œโ”€โ”€ store/
- |   โ”œโ”€โ”€ styles/
- โ”œโ”€โ”€ checkout/
- |   โ”œโ”€โ”€ components/
- |   โ”œโ”€โ”€ containers/
- |   โ”œโ”€โ”€ helpers/
- |   โ”œโ”€โ”€ styles/
+ โ””โ”€โ”€ src/
      โ”œโ”€โ”€ actions/
      โ”œโ”€โ”€ api/
+     โ”œโ”€โ”€ components/
+     โ”œโ”€โ”€ containers/
      โ”œโ”€โ”€ constants/
      โ”œโ”€โ”€ epics/
+     โ”œโ”€โ”€ i18n/
      โ”œโ”€โ”€ modules/
+     โ”œโ”€โ”€ helpers/
+     โ”œโ”€โ”€ pages/
-     โ”œโ”€โ”€ routes/
-     โ”œโ”€โ”€ utils/
      โ”œโ”€โ”€ reducers/
-     โ”œโ”€โ”€ redux/
      โ”œโ”€โ”€ selectors/
+     โ”œโ”€โ”€ store
+     โ”œโ”€โ”€ styles/
      โ”œโ”€โ”€ App.jsx
      โ””โ”€โ”€ index.jsx

2. Putting together the destructive decoupled

  โ””โ”€โ”€ src/
-     โ”œโ”€โ”€ actions/
      โ”œโ”€โ”€ api/
-     โ”œโ”€โ”€ components/
-     โ”œโ”€โ”€ containers/
-     โ”œโ”€โ”€ constants/
-     โ”œโ”€โ”€ epics/
+     โ”œโ”€โ”€ entities/{...}
+     |     โ”œโ”€โ”€ ui
+     |     โ”œโ”€โ”€ model/{actions, selectors, ...}
+     |     โ”œโ”€โ”€ lib
      โ”œโ”€โ”€ i18n/
      |   # We can temporarily put the remaining segments here
+     โ”œโ”€โ”€ modules/{helpers, constants}
-     โ”œโ”€โ”€ helpers/
      โ”œโ”€โ”€ pages/
-     โ”œโ”€โ”€ reducers/
-     โ”œโ”€โ”€ selectors/
-     โ”œโ”€โ”€ store/
      โ”œโ”€โ”€ styles/
      โ”œโ”€โ”€ App.jsx
      โ””โ”€โ”€ index.jsx

3. Allocate scopes of responsibility

 โ””โ”€โ”€ src/
-    โ”œโ”€โ”€ api/
+    โ”œโ”€โ”€ app/
+    |   โ”œโ”€โ”€ index.jsx
+    |   โ”œโ”€โ”€ style.css
     โ”œโ”€โ”€ pages/
+    โ”œโ”€โ”€ features/
+    |   โ”œโ”€โ”€ add-to-cart/{ui, model, lib}
+    |   โ”œโ”€โ”€ choose-delivery/{ui, model, lib}
+    โ”œโ”€โ”€ entities/{...}
+    |   โ”œโ”€โ”€ delivery/{ui, model, lib}
+    |   โ”œโ”€โ”€ cart/{ui, model, lib}
+    |   โ”œโ”€โ”€ product/{ui, model, lib}
+    โ”œโ”€โ”€ shared/
+    |   โ”œโ”€โ”€ api/
+    |   โ”œโ”€โ”€ lib/    # helpers
+    |   |    โ”œโ”€โ”€ i18n/
+    |   โ”œโ”€โ”€ config/ # constants
-    โ”œโ”€โ”€ i18n/
-    โ”œโ”€โ”€ modules/{helpers, constants}
     โ””โ”€โ”€ index.jsx

4. Final ?

About the remaining problems and how much it is worth eliminating them

See also