Как выбирать технологию для frontend-части большого веб-продукта уровня CRM или Service Desk при готовом backend? Какие критерии учитывать?

Выбор frontend-технологии для CRM или Service Desk — это архитектурное решение на годы, а не выбор «модного» фреймворка. Такие продукты живут долго, обрастают модулями, таблицами, формами, правами доступа и интеграциями, поэтому ошибка в стеке обходится дорого: переписывание, дефицит кадров, замедление релизов.

Ключевые критерии выбора

• Требования продукта: объём данных, сложность таблиц и форм, real-time (WebSocket), офлайн-режим, мультиязычность, роли и права.
• Масштаб команды: один разработчик или несколько команд. Для больших команд важны строгие конвенции (Angular, TypeScript), для гибких — React/Vue.
• Экосистема и библиотеки: наличие готовых решений для таблиц, графиков, форм, i18n, state management.
• Типизация и надёжность: TypeScript почти обязателен для крупных кодовых баз.
• Производительность: виртуализация списков, ленивая загрузка, SSR/CSR, code splitting.
• Кадровый рынок: сколько специалистов доступно и какова стоимость их найма.
• Долгосрочная поддержка: активность сообщества, LTS-релизы, миграционные пути.
• Интеграция с backend: REST, GraphQL, WebSocket, генерация клиентов по OpenAPI.

Сравнение популярных вариантов

• React: максимальная гибкость и экосистема, но требует дисциплины и своих архитектурных решений.
• Angular: «всё в комплекте», строгая структура, хорошо для больших корпоративных команд.
• Vue: низкий порог входа, хорош для средних команд, экосистема меньше React.
• Svelte: отличная производительность, но меньше готовых enterprise-решений.

Пример структуры проекта на React + TypeScript

// src/features/tickets/TicketList.tsx
import { useTickets } from './useTickets';
import { TicketRow } from './TicketRow';

export function TicketList() {
  const { data, isLoading } = useTickets();
  if (isLoading) return <Spinner />;
  return (
    <VirtualTable rows={data} rowComponent={TicketRow} />
  );
}

// src/api/client.ts — генерация клиента по OpenAPI
import createClient from 'openapi-fetch';
import type { paths } from './schema';
export const api = createClient<paths>({ baseUrl: '/api' });

Как принимать решение

1. Соберите требования и ограничения (сроки, бюджет, команда).
2. Составьте матрицу критериев с весами.
3. Сделайте прототип на 2–3 кандидатах (spike) на реальных сценариях.
4. Оцените стоимость поддержки и найма на 3–5 лет.
5. Зафиксируйте решение в ADR (Architecture Decision Record).

Итог: технологию выбирают под конкретный продукт и команду, а не по хайпу. Для крупного CRM/Service Desk чаще всего оправданы React или Angular с TypeScript, строгой архитектурой, дизайн-системой и автоматической генерацией API-клиента из спецификации backend.