🔨 Разница между Compose Multiplatform и Jetpack Compose

На сайте JetBrains появилась страница с описанием различий между Compose Multiplatform от JetBrains и Jetpack Compose от Google.

Ключевые различия:
👉 Jetpack Compose фокусируется на Android, и не все компоненты доступны из общего (Kotlin common) кода в Compose Multiplatform.
👉 Compose Multiplatform включает множество платформенно-специфичных API: Desktop, Web, iOS. Эти API недоступны из общего кода.
👉 Некоторые библиотеки для Compose публикуются JetBrains с отдельными пакетами, чтобы добавить поддержку Compose Multiplatform.

Этот момент не упомянут в статье, но важным различием являются инструменты для разработки: для Compose Multiplatform они пока находятся на более ранней стадии и уступают Jetpack Compose.

#compose #cmp

⚙️ Примеры использования Jetpack Navigation3 для Compose Multiplatform от Кости Цховребова (сотрудник JB) появились на GitHub. Репозиторий является форком примеров от Google

Решение использует dev сборки Jetpack Navigation 3 для Compose Multiplatform

#compose #jetpack #navigation3 #cmp #kmp

⚙️ Вышел Compose Multiplatform 1.9.1

Что нового:
👉 Основано на Jetpack Compose 1.9.3
👉 Артефакт compose.material3 теперь основывается на Jetpack Compose Material3 1.4.0, чтобы использовать предыдушую версию, то надо подключать зависимость традиционным образом

// было
implementation(compose.material3)

// заменить для совместимости
implementation("org.jetbrains.compose.material3:material3:1.8.2")

👉 Исправление багов на iOS

#compose #cmp #kmp

🐱 localina - библиотека для Compose Multiplatofrm ресурсов чтобы менять язык во время работы приложения. Есть демо на Compose for Web

@Composable
fun App() {
    LocalinaApp {
        // Добавляете в рут приложения
    }
}

// Пример замены локали
LocaleUpdater.updateLocale(locale = "ru")
LocaleUpdater.updateLocale(locale = Locale.Hindi)

#compose #cmp #opensource

⚙️ Вышел Compose Multiplatform 1.9.2 с исправление багов и обновление на свежие артефакты из Jetpack: Compose 1.9.4, Lifecycle 2.9.4, SavedState 1.3.3, WindowManager 1.4.0 и Material3 1.4.0

#compose #kmp #cmp

⚙️ KMP Wheel Picker - крутелка c выбором в iOS стиле на Compose

// Пример использования
WheelPicker(
    state = state,
    bufferSize = 3,
    window = { ... },
) { index ->
    Text(
        "Item ${index + 1}",
        Modifier.padding(16.dp, 8.dp),
    )
}

#compose #cmp #ios

⚙️ Вышел Compose Multiplatform 1.10.0 Beta 1

Что нового:
🔨 @Preview аннотация работает в Common коде
🚀 Поддержка Jetpack Navigation 3

Compose iOS
❗️ Поддержка WIndowsInsetsRulers - API дял расположения элементов относительно системного UI
👉 Прокачали работу с софт клавиатурой

Compose Desktop:
👉 Compose Hot Reload теперь теперь часть Compose. Больше не нужна отдельная зависимость
👉 SwingPanel теперь автоматически подстраивает свой размер на основе размеров контента в ней

Gradle плагин:
👉 Алиасы для Compose зависимостей в Gradle теперь не рекомендуютя к использованию. Подключаем артефакты как и все другие
👉 Поддержка Android Gradle Plugin 9.0.0

#compose #cmp #gradle #ios #desktop

⚙️ Пререндеринг UI в Lazy списках Compose

В Compose есть возможность настраивать размер кэша для lazy layouts! Можно контролировать, сколько элементов сохранять до и после видимой области.

Что изменилось?
👉 До версии 1.9: Lazy списки компилировали только 1 элемент вперед и сразу удаляли невидимые
👉 С версии 1.9: Можно задать точное количество сохраняемых элементов в dp или % viewport

