В проекте больше верстки или логики

В проекте больше верстки или логики

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

Почему можно подумать, что верстки больше

На первый взгляд может казаться, что фронтенд — это в основном HTML и CSS. Визуальные элементы занимают большую часть кода:

// На первый взгляд кажется, что это просто вёрстка
export function UserProfile({ user }) {
  return (
    <div className="profile">
      <header className="profile-header">
        <img src={user.avatar} alt={user.name} />
        <h1>{user.name}</h1>
      </header>
      <section className="profile-content">
        <p className="bio">{user.bio}</p>
        <div className="stats">
          <div className="stat-item">
            <span className="stat-label">Followers</span>
            <span className="stat-value">{user.followers}</span>
          </div>
        </div>
      </section>
    </div>
  );
}

Но за этой вёрсткой скрывается значительная логика.

На самом деле логики больше

В реальных проектах логика распределена по разным слоям:

1. Управление состоянием (State Management)

// Redux, Zustand, Context API — это логика
const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {
    fetchUserStart: (state) => { state.loading = true; },
    fetchUserSuccess: (state, action) => {
      state.data = action.payload;
      state.loading = false;
    },
    fetchUserError: (state, action) => {
      state.error = action.payload;
      state.loading = false;
    }
  }
});

2. API взаимодействие (API Calls)

// Логика запросов, обработка ошибок, кэширование
const fetchUser = async (userId) => {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) throw new Error('Failed to fetch');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching user:', error);
    throw error;
  }
};

3. Бизнес-логика (Business Logic)

// Вычисления, валидация, фильтрация
const calculateUserRating = (user) => {
  const baseRating = user.score * 0.5;
  const experienceBonus = user.yearsExperience * 2;
  const reviewBonus = user.reviews.filter(r => r.rating >= 4).length * 0.5;
  return baseRating + experienceBonus + reviewBonus;
};

const filterUsersByProfession = (users, profession) => {
  return users.filter(u => 
    u.professions.includes(profession) && 
    calculateUserRating(u) > 50
  );
};

4. Управление формами (Forms)

// Валидация, ошибки, отправка
const useForm = (initialValues, onSubmit) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues(prev => ({ ...prev, [name]: value }));
  };

  const handleBlur = (e) => {
    const { name } = e.target;
    setTouched(prev => ({ ...prev, [name]: true }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const validationErrors = validate(values);
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      return;
    }
    setIsSubmitting(true);
    try {
      await onSubmit(values);
    } finally {
      setIsSubmitting(false);
    }
  };

  return { values, errors, touched, isSubmitting, handleChange, handleBlur, handleSubmit };
};

5. Маршрутизация (Routing)

// Логика навигации, параметры, гвардов
const routes = [
  { path: '/', component: Home },
  { path: '/users/:id', component: UserProfile, guards: [requireAuth] },
  { path: '/admin', component: Admin, guards: [requireAdmin, requireAuth] }
];

Примерное распределение в реальном проекте

В типичном React приложении:

• Логика (50-60%): state management, API calls, бизнес-логика, валидация, обработка событий
• Вёрстка (40-50%): JSX структура, CSS классы, адаптивные макеты

Это может варьироваться:

• Data-heavy приложение (аналитика, дашборды): 70% логики
• UI-heavy приложение (дизайн-системы, лендинги): 40% логики

Сложные примеры логики

Оптимизация рендера (Performance)

// Усложненная логика для производительности
const UserList = React.memo(({ users, sortBy, filterBy }) => {
  const filteredUsers = useMemo(
    () => users
      .filter(u => u.role === filterBy)
      .sort((a, b) => a[sortBy].localeCompare(b[sortBy])),
    [users, sortBy, filterBy]
  );

  return (
    <ul>
      {filteredUsers.map(user => (
        <UserItem key={user.id} user={user} />
      ))}
    </ul>
  );
});

Асинхронные операции

// Сложная логика получения и обновления данных
const useUserData = (userId) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let isMounted = true;
    const abortController = new AbortController();

    const fetchData = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`, {
          signal: abortController.signal
        });
        const json = await response.json();
        if (isMounted) {
          setData(json);
          setError(null);
        }
      } catch (err) {
        if (isMounted && err.name !== 'AbortError') {
          setError(err);
        }
      } finally {
        if (isMounted) setLoading(false);
      }
    };

    fetchData();

    return () => {
      isMounted = false;
      abortController.abort();
    };
  }, [userId]);

  return { data, error, loading };
};

Вывод

В современном фронтенд-проекте логики БОЛЬШЕ, чем верстки. Верстка — это лишь один из слоёв. Основная сложность фронтенда заключается в:

• Управлении состоянием приложения
• Асинхронных операциях
• Обработке ошибок
• Оптимизации производительности
• Валидации данных
• Маршрутизации
• Интеграции с API

Весь этот код находится за пределами чистой вёрстки и представляет собой существенную часть фронтенда.