Классическая жизнь фронтенд-приложений и их сопровождение

Проблемы больших проектов: сопровождение компонентов и фанатичность принципу DRY

Рассмотрим типичный сценарий разработки фронтенд-приложений. Бизнес выдвигает требования, которые постепенно усложняют компоненты. Это приводит к проблемам сопровождения, особенно в больших проектах.

Пример: компонент для вывода суммы двух чисел

Первое требование: сумма двух чисел в кавычках

const SumComponent = (a, b) => `"${a + b}"`;

Второе требование: добавить вывод знака в конце

const SumComponent = (a, b, tag) => `"${a + b}"-${tag}`;

Третье требование: добавить умножение

const SumComponent = (a, b, tag, isMultiple) => 
  `${isMultiple ? a * b : ''}-"${a + b}"-${tag}`;

Проблема

Компонент превращается в "монстра" с кучей аргументов. Новые пропсы зависят от старых, что усложняет сопровождение. В больших проектах это становится критичным.

Выход из ситуации: простое решение (но с дублированием)

Один из подходов — создавать отдельные компоненты для каждого кейса. Это противоречит принципу DRY, но упрощает сопровождение.

// Простая сумма
const SumComponent = (a, b) => `"${a + b}"`;

// Сумма с тегом
const SumComponentAndTag = (a, b, tag) => `"${a + b}"-${tag}`;

// Сумма с тегом и умножением
const SumComponentAndTagAndMultiple = (a, b, tag, isMultiple) => 
  `${isMultiple ? a * b : ''}-"${a + b}"-${tag}`;

Проблема этого подхода

Дублирование кода. Если логика суммы изменится, придется вносить изменения во всех компонентах.

Модульный подход: композиция функций (лучшая практика функционального программирования)

Чтобы избежать дублирования и сохранить гибкость, можно использовать композицию функций. Каждая функция отвечает за одну задачу, а затем они комбинируются.

Базовые функции

// Базовая логика суммы
const sum = (a, b) => a + b;

// Добавление кавычек
const withQuotes = (fn) => (a, b) => `"${fn(a, b)}"`;

// Добавление тега
const withTag = (fn) => (a, b, tag) => `${fn(a, b)}-${tag}`;

// Добавление умножения
const withMultiplication = (fn) => (a, b, isMultiple) => 
  isMultiple ? `${a * b}-${fn(a, b)}` : fn(a, b);

Комбинирование функций

// Простая сумма с кавычками
const SumComponent = withQuotes(sum);

// Сумма с кавычками и тегом
const SumComponentAndTag = (a, b, tag) => withTag(withQuotes(sum))(a, b, tag);

// Сумма с кавычками, тегом и умножением
const SumComponentAndTagAndMultiple = (a, b, tag, isMultiple) => 
  withMultiplication(withTag(withQuotes(sum)))(a, b, isMultiple) + `-${tag}`;

Преимущества

1. Модульность: каждая функция отвечает за одну задачу.

2. Переиспользование: функции можно комбинировать в любом порядке.

3. Сопровождение: изменения в базовой логике автоматически применяются ко всем комбинациям.

Практика на Vue.js

Composition API

1. Создаем композаблы (composables)

Каждая логика будет вынесена в отдельный композабл, чтобы обеспечить переиспользование и модульность.

useSum.js — логика суммы

import { computed } from 'vue';

export function useSum(a, b) {
  const sum = computed(() => a + b);
  return { sum };
}

useQuotes.js — добавление кавычек

import { computed } from 'vue';

export function useQuotes(value) {
  const quotedValue = computed(() => `"${value.value}"`);
  return { quotedValue };
}

useTag.js — добавление тега

import { computed } from 'vue';

export function useTag(value, tag) {
  const taggedValue = computed(() => `${value.value}-${tag}`);
  return { taggedValue };
}

useMultiplication.js — добавление умножения

import { computed } from 'vue';

export function useMultiplication(a, b, value, isMultiple) {
  const multipliedValue = computed(() => 
    isMultiple.value ? `${a.value * b.value}-${value.value}` : value.value
  );
  return { multipliedValue };
}

2. Создаем компоненты с использованием композаблов

Базовый компонент SumComponent

<script setup>
import { useSum, useQuotes } from './composables';

const props = defineProps({
  a: Number,
  b: Number,
});

const { sum } = useSum(props.a, props.b);
const { quotedValue } = useQuotes(sum);
</script>

<template>
  <span>{{ quotedValue }}</span>
</template>

Компонент SumComponentAndTag

<script setup>
import { useSum, useQuotes, useTag } from './composables';

const props = defineProps({
  a: Number,
  b: Number,
  tag: String,
});

const { sum } = useSum(props.a, props.b);
const { quotedValue } = useQuotes(sum);
const { taggedValue } = useTag(quotedValue, props.tag);
</script>

<template>
  <span>{{ taggedValue }}</span>
</template>

3. Преимущества подхода

1. Модульность: Каждая логика изолирована в отдельном композабле.

2. Переиспользование: Композаблы можно использовать в разных компонентах.

3. Реактивность: Все значения автоматически обновляются при изменении пропсов.

4. Сопровождение: Легко вносить изменения, так как логика разделена на мелкие части.

5. Тестируемость: Каждый композабл можно тестировать независимо.

4. Пример использования компонентов

<template>
  <div>
    <!-- Простая сумма -->
    <SumComponent :a="2" :b="3" />

    <!-- Сумма с тегом -->
    <SumComponentAndTag :a="2" :b="3" tag="result" />

  </div>
</template>

<script setup>
import SumComponent from './components/SumComponent.vue';
import SumComponentAndTag from './components/SumComponentAndTag.vue';
</script>

5. Итог

Использование useComposable во Vue 3 позволяет:

• Создавать гибкие и модульные компоненты.

• Избегать дублирования кода.

• Упрощать сопровождение и тестирование.

• Легко адаптироваться к изменениям требований.

Options API

Проблемы

1. Слоты: сложно сопровождать в больших проектах.

2. Миксины: могут вызывать конфликты и неявные зависимости.

3. Обычные функции с замыканиями: отсутствие автоматической реактивности.

1. Модульный подход позволяет соблюдать DRY и упрощает сопровождение.

2. Композиция функций делает код гибким и переиспользуемым.

3. Composition API во Vue — современный и удобный способ организации кода.

4. Избегайте монолитных компонентов: разделяйте логику на мелкие, независимые части.

Этот подход особенно полезен в больших проектах, где важно поддерживать баланс между гибкостью и читаемостью кода.