Что такое KISS?

KISS — Keep It Simple, Stupid

KISS — это принцип проектирования и разработки, который гласит: сложное решение хуже, чем простое. Иначе говоря, избегай ненужной сложности. Это один из самых важных принципов в программировании.

Суть принципа

В своей основе KISS говорит нам: если ты написал сложный код, попробуй его упростить. Большинство систем работают лучше, когда остаются простыми, чем когда они перегружены ненужными функциями.

Почему это важно для Frontend Developer

1. Удобство поддержки кода

// ❌ Плохо — чрезмерно сложный компонент
const SuperComponent = ({ data, config, state, handlers, filters, transformers }) => {
  const [internal, setInternal] = useState(null);
  const [cache, setCache] = useState({});
  const [listeners, setListeners] = useState([]);
  
  useEffect(() => {
    // 100+ строк логики обработки данных
    const processedData = complexTransformation(data, config, state, filters);
    // ещё 50 строк вычислений
  }, [data, config, state, filters]);
  
  return <div>...</div>;
};

// ✅ Хорошо — разбить на простые компоненты
const DataProcessor = ({ data, config }) => {
  const processed = useMemo(() => processData(data, config), [data, config]);
  return <SimpleView data={processed} />;
};

const SimpleView = ({ data }) => {
  return <div>{data.map(item => <Item key={item.id} {...item} />)}</div>;
};

2. Избегай абстракций "на будущее"

// ❌ Плохо — создаём сложную фабрику для будущих кейсов
const createAdvancedButtonFactory = (config) => {
  const variants = {};
  for (let i = 0; i < 50; i++) {
    variants[`variant_${i}`] = generateStyle(i);
  }
  return (props) => renderButtonWithVariant(props, variants);
};

// ✅ Хорошо — простой компонент, параметризуемый props
const Button = ({ variant = "primary", size = "md", children }) => {
  return <button className={`btn-${variant}-${size}`}>{children}</button>;
};

3. Читаемость и понимание кода

// ❌ Плохо — многоуровневая вложенность
const render = () => {
  return (
    <div>
      {items.filter(x => x.active)
        .map(x => x.children)
        .reduce((acc, arr) => [...acc, ...arr], [])
        .sort((a, b) => a.priority - b.priority)
        .map(item => (
          <div onClick={() => {
            dispatch(action(item));
            if (validate(item)) {
              process(item).then(r => setState(prev => ({...prev, [item.id]: r})));
            }
          }}>
            {item.name}
          </div>
        ))}
    </div>
  );
};

// ✅ Хорошо — каждый шаг понятен
const getActiveItems = () => items.filter(x => x.active);
const flattenChildren = (items) => items.flatMap(x => x.children);
const sortByPriority = (items) => items.sort((a, b) => a.priority - b.priority);

const handleItemClick = async (item) => {
  dispatch(action(item));
  if (!validate(item)) return;
  const result = await process(item);
  setState(prev => ({...prev, [item.id]: result}));
};

const render = () => {
  const items = sortByPriority(flattenChildren(getActiveItems()));
  return (
    <div>
      {items.map(item => (
        <div key={item.id} onClick={() => handleItemClick(item)}>
          {item.name}
        </div>
      ))}
    </div>
  );
};

Примеры в повседневной работе

Стили

// ❌ Плохо — сложная система для малого числа стилей
const styleMap = {
  primary: { color: "#fff", bg: "#000", shadow: "0 2px 4px" },
  secondary: { color: "#000", bg: "#fff", shadow: "0 1px 2px" },
  // ... 10 вариантов
};

const getStyle = (variant, size, theme) => {
  return mergeStyles(styleMap[variant], sizeMap[size], themeMap[theme]);
};

// ✅ Хорошо — Tailwind + условные классы
import { cn } from "@/lib/utils";

const Button = ({ variant = "primary", size = "md" }) => (
  <button className={cn(
    "px-4 py-2 rounded-lg",
    variant === "primary" && "bg-black text-white shadow-md",
    variant === "secondary" && "bg-white text-black shadow-sm",
    size === "lg" && "px-6 py-3",
  )} />
);

Архитектура

// ❌ Плохо — сложная иерархия с дополнительными слоями
const service = new ServiceFactory();
const repository = new RepositoryFactory(service);
const useCase = new UseCaseFactory(repository);
const presenter = new PresenterFactory(useCase);

// ✅ Хорошо — прямое использование
const useUserData = (userId) => {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);
  
  return user;
};

Когда НЕ применяется KISS

Не путай простоту с наивностью:

• Для высоконагруженных приложений требуется оптимизация (может быть сложнее)
• Работа с большими объёмами данных может требовать кеширования
• Безопасность может потребовать дополнительной логики

Но даже в этих случаях каждый слой сложности должен быть оправдан конкретной необходимостью.

Резюме

КISS — это про выбор простого решения, которое решает текущую задачу, а не про создание универсального фреймворка "на все случаи жизни". В контексте Frontend разработки это означает: понятные компоненты, чистые хуки, минимум абстракций, максимум понимаемости. Если твой код требует документации только для понимания, он слишком сложный.