Зачем это нужно?
✅ Увеличивает плавность прокрутки за счет подготовки контента заранее
✅ Оптимизирует использование pausable composition между кадрами
✅ Позволяет балансировать между памятью и производительностью

Как использовать:

// Кэш в dp
val dpCacheWindow = LazyLayoutCacheWindow(
    ahead = 150.dp,   // 150dp вперед
    behind = 100.dp   // 100dp назад
)

// Или в процентах от viewport
val percentCacheWindow = LazyLayoutCacheWindow(
    ahead = 0.5f,     // 50% viewport вперед
    behind = 0.3f     // 30% viewport назад
)

val state = rememberLazyListState(cacheWindow = dpCacheWindow)

LazyColumn(state = state) {
    // ваш контент
}

Рекомендации:
🎯 Начинайте с 50% viewport и тестируйте производительность
🎯 Для тяжелых элементов используйте больший кэш
🎯 Для легких списков можно уменьшить значения

Особенно полезно для сложных списков с изображениями, анимациями или тяжелой бизнес-логикой!

#Compose #Производительность #cmp

⚙️ Navigation 3 в Compose Multiplatform: новый подход от Google

Google представила Navigation 3 — совершенно новую библиотеку для навигации в Compose, где управление стеком экранов сводится к простым операциям с списком.

Хорошая новость: JetBrains уже адаптировали её для Compose Multiplatform! В статье на реальном примере показывает, как:
👉 Добавить зависимости Navigation 3 в KMP-проект
👉 Определить маршруты через sealed-интерфейсы с @Serializable
👉 Работать с back stack как с обычным mutable list
👉 Создать адаптивные layouts для разных размеров экранов

Особенно полезно будет:
✔️ Разработчикам, которые хотят использовать современный подход Google к навигации в кроссплатформенных проектах
✔️ Тем, кто ищет альтернативу существующим решениям вроде Voyager

В статье — чистый код из commonMain с примерами навигации между экранами и реализацией bottom navigation.

#compose #cmp #kmp

⚙️ Вышла вторая Beta Compose Multiplatform, где самое важное для меня - обновление на свежие версии зависимостей из Android Jetpack

#compose #cmp #kmp #androidjetpack

⚙️ Navigation3 Browser — навигация для Web на основе Jetpack Navigation 3

Появилась реализация навигации под Web-браузер, совместимая с Jetpack Navigation 3 и интегрированная с нативной историей браузера. Автор — Костя Цховребов из JetBrains (KMP-команда).

Теперь Web-приложения на Compose Multiplatform могут работать с привычным поведением браузера: кнопки Back/Forward, корректное управление историей, восстановление состояния и предсказуемая работа нескольких экранов.

Поддерживаются две стратегии навигации:
👉 Chronological - Классическая браузерная модель: линейный переход по посещённым состояниям (Back/Forward).
👉 Hierarchical - Мобильная модель навигации, имитирующая структуру экранов и вложенную иерархию — аналогично Android-приложениям.

🧪 Обе стратегии можно сравнить в онлайн-демо

Пример использования Chronological-навигации

@Composable
fun App() {
    val backStack = remember { mutableStateListOf<Any>(Root) }

    ChronologicalBrowserNavigation(
        backStack = backStack,
        saveKey = { key ->
            when (key) {
                is Root -> buildBrowserHistoryFragment("root")
                is Profile -> buildBrowserHistoryFragment(
                    "profile",
                    mapOf("id" to key.id.toString())
                )
                else -> null
            }
        },
        restoreKey = { fragment ->
            when (getBrowserHistoryFragmentName(fragment)) {
                "root" -> Root
                "profile" -> Profile(
                    getBrowserHistoryFragmentParameters(fragment)
                        .getValue("id")
                        ?.toInt() ?: error("id is required")
                )
                else -> null
            }
        }
    )

    NavDisplay(backStack) { /* ... */ }
}

Navigation3 Browser кажется важным шагом для формирования единой модели навигации в Compose Multiplatform: Android → Desktop → Web.
Это упростит мультиплатформенную архитектуру и сделает перенос логики между платформами гораздо чище.

#Kotlin #Compose #KMP #CMP #WEB #AndroidJetpack #Jetpack