Compose Broadcast

Монолит: не пережиток, а рабочая лошадка 🐎 Пока в твиттере спорят про микросервисы, в проде по‑прежнему крутятся монолиты — там, где важны: 🔵 быстрый онбординг и разработка 🔵 прозрачная бизнес‑логика 🔵 предсказуемое сопровождение и отладка На открытом уроке OTUS разберём на практике: 👉 разработку монолитного приложения на Spring + Kotlin 👉 плюсы и минусы монолитной архитектуры 👉 как связать транспортные модели и собрать приложение 👉 как упаковать сервис в Docker и подготовить к запуску 💡 Урок для backend‑разработчиков, которые хотят уверенно чувствовать себя в Spring и собирать production‑готовые сервисы. 🗓 4 февраля, 19:00 МСК ✅ Регистрация открыта Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

⚙️ Landscapist - новая библиотека для загрузки изображений в Compose Multiplatform Landscapist — это модульная библиотека для загрузки изображений, построенная специально для Compose. В отличие от монолитных решений, она предлагает гибкую архитектуру с поддержкой различных движков загрузки: Glide, Coil и Fresco. Ключевые фичи: 👉 Compose Multiplatform из коробки. Библиотека изначально проектировалась для работы на Android, iOS, Desktop и Web. Один API для всех платформ. 👉 Модульная архитектура. Вы подключаете только то, что нужно. Core-модуль весит минимум, а специфичные функции (placeholder, эффекты, анимации) добавляются отдельными зависимостями. 👉 Декларативные модификаторы. Все возможности библиотеки доступны через Compose-модификаторы, что делает код чище и понятнее. 👉 Продвинутая обработка состояний. Встроенная поддержка loading, success, failure с возможностью кастомизации под каждое состояние. 👉 Эффекты и анимации. Circular Reveal, crossfade, shimmer-эффект — всё это доступно out-of-the-box. 👉 Palette API. Автоматическое извлечение цветовой палитры из изображения для создания адаптивного UI.

suspend fun loadImage(url: String) {
    val request = ImageRequest.builder()
        .model(url)
        .size(width = 800, height = 600)
        .build()

    landscapist.load(request).collect { result ->
        when (result) {
            is ImageResult.Loading -> {
                println("Loading...")
            }
            is ImageResult.Success -> {
                val imageBitmap = result.data
                val dataSource = result.dataSource // MEMORY, DISK, or NETWORK
                println("Loaded from: $dataSource")
            }
            is ImageResult.Failure -> {
                val error = result.reason
                println("Error: ${error.message}")
            }
        }
    }
}

🐱 Исходный код 📃 Документация #Compose

🔥 Compose Hot Reload 1.0.0 — стабильный релиз! JetBrains выпустили стабильную версию Compose Hot Reload, и это действительно круто! Теперь когда меняете код Compose UI → жмете Cmd+S/Ctrl+S → изменения мгновенно применяются в запущенном приложении. Без перезапуска. Без потери state. Можно добавлять/удалять функции, классы, параметры — практически любые изменения кода работают. ✅ Стабильная версия 1.0.0 — больше не beta ✅ Отдельный плагин НЕ нужен — встроен в Compose Multiplatform 1.10+, работает из коробки (zero configuration) ⚠️ Работает только на JVM Desktop — и вот почему это важно понять: Почему только JVM Desktop? Hot Reload требует JetBrains Runtime с DCEVM (Dynamic Code Evolution VM). Обычная JVM умеет перезагружать только тела методов. DCEVM может делать произвольные изменения кода — добавлять поля в классы, менять иерархию, интерфейсы и т.д. Android и iOS не могут использовать JetBrains Runtime с DCEVM. Поэтому Hot Reload технически невозможен на этих платформах. 💡 Зачем это мобильным разработчикам? Еще один повод добавить Desktop таргет в ваш KMP проект! Даже если вы не планируете запускать Desktop версию в прод - это мощный инструмент для разработки: 👉 Быстро итерируете UI на Desktop с Hot Reload 👉 Проверяете изменения 👉 Переносите на Android/iOS Скорость итераций UI вырастает в разы. Вместо "изменил → собрал → запустил → дождался" получается "изменил → Cmd+S → увидел результат". Короче: если делаете Compose Multiplatform — попробуйте обязательно. Desktop таргет окупится только ради Hot Reload. 🔗 Подробности в блоге JetBrains и в документации #Compose #KMP #Desktop #JVM #CMP

