Что такое декомпозиция?

Что такое декомпозиция

Декомпозиция - это разделение сложной системы или задачи на более мелкие, управляемые части. Это один из фундаментальных принципов computer science и software engineering, применяемый на всех уровнях разработки.

Определение

Декомпозиция это процесс разбиения целого на составные части с целью:

• Упростить понимание
• Облегчить разработку
• Уменьшить сложность
• Улучшить тестируемость
• Сделать систему масштабируемой

Примеры декомпозиции в Frontend

1. Компонентная архитектура в React

// Без декомпозиции - один большой компонент
function BadUserProfile() {
  // 500+ строк кода
  // Форма, аватар, список друзей, статистика, все вместе
  return <div>...</div>;
}

// С декомпозицией - разбиение на компоненты
function UserProfile() {
  return (
    <div>
      <UserHeader />
      <ProfileForm />
      <AvatarUploader />
      <FriendsList />
      <UserStats />
    </div>
  );
}

// Каждый компонент отвечает за одно
function UserHeader({ user }) {
  return <h1>{user.name}</h1>;
}

function ProfileForm({ user, onSave }) {
  return (
    <form onSubmit={onSave}>
      {/* только форма */}
    </form>
  );
}

2. Декомпозиция логики на хуки

// Плохо - вся логика в компоненте
function ProductPage() {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setLoading(true);
    fetch(`/api/products/${id}`)
      .then(r => r.json())
      .then(data => { setProduct(data); setLoading(false); })
      .catch(err => { setError(err); setLoading(false); });
  }, [id]);
  
  // много JSX кода
  return <div>...</div>;
}

// Хорошо - логика в отдельном хуке
function useProduct(id) {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setLoading(true);
    fetch(`/api/products/${id}`)
      .then(r => r.json())
      .then(data => { setProduct(data); setLoading(false); })
      .catch(err => { setError(err); setLoading(false); });
  }, [id]);
  
  return { product, loading, error };
}

function ProductPage() {
  const { product, loading, error } = useProduct(id);
  return <div>...</div>; // чистый JSX
}

3. Декомпозиция по слоям (Layered Architecture)

// Presentation Layer - только отображение
function ProductCard({ product, onBuy }) {
  return (
    <div>
      <h2>{product.name}</h2>
      <p>${product.price}</p>
      <button onClick={() => onBuy(product.id)}>Buy</button>
    </div>
  );
}

// Business Logic Layer - бизнес-логика
function useProductPurchase(productId) {
  const [loading, setLoading] = useState(false);
  
  const purchase = async () => {
    setLoading(true);
    await api.purchase(productId);
    setLoading(false);
  };
  
  return { purchase, loading };
}

// Data Access Layer - работа с данными
const api = {
  async purchase(productId) {
    return fetch(/api/purchase, {
      method: POST,
      body: JSON.stringify({ productId })
    }).then(r => r.json());
  }
};

4. Декомпозиция функций

// Функция, которая делает много
function validateAndSaveUser(user) {
  if (!user.email || !user.email.includes(@)) return false;
  if (user.password.length < 8) return false;
  if (!user.name || user.name.length < 2) return false;
  
  const hashedPassword = hashPassword(user.password);
  const userData = { ...user, password: hashedPassword };
  
  saveToDatabase(userData);
  sendWelcomeEmail(user.email);
  return true;
}

// Разбить на части
function isValidEmail(email) {
  return email && email.includes(@);
}

function isValidPassword(password) {
  return password && password.length >= 8;
}

function isValidName(name) {
  return name && name.length >= 2;
}

function validateUser(user) {
  return isValidEmail(user.email) &&
         isValidPassword(user.password) &&
         isValidName(user.name);
}

function prepareUserData(user) {
  return {
    ...user,
    password: hashPassword(user.password)
  };
}

function saveUser(user) {
  if (!validateUser(user)) return false;
  
  const userData = prepareUserData(user);
  saveToDatabase(userData);
  sendWelcomeEmail(user.email);
  return true;
}

Принципы хорошей декомпозиции

1. Single Responsibility Principle - каждая часть имеет одну ответственность
2. Низкая связанность (Low Coupling) - части независимы друг от друга
3. Высокая когезия (High Cohesion) - связанный код находится вместе
4. Переиспользуемость - части можно использовать в других местах
5. Тестируемость - легко писать тесты для маленьких частей

Уровни декомпозиции в приложении

// Level 1: Приложение -> Страницы
// Level 2: Страницы -> Компоненты
// Level 3: Компоненты -> Подкомпоненты
// Level 4: Компоненты -> Хуки
// Level 5: Хуки -> Утилиты и функции

Когда остановиться

Декомпозировать нужно до тех пор, пока:

• Каждый компонент/функция имеет одну ясную ответственность
• Код легко понять с первого взгляда
• Легко писать тесты
• Не появляется излишняя сложность

Декомпозиция - это искусство найти правильный баланс между простотой и модульностью. Профессиональный разработчик видит, как разбить задачу оптимально.