⚙️ Вышел Jetpack Compose 1.8.0 RC2 с исправлениями ошибок

// Подключайте BOM для обновления до актуальных версиях
implementation("androidx.compose:compose-bom-beta:2025.03.01")

#compose #jetpack #android

‼️ Опубликовали первую сборку Navigation3 для Compose Multiplatfom

Подкючайте артефакт org.jetbrains.androidx.navigation3:navigation3-ui:1.0.0-alpha01 в common код и можете пробовать

Ждем актуализации до свежей альфа версии, а также адаптивные layout и интеграцию с ViewModel

#compose #kmp #naviation #jetpack

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

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

#compose #jetpack #navigation3 #cmp #kmp

⚙️ 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

🔥 Remote Compose — новый взгляд на Server-Driven UI в Jetpack Compose

В AndroidX Jetpack появилась новая экспериментальная библиотека androidx.compose.remote (пока еще даже на dev версия). Она предлагает совершенно другой подход к динамическим интерфейсам и может радикально изменить то, как мы обновляем UI в продакшене, категорически отличающаяся от текущих BDUI/SDUI решений.

Remote Compose позволяет создавать и рендерить интерфейсы Jetpack Compose удалённо, без пересборки и релиза приложения.
UI генерируется на сервере, сериализуется в компактный бинарный документ и воспроизводится на устройстве.

Remote Compose открывает возможности, которые раньше требовали релиза приложения:
⚡️ Мгновенные A/B-тесты — вариации интерфейса меняются на сервере, без обновлений.
🎨 Обновление дизайна в реальном времени — карточки товаров, баннеры, сезонные темы.
📰 Динамические контентные экраны — новости, акции, спецпроекты, которые появляются мгновенно.
🧪 Фичи без мусора — нет необходимости тянуть все варианты экрана в бинарник.

Архитектура Remote Compose состоит из двух частей:

1️⃣ Создание документа

На сервере вы пишете обычные composable-функции — либо используете специальные Remote* элементы (RemoteColumn, RemoteText и др.).

Библиотека перехватывает draw-операции Compose и превращает UI в бинарный документ. Получается самодостаточный «UI-файл», который можно отправить на клиент.

2️⃣ Воспроизведение документа

На устройстве этот документ «проигрывается» плеером:
👉 есть Compose-плеер — для современных приложений;
👉 есть Android View-плеер — для старых архитектур.

Плеер интерпретирует более 90 низкоуровневых операций (рисование, layout, модификаторы, state), обеспечивая реальную нативную отрисовку, без WebView и без компонентов, которые нужно заранее описывать в приложении.

Почему это лучше JSON или WebView
❌ JSON-подход требует схем, ограничивает сложные эффекты, анимации и кастомные компоненты.
❌ WebView — это отдельный процесс, разная визуальная стилистика, тяжёлое потребление памяти и уязвимости

Remote Compose передаёт не структуру компонентов, а реальные команды рисования. Поэтому любое, самое сложное Compose-UI — будет воспроизведено точно так, как вы его задали.

Базовые принципы Remote Compose
👉 Документность — UI становится бинарным документом, который можно кешировать, версионировать, отправлять по сети.
👉 Платформенная независимость — один документ можно рендерить на телефоне, планшете, складном устройстве и даже часах.
👉 Отделение визуального уровня от логики — клиенту не нужно знать о ваших composable-функциях, ViewModel, DI и т.п.
👉 Двусторонняя связь — клики и события возвращаются на клиент, который решает, что делать (навигировать, логировать, изменять состояние).
👉 Поддержка анимаций и выражений — значения могут вычисляться по времени, переменным, условиям.

Для большинства приложений оптимальная модель — гибридная:
📱 основная навигация + критические экраны в “локальном Compose”,
⚙️ динамические зоны — через Remote Compose.

Если Remote Compose будет развиваться так же активно, как Compose в своё время, это может стать стандартом для динамических интерфейсов на Android. Как вам такой поворот с Compose?

Источник тут

#jetpack #android #compose #serverdrivenui #sdui #bdui

⚙️ Пример использования Jetpack Compose Remote

// Пример создания документа на севере
val document = captureRemoteDocument(
    context = context,
    creationDisplayInfo = displayInfo,
    profile = profile
) {
    RemoteColumn(modifier = RemoteModifier.fillMaxSize()) {
        RemoteText("Dynamic Content")
        RemoteButton(onClick = { /* action */ }) {
            RemoteText("Click Me")
        }
    }
}

// Пример воспроизведения документа на клиенте
@Composable
fun DynamicScreen(document: CoreDocument) {
    RemoteDocumentPlayer(
        document = document,
        documentWidth = screenWidth,
        documentHeight = screenHeight,
        modifier = Modifier.fillMaxSize(),
        onNamedAction = { name, value, stateUpdater ->
            // Обработка именнового действия из документа
            when (name) {
                "addToCart" -> cartManager.addItem(value)
                "navigate" -> navController.navigate(value)
                "trackEvent" -> analytics.logEvent(value)
            }
        },
        bitmapLoader = rememberBitmapLoader()  // Для загрузки картинок
    )
}

Источник тут

#jetpack #android #compose #serverdrivenui #sdui #bdui

⚙️ Navigation3 1.1.0 стабилен

Самое интересное из нового: поддержка Shared Elements между экранами. Теперь достаточно обернуть NavDisplay в SharedTransitionLayout и передать scope:

SharedTransitionLayout {
    NavDisplay(
        backStack = backStack,
        sharedTransitionScope = this
    )
}

Второе большое добавление — SceneDecoratorStrategy. Отдельный интерфейс для декорирования сцен общими UI-элементами или для шаринга состояния между ними. Логика декорирования теперь отделена от логики выбора сцены в SceneStrategy.

Type safe metadata DSL через MetadataKey. Больше не нужны строковые ключи — типы значений описаны статически. Готовые NavMetadataKey позволяют задавать анимации переходов прямо в entryProvider:

entry<ScreenC>(
    metadata = metadata {
        put(NavDisplay.TransitionKey) {
            slideInVertically { it } togetherWith fadeOut()
        }
    }
) { ... }

#compose #navigation3 #jetpack