⚙️ Landscapist: новая библиотека для загрузки изображений в Compose Multiplatform Landscapist — это модульная библиотека для загрузки изображений, построенная специально для Compose. В отличие от монолитных решений, она предлагает гибкую архитектуру с поддержкой различных движков загрузки: Glide, Coil и Fresco. Ключевые фичи 👉 Compose Multiplatform из коробки. Библиотека изначально проектировалась для работы на Android, iOS, Desktop и Web. Один API для всех платформ. 👉 Модульная архитектура. Вы подключаете только то, что нужно. Core-модуль весит минимум, а специфичные функции (placeholder, эффекты, анимации) добавляются отдельными зависимостями. 👉 Декларативные модификаторы. Все возможности библиотеки доступны через Compose-модификаторы, что делает код чище и понятнее. 👉 Продвинутая обработка состояний. Встроенная поддержка loading, success, failure с возможностью кастомизации под каждое состояние. 👉 Эффекты и анимации. Circular Reveal, crossfade, shimmer-эффект — всё это доступно out-of-the-box. 👉 Palette API. Автоматическое извлечение цветовой палитры из изображения для создания адаптивного UI.

suspend fun loadImage(url: String) {
    val request = ImageRequest.builder()
        .model(url)
        .size(width = 800, height = 600)
        .build()

    landscapist.load(request).collect { result ->
        when (result) {
            is ImageResult.Loading -> {
                println("Loading...")
            }
            is ImageResult.Success -> {
                val imageBitmap = result.data
                val dataSource = result.dataSource // MEMORY, DISK, or NETWORK
                println("Loaded from: $dataSource")
            }
            is ImageResult.Failure -> {
                val error = result.reason
                println("Error: ${error.message}")
            }
        }
    }
}

🐱 #Compose

🚀 ИИ в коде: ускорение или минное поле? ИИ уже пишет код, генерирует архитектуру и «подсказывает» решения. Но именно вы решаете, станет он вашим бустером или источником техдолга. 📅 28 января в 19:00 мск OTUS проводит открытый урок «Вайбкодинг: практика разработки (Kotlin) проекта при участии ИИ» На вебинаре вы: 💡 увидите, как ИИ влияет на код и архитектуру ⚙️ сравните подходы к взаимодействию с ИИ 🧠 разберётесь, почему неумелое использование ломает проекты 🧭 научитесь ставить задачи так, чтобы разработчик оставался архитектором, а не оператором подсказок Встречаемся перед стартом курса «Kotlin Backend Developer. Professional». 👉 Зарегистрируйтесь и встроите ИИ в разработку осознанно. Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

⚙️ Кастомизируемый жест прокрутки (Fling) для списков в Compose. Исходники на 🐱 GitHub #Compose

Пример использования FlexBoxLayout в Compose

// По умолчанию FlexBox работает как Row (FlexDirection.Row).
FlexBox(
    modifier = Modifier.fillMaxWidth(),
    config = {
        direction =
            if (constraints.maxWidth < 400.dp.roundToPx()) FlexDirection.Column
            else FlexDirection.Row
    },
) {
    // Этот элемент имеет фиксированный размер и не участвует в распределении свободного пространства.
    Box(
        modifier = Modifier.size(80.dp).background(Color.Magenta),
        contentAlignment = Alignment.Center,
    ) {
        Text("Fixed")
    }

    // Этот элемент имеет коэффициент grow = 1 и займет 1/3 оставшегося пространства.
    Box(
        modifier = Modifier
            .height(80.dp)
            .flex { grow = 1f }
            .background(Color.Yellow),
        contentAlignment = Alignment.Center,
    ) {
        Text("Grow = 1")
    }

    // Этот элемент имеет коэффициент grow = 2 и займет 2/3 оставшегося пространства.
    Box(
        modifier = Modifier
            .height(80.dp)
            .flex { grow = 2f }
            .background(Color.Green),
        contentAlignment = Alignment.Center,
    ) {
        Text("Grow = 2")
    }
}

