Как организовать переключение между desktop- и mobile-версиями интерфейса, если для них заведены разные наборы компонентов, а сервисы общие?

Когда desktop и mobile версии имеют разные наборы компонентов, но общие сервисы, важно не смешивать эти слои. Бизнес-логика, работа с API, состояние и утилиты должны находиться в общем ядре, а компоненты — в отдельных модулях представления. Тогда переключение сводится к выбору нужного набора компонентов, а не к копированию логики.

Основные подходы

• Условный рендеринг: один контейнер решает, какой компонент показать, на основе платформы.
• Раздельные точки входа: desktop и mobile собираются как отдельные бандлы, но импортируют общее ядро.
• Фабрика компонентов: контейнер получает нужный набор через dependency injection или провайдер.
• Роутинг по платформе: разные маршруты ведут на разные представления, но используют одни сервисы.

Пример на React

// shared/services/userService.ts
export const userService = { fetchUser: () => api.get('/user') };

// desktop/UserCard.tsx
export const UserCard = () => { /* desktop UI */ };

// mobile/UserCard.tsx
export const UserCard = () => { /* mobile UI */ };

// App.tsx
import { userService } from './shared/services/userService';
import { UserCard as DesktopCard } from './desktop/UserCard';
import { UserCard as MobileCard } from './mobile/UserCard';

const isMobile = window.matchMedia('(max-width: 768px)').matches;
const UserCard = isMobile ? MobileCard : DesktopCard;

export const App = () => {
  const [user, setUser] = useState(null);
  useEffect(() => { userService.fetchUser().then(setUser); }, []);
  return user ? <UserCard user={user} /> : null;
};

Как выбирать платформу

Платформу можно определять по user-agent, по media queries, по отдельному флагу в конфиге сборки или по разным URL. Для SSR важно учитывать, что на сервере нет window, поэтому решение о платформе лучше принимать на клиенте или через заголовки запроса.

Практические рекомендации

• Держите сервисы и модели данных в shared-слое без зависимостей от UI.
• Не дублируйте бизнес-логику в desktop и mobile компонентах.
• Используйте единый контракт пропсов, чтобы компоненты были взаимозаменяемы.
• Для сложных проектов выделяйте отдельные пакеты или модули: core, desktop-ui, mobile-ui.

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