Compose Multiplatform для микросервисов: Установка и первые шаги в кроссплатформенной UI-разработке

Подробное руководство по установке JetBrains Compose Multiplatform и созданию кроссплатформенных UI-клиентов для взаимодействия с микросервисной архитектурой.
Микросервисная архитектура освободила бэкенд-разработку, позволив командам независимо масштабировать и развертывать сервисы. Однако фронтенд, особенно для внутренних инструментов и панелей администрирования, часто оставался монолитом или порождал дублирование усилий для разных платформ. JetBrains Compose Multiplatform, декларативный фреймворк для построения UI на Kotlin, предлагает элегантное решение: единая кодовая база для нативных десктоп- (Windows, macOS, Linux), веб- и мобильных интерфейсов. Эта статья — подробное руководство по его установке и интеграции в экосистему микросервисов.

Почему Compose Multiplatform для микросервисов? Представьте себе набор внутренних утилит для мониторинга, управления конфигурацией или администрирования пользователей. Каждый микросервис может требовать свою простую панель. Писать отдельно на React, SwiftUI и WPF — дорого и медленно. Compose Multiplatform позволяет создать общую библиотеку UI-компонентов (кнопки, таблицы, формы, графики) на Kotlin и использовать ее для сборки легковесных клиентов под любую ОС, которые общаются с вашими микросервисами через REST API или gRPC. Kotlin, как язык, отлично подходит для этого, будучи лаконичным, типобезопасным и полностью совместимым с JVM-бэкендами (например, на Spring Boot или Ktor).

Подготовка среды разработки. Перед установкой убедитесь в наличии:
  • JDK 17 или новее (рекомендуется от Liberica, Temurin или Oracle).
  • Интегрированная среда разработки: IntelliJ IDEA Community или Ultimate Edition (наиболее глубокая поддержка).
  • Для сборки под macOS и iOS в будущем — Xcode (только на машине с macOS).
  • Для сборки веб-приложений — Node.js (устанавливается автоматически, но лучше поставить заранее).
Установка и создание первого проекта. Откройте IntelliJ IDEA и выберите "New Project". В левой панели найдите "Compose Multiplatform". Выберите шаблон, соответствующий вашим целям. Для начала подойдет "Desktop, Android, iOS, Web" или более простой "Desktop". Укажите имя проекта (например, `monitoring-dashboard`), расположение и версию Kotlin (используйте предложенную по умолчанию). Нажмите "Create".

IDEA создаст структуру проекта с несколькими модулями:
  • `commonMain` — ядро, где живет общая бизнес-логика и UI-компоненты, написанные на Compose.
  • `desktopMain`, `androidMain`, `jsMain` (для web) — платформо-специфичные модули для точки входа и доступа к нативным API (файловая система, сеть и т.д.).
  • Файлы сборки Gradle (`build.gradle.kts`) будут уже предварительно настроены.
Первая сборка и запуск. Откройте файл `composeApp/src/desktopMain/kotlin/main.kt`. Вы увидите простой пример "Hello, World!". Нажмите зеленую стрелку напротив функции `main()` или запустите задачу Gradle `run`. Если все настроено правильно, откроется окно настольного приложения с приветствием. Поздравляем, ваше первое кроссплатформенное приложение работает!

Интеграция с микросервисами: создание API-клиента. Сила подхода раскрывается при подключении к бэкенду. В модуле `commonMain` создайте пакет `api` и добавьте зависимость на HTTP-клиент. Рекомендуется использовать `ktor-client`, который также поддерживает мультиплатформенность. Добавьте в `composeApp/build.gradle.kts` в блок `commonMain.dependencies` строку:
`implementation("io.ktor:ktor-client-core:$ktor_version")`
`implementation("io.ktor:ktor-client-content-negotiation:$ktor_version")`
`implementation("io.ktor:ktor-serialization-kotlinx-json:$ktor_version")`