#Compose

⚙️ В Compose появится FlexBoxLayout - аналог подобного из CSS и уже есть подобная реализация на View (🐱 исходники на GitHub) 🔗 Pull Request в AOSP #Compose

⚙️ Вышел Jetpack Compose 1.10.1 Обновляйте зависимости или сразу всё через BOM файл:

dependencies {
  implementation(
    platform("androidx.compose:compose-bom-beta:2026.01.00")
  )
}

#compose #android

⚙️ Compose Multiplatform 1.10.0 — крупнейший релиз года! Привет! Вышла стабильная версия Compose Multiplatform 1.10.0 с революционными изменениями для кроссплатформенной разработки. Давайте разберём главные фичи, которые изменят ваш подход к KMP. 🔥 Главная фишки релиз - Preview аннотация теперь работает в коде из commonMain — наконец-то!

// Работает в commonMain!
@Preview
@Composable
fun MyComponentPreview() {
    MyTheme {
        MyComponent()
    }
}

МИГРАЦИЯ! Депрекейт org.jetbrains.compose.ui.tooling.preview.Preview → переходите на androidx.compose.ui.tooling.preview.Preview 👉 Compose Hot Reload встроен в Compose плагин и подключать отдельно больше не нужно ⚙️ Базовая поддержка библиотеки navigation3 и публикация adaptive-navigation3 🍏 iOS: Поддержка Liquid Glass и полная поддержка *WindowInsets** ⚙️ Улучшили производительность Compose Desktop ⚠️ Breaking Changes & Миграция Требования к версиям Kotlin - Kotlin 2.1.20+ (обязательно из-за Hot Reload) - Kotlin 2.2+ для native и web платформ Депрекейт dependency aliases в Gradle plugin → используйте координаты артефактов из Maven

// build.gradle.kts
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation(compose.ui)
            // Заменяем на
            implementation("org.jetbrains.compose.ui:ui:1.10.0")
        }
    }
}

Кто уже обновился? Какие впечатления от Preview в commonMain? Делитесь в комментариях! #compose #gradle #kmp #android #ios #desktop

🎄 Итоги года для @compose_broadcast Классный год для Compose. Ключевыми событиями отмечу выход Stable Compose for iOS, а также Compose 1.10, который наконец-то смог сравняться в производительности UI под Android на View в релизных сборках со всеми оптимизация. Канал уходит на новогодние каникулы. Встретимся с вами в 2026 в @compose_broadcast и других каналах broadcast 💬 Чем для вас отметился 2025 и что ждёте в будущем году?

Конец года, и снова заканчиваются все подписки 😱 Узнали? Согласны? Не беда — мы как раз разыгрываем промокоды на год от Облака Mail и VK Музыки! Условия участия простые: 🔹 подпишитесь на наш канал @mobilehubvk 🔹нажмите кнопку «Участвовать» 🔹 дождитесь 30 декабря — в этом посте мы выберем случайным образом 6 победителей Информацию об организаторе, правилах и призах ищите по ссылке. Удачи!

🛠 Riflesso - плагин для IDEA с показом областей кода, где происходит рекомпозиция в реальном времени. Поддерживается Android и Desktop таргеты 📃 Подробнее про реализацию плагина автор рассказал в статье (RU,30м) #Compose #IDEA #AndroidStudio #Android #Desktop

⚙️ Пример настройки скриншот тестирования для Compose UI с помощью Roborazzi Я всегда скептически относился к Pixel Perfect тестированию UI, коим и являются Screenshot тесты: сложно, масштабируется так себе, да еще и настраиваешься тольк под определенные экраны. Что вы думаете про Pixel Perfect тесты ? #Compose #Тестирование

🤔 Что стоит за приложениями VK, которые работают на миллионах устройств? В канале Mobile VK Hub инженеры раскрывают детали: от оптимизации и архитектуры до экспериментов с кросс-платформенной разработкой и новых подходов в индустрии. 👉 Если хочешь расти как мобильный разработчик, заходи, тут об этом говорят честно. Реклама. ООО "ВК" ИНН 7743001840

⚙️ Modifier.clip() — изменение формы Composable Когда нужен скруглённый угол, закруглённая аватарка или обрезка по кастомной форме — используйте clip(). Это не просто визуальный эффект: clip обрезает и содержимое, и границы, и все клики внутри.

// Скруглённые углы
Box(
  modifier = Modifier
    .size(100.dp)
    .clip(RoundedCornerShape(8.dp))
    .background(Color.Blue)
)

// Круглая аватарка
Image(
  painter = painterResource(id = R.drawable.avatar),
  contentDescription = null,
  modifier = Modifier
    .size(64.dp)
    .clip(CircleShape)
)

Вы можете использовать не только стандартные Shape, но и реализовать свою форму:

// Звёздочка
val starShape = object : Shape {
  override fun createOutline(
    size: Size,
    layoutDirection: LayoutDirection,
    density: Density
  ): Outline {
    return Outline.Generic(Path().apply {
      // рисуешь путь звёздочки
    })
  }
}

Box(
  modifier = Modifier
    .size(100.dp)
    .clip(starShape)
    .background(Color.Yellow)
)

Если в LazyColumn много элементов с clip — это не критично для производительности, но помни: 👉 clip() работает на GPU (относительно дёшево) 👉 Если в clip используется сложная форма (кастомный Path) — может работать медленнее 👉 Для списков с большим количеством элементов профилируй через Compose Layout Inspector #Compose

🤖 Списки в Compose — источник и силы, и проблем. Именно они чаще всего начинают тормозить, расходовать ресурсы и портить UX. Готовы управлять их производительностью так же уверенно, как архитектурой? 📖 На открытом уроке разберём подкапотную механику: 🔵как работает список в Compose; 🔵что делает LazyColumn; 🔵зачем нужен key; 🔵почему одни реализации плавные, а другие — нет. Вы увидите подход, который используют опытные Android-разработчики в продакшене. ❗️ Это шанс понять оптимизацию UI не по шаблонам, а на уровне механики. Если вы уже пишете на Compose — урок поможет выйти на профессиональный уровень, где производительность становится преимуществом. 🗓 18 декабря в 20:00 МСК. Открытый урок перед стартом курса «Android Developer. Professional». 🚀 Регистрация уже доступна. Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

⚙️ Создание кастомного Toolbar в Jetpack Compose: от проблемы к решению Разработчик из ПСБ поделился опытом создания кастомного Toolbar в Compose. Основная задача — правильное центрирование заголовка и подзаголовка при динамическом контенте слева и справа (иконки, текст переменной длины). Решения "в лоб" не сработали: - Row с Weight приводит к лишним рекомпозициям - Ручной расчет ширины текста — непредсказуемо и сложно - Проблема в разных фазах измерения Compose Решением стал кастомный Layout. Вместо стандартных компоновок используется Layout, который измеряет все элементы за один проход. #Compose #Android #UI

Маленький экран — серьёзный вызов! 🚀 В VK мобильные разработчики создают опыт, который помещается в карман, но работает на миллионах устройств. Узнайте об их подходах к сложным задачам и ключевых результатах. 👉 По ссылке — ролики и даже вакансии! #реклама

⚙️ Доступен первый RC Compose Multiplatform 1.10.0 с фиксами багов и улучшениями #compose