Затем создайте класс-клиент для взаимодействия с вашим микросервисом. Например, для сервиса управления пользователями:
```kotlin
// В commonMain
import io.ktor.client.*
import io.ktor.client.call.*
import io.ktor.client.plugins.contentnegotiation.*
import io.ktor.client.request.*
import io.ktor.serialization.kotlinx.json.*
import kotlinx.serialization.json.Json

class UserApiClient(private val baseUrl: String) {
 private val client = HttpClient {
 install(ContentNegotiation) {
 json(Json { ignoreUnknownKeys = true })
 }
 }

 suspend fun getAllUsers(): List = client.get("$baseUrl/api/users").body()
}
```
Модель данных `User` должна быть определена в `commonMain` с использованием `kotlinx.serialization`.

Построение UI для отображения данных. Теперь в том же модуле `commonMain` создайте composable-функцию для отображения списка пользователей. Compose использует реактивную модель состояния.
```kotlin
import androidx.compose.runtime.*
import kotlinx.coroutines.launch

@Composable
fun UserListScreen(apiClient: UserApiClient) {
 var users by remember { mutableStateOf(emptyList()) }
 val coroutineScope = rememberCoroutineScope()

 LaunchedEffect(Unit) {
 coroutineScope.launch {
 users = apiClient.getAllUsers()
 }
 }

 LazyColumn {
 items(users) { user ->
 Text(text = "${user.name} - ${user.email}")
 Divider()
 }
 }
}
```
Эту функцию можно будет использовать и в десктопном, и в веб-приложении. В `desktopMain` измените вызов `App()` для отображения этого экрана.

Сборка под разные платформы. Для сборки исполняемого JAR для десктопа выполните задачу Gradle `packageDistributionForCurrentOS`. Для создания веб-приложения — `jsBrowserDistribution`. Результат будет в папках `composeApp/build/compose/binaries` и `composeApp/build/distributions` соответственно. Веб-сборку можно задеплоить на любой статический хостинг (GitHub Pages, Netlify).

Архитектурные советы для микросервисных панелей. Создавайте feature-модули для каждой панели (например, `user-management-ui`, `logging-viewer-ui`), которые зависят от общего `ui-components` модуля. Используйте библиотеку `Decompose` или `Voyager` для навигации в мультиплатформенном стиле. Для управления состоянием на уровне приложения рассмотрите `MVIKotlin` или простой `ViewModel` из `kotlinx-coroutines`.

Заключение. Установка Compose Multiplatform — быстрый и понятный процесс, открывающий путь к созданию согласованных, производительных и легко поддерживаемых интерфейсов для управления распределенными системами. Объединив силу Kotlin, декларативный подход Compose и гибкость микросервисной архитектуры, вы сможете значительно ускорить разработку внутренних инструментов, обеспечив при этом нативный пользовательский опыт на всех платформах.
140 2

Комментарии (6)

avatar
8a2qcd9498 31.03.2026
Очень актуально. Сейчас как раз дробим монолит на бэкенде, а фронт отстаёт. Compose Multiplatform выглядит логичным следующим шагом.
avatar
hzeqe2stwdo 31.03.2026
Ждём стабильности Wasm-таргета для веба. Пока что для продакшена, особенно под мобильные браузеры, рановато.
avatar
p65uinxr 01.04.2026
Отличная статья! Как раз оцениваю Compose для внутреннего админ-панели. Единая кодовая база для десктопа и веба звучит как спасение.
avatar
56mvl3gp 02.04.2026
Kotlin везде — это мечта. Один язык и для бэкенд-сервисов, и для UI. Уменьшает контекстное переключение в команде.
avatar
nfjkxzxacbk 02.04.2026
Интересно, а насколько производительно это работает в вебе по сравнению с React? Для сложных дашбордов есть сомнения.
avatar
oz51tbskkx 02.04.2026
А есть ли реальные кейсы использования в продакшене для десктопных приложений? Хотелось бы увидеть больше примеров, а не туториалов.
Вы просмотрели все комментарии