Встречайте Compose Multiplatform 1.0!

Oksana Mandryka

Вышел Compose Multiplatform 1.0!

JetBrains выпустил Compose Multiplatform v1.0! Теперь этот декларативный фреймворк для разработки интерфейсов на Kotlin полностью готов к использованию в реальных проектах! Мы хотим рассказать о самых важных новых возможностях и надеемся, что они вас порадуют:

• Compose for Desktop позволяет быстро и эффективно создавать на Kotlin десктопные приложения с красивым пользовательским интерфейсом.
• С Compose for Web можно создавать полнофункциональные динамические веб-интерфейсы, используя стабильный API DOM c поддержкой всех браузерных API. Поддержка виджетов Material UI появится в следующей версии.
• В целом использовать общий код при работе на разных платформах (в том числе на Android благодаря совместимости с Jetpack Compose by Google) стало намного легче.

Теперь поговорим обо всем этом подробнее.

Перейти на сайт

Compose for Desktop

До последнего времени при создании пользовательского интерфейса для десктопных приложений на Kotlin приходилось использовать традиционные Java-фреймворки. Библиотек на Kotlin, позволявших создавать современный UI для десктопов, не существовало. С выходом Compose Multiplatform ситуация изменилась. Давайте посмотрим, как этот фреймворк расширяет возможности создания интерфейсов для приложений на Kotlin.

Декларативный подход к созданию пользовательских интерфейсов

Compose Multiplatform — декларативный фреймворк, то есть ваш код отражает структуру интерфейса вашего приложения. Вам больше не нужно думать о копировании данных из модели в представление или о разработке логики обновления интерфейса. Обо всем этом позаботится фреймворк, так что разработка интерфейсов теперь — сплошное удовольствие. В этом примере содержимое метки Text будет обновлено при изменении содержимого TextField без какого-либо дополнительного кода:

 
var text by remember { mutableStateOf("Hello, World!") } 
Column {
	Text(text) //text label 
	TextField(text, {text = it}) //text field
} 

Начать работу с Compose Multiplatform очень легко, особенно если вы уже работали с декларативными фреймворками для интерфейсов, например React или Jetpack Compose от Google. Compose Multiplatform во многом основан на тех же принципах, так что вам все должно быть знакомо.

Высокая производительность или аппаратное ускорение

Современный UI предъявляет высокие требования к производительности, поэтому мы предпринимаем много усилий, чтобы оптимизировать скорость работы Compose Multiplatform. Фреймворк использует Skia — отлично оптимизированную графическую библиотеку, которую используют многие чувствительные к производительности приложения, в том числе современные браузеры. Благодаря этому Compose Multiplatform поддерживает все основные механизмы аппаратного ускорения на десктопах, такие как DirectX, Metal и OpenGL. В средах, где аппаратное ускорение недоступно, Compose использует оптимизированный программный рендеринг.

Сокращение циклов разработки UI с инструментом предпросмотра

Одна из задач, отнимающих больше всего времени при разработке интерфейсов, — пересборка приложения на этапе финализации внешнего вида. Плагин Compose Multiplatform для IDEA упрощает этот процесс: встроенная функция предпросмотра позволяет донастроить визуальные элементы в несколько приемов без пересборки и перезапуска приложения. Это значительно сокращает циклы разработки UI.

Подготовка дистрибутивов десктопных приложений

Чтобы доставить приложение пользователям, его нужно не только разработать, но и правильно упаковать. В этом также поможет Compose Multiplatform: плагин для Gradle поддерживает упаковку приложений в форматы msi, dmg и deb, в том числе подписывание и подтверждение подлинности для MacOS.

Совместимость с Jetpack Compose для Android и Java UI-фреймворками

Jetpack Compose — современный фреймворк от Google для создания нативных интерфейсов Android-приложений — продолжает набирать популярность среди разработчиков мобильных приложений. Если вы уже работали с ним, Compose Multiplatform покажется вам очень знакомым, поскольку API этих двух фреймворков во многом повторяют друг друга.

Если вы работаете над десктопными приложениями, у которых уже есть пользовательский интерфейс, созданный с помощью традиционных Java-фреймворков, вам не придется полностью переписывать код, чтобы начать использовать Compose Multiplatform. Мы обеспечиваем высокий уровень совместимости: вы можете просто добавить компоненты, созданные с помощью Compose, в интерфейс на Java. А существующие компоненты, написанные на Java, можно добавить в любое новое приложение, создаваемое с помощью Compose Multiplatform.

Начало работы с Compose Multiplatform

Начать работу с Compose Multiplatform очень просто. В IntelliJ IDEA 2021.1+ можно всего за несколько кликов создать простой проект Compose Multiplatform, используя мастер создания приложений из плагина Kotlin.

Также мы подготовили обучающие материалы по работе с десктопными приложениями в Compose Multiplatform.

Compose for Web

Помимо десктопной версии Compose Multiplatform предлагает мощный декларативный Kotlin/JS API для работы с DOM.

В нем есть все необходимые функции современного веб-фреймворка, включая комплексный API для работы с DOM, встроенную поддержку CSS-in-JS, поддержку SVG, типизированные интерфейсы для ввода данных и т. д. Код для веб-интерфейса в Compose Multiplatform пишется на чистом Kotlin, то есть разработчик может пользоваться всеми возможностями системы типов и идиом этого языка, придерживаясь того же рабочего процесса, что и для других целевых платформ на Kotlin.

Мультиплатформенная поддержка

Compose Multiplatform позволяет разрабатывать не только десктопные и web-приложения, для которых есть встроенная поддержка. Прозрачная интеграция с фреймворком Jetpack Compose от Google позволяет разрабатывать также и Android-приложения. Эти два фреймворка используют общие API и ядро, поэтому они полностью совместимы. Благодаря этому вам не придется переписывать общий код управления интерфейсом и состояниями: достаточно сделать это один раз, а потом использовать его на всех нужных платформах.

Если у вас уже есть приложение для Android, которое нужно портировать на десктоп или веб-платформу, Compose Multiplatform поможет сделать это с минимальными усилиями. Фреймворк позволяет управлять всеми целевыми платформами приложения из одного проекта Kotlin.

Чтобы быстро перейти к разработке мультиплатформенного приложения в Compose, можно использовать мастер создания проектов Kotlin в IntelliJ IDEA 2021.1+.

Даже если сейчас вам не нужно разрабатывать мультиплатформенное приложение, ваши знания и опыт работы с одной платформой, пригодятся и на других.

Изменения по сравнению с бета-версией

Готовя к выпуску Compose Multiplatform 1.0, мы уделяли основное внимание тому, чтобы фреймворк можно было эффективно использовать для рабочих приложений. Поэтому фокус был на обеспечении стабильной работы и устранении критических проблем.

Промышленное использование

Хотя официальная версия Compose Multiplatform вышла только сейчас, фреймворк уже используют некоторые работающие приложения. Например, JetBrains использует Compose Multiplatform в JetBrains Toolbox App с начала 2021 года. Этим приложением для управления IDE JetBrains ежемесячно пользуются более 1 000 000 пользователей. 4 месяца назад оно было полностью портировано с C++ и Electron на Compose Multiplatform.

Подводя итог

С выходом Compose Multiplatform разработчики на Kotlin получают эффективный фреймворк, позволяющий создавать красивые интерфейсы для десктопных и веб-приложений.

Предлагаем вам попробовать Compose Multiplatform. Самый простой способ начать работу — посмотреть наши уроки. Мастер создания проектов на Kotlin, встроенный в IntelliJ IDEA 2021.1+, позволит легко создать первый проект Compose Multiplatform с декларативным пользовательским интерфейсом на Kotlin.

Надеемся, вам понравится!

Ваша команда Kotlin
The Drive to Develop

Автор оригинальной статьи:

Compose Multiplatform 1.0 Is Going Live!

Sebastian Aigner

Compose Multiplatform by JetBrains, the declarative UI framework for Kotlin, has reached version 1.0, which makes it ready for production use! Here are a few highlights that we hope will make you as excited about the release of this framework as we are:

• On desktop, you can now create Kotlin apps with beautiful user interfaces quickly and efficiently.
• On the web, you can now build production-quality dynamic web experiences using Compose for Web’s stable DOM API with full interoperability with all browser APIs. Support for Material UI widgets will be available in a future release.
• Overall, sharing expertise and code between various platforms (including Android, using compatibility with Jetpack Compose by Google) is much easier now.

Let’s go over them one by one.

Visit the website

Kotlin UI for Desktop

For quite some time, if you wanted to build a user interface for your Kotlin desktop application, you had to use traditional Java UI frameworks as there haven’t been any Kotlin libraries that embraced a modern UI development style for the desktop. We’re changing this by offering Compose Multiplatform. Let’s explore how this framework improves the experience of writing UIs for Kotlin apps.

A declarative approach to building user interfaces

Compose Multiplatform is declarative, so your code reflects the UI structure of your app and you don’t need to worry about things like copying data from model to view or developing UI refreshing logic. Since the framework takes care of all of that for you, developing UIs is truly a pleasure. In this example, the content of the Text label will be updated once content of the TextField is edited without any additional code:

var text by remember { mutableStateOf("Hello, World!") }
Column {
   Text(text) //text label
   TextField(text, {text = it}) //text field
}

It’s easy to get started with Compose Multiplatform, especially if you’ve used a declarative UI framework like React or Jetpack Compose by Google before. Compose Multiplatform uses many of the same concepts, so you should feel right at home.

Great runtime performance via hardware acceleration

Modern user interfaces are performance-sensitive and we go to great lengths to improve the speed of Compose Multiplatform. It uses Skia, a well-optimized graphics library that is used by many performance-sensitive applications, including modern browsers. This means Compose Multiplatform supports all major hardware acceleration engines on the Desktop, such as DirectX, Metal, and OpenGL. For environments where hardware acceleration is not available, Compose comes with an optimized software renderer.

Short iteration cycles via the Preview Tool

One of the most time-consuming tasks in UI development is rebuilding an application in an attempt to make it look perfect. The Compose Multiplatform IDEA plugin streamlines this process. Its builtin live preview feature allows you to fine-tune your components/parts of the UI, and create multiple iterations of them without having to rebuild or restart the application. This shortens the development cycle significantly.

Confidently delivering desktop apps with automatic application packaging

Bringing an application to its users requires not only proper development, but proper packaging too. This is another area where Compose Multiplatform provides assistance. Its Gradle plugin supports application packaging to the msi, dmg and deb formats, including signing and notarization for MacOS.

Interoperability with Jetpack Compose on Android and Java UI frameworks

Jetpack Compose, Android’s modern toolkit for building native UIs created by Google, is continually gaining popularity among mobile developers. If you’ve used it before, it will be extremely easy for you to use Compose Multiplatform, as these two frameworks share a large part of their APIs.

If you’re working on Desktop applications that already have a user interface built with typical Java UI frameworks, you don’t need to rewrite your code from scratch to make it work with Compose Multiplatform. We provide excellent interoperability, meaning you can add UI components written with Compose to your existing Java UI. You can also add your existing Java controls to any new app you build with Compose Multiplatform.

Get up and running quickly with the Compose Multiplatform wizards

Getting started with Compose Multiplatform is easier than ever. In IntelliJ IDEA 2021.1+, you can create a simple Compose Multiplatform project in just a few clicks.

We also have a wide variety of tutorials to help you get acquainted with the desktop target for Compose Multiplatform.

Compose for Web

Beyond the Desktop, Compose Multiplatform gives you a powerful, declarative Kotlin/JS API for working with the DOM.

It has all the features you want and need in a modern web framework, including a comprehensive DOM API, built-in CSS-in-JS support, support for SVGs, typed inputs, and many others. The web target for Compose Multiplatform is written in pure Kotlin and takes full advantage of the type system and idioms the language has to offer. This allows you to use the same development workflow you may already be used to from other Kotlin targets.

Multiplatform support

Using Compose Multiplatform, you’re not limited to targeting Desktop and Web Platforms (which are supported directly). You can also target Android using the well-known UI Framework Jetpack Compose, developed by Google. These two frameworks share common APIs and Core, giving them perfect interoperability. This means you don’t have to re-write common UI and state management code. Just write it once and then reuse it on as many platforms as necessary.

If you have an existing Android application that you want to bring to the desktop or web, Compose Multiplatform helps you do so with minimal effort. It allows you to manage all the targets of your application from a single Kotlin project.

To quickly get started with building an app that targets multiple platforms with Compose, you can use the Kotlin Project Wizard in IntelliJ IDEA 2021.1+.

And even if you don’t need to develop a multiplatform application right now, your knowledge and expertise from one platform will be really helpful on another.

What has changed since beta?

For Compose Multiplatform 1.0, we focused entirely on making sure that the framework is truly ready for use in your production application. As a result, this release primarily addresses quality and stability while fixing critical issues and bugs.

Real production experience

Even though Compose Multiplatform hasn’t gone live until today, there are some production applications that already use it. For example, at JetBrains we started adopting Compose Multiplatform in the JetBrains Toolbox App (https://www.jetbrains.com/toolbox-app/) as far back as early 2021. This management application for JetBrains IDEs is used by more than 1,000,000 monthly active users and was fully migrated from C++ and Electron to Compose Multiplatform 4 months ago.

Wrapping up

With Compose Multiplatform, Kotlin developers now have a powerful framework to create beautiful UIs for both desktop and web applications.

Now is the perfect time to give Compose Multiplatform a try! The easiest way to get started is to take a look at the official tutorials. Using the Kotlin Project Wizard that’s built into IntelliJ IDEA 2021.1+, you can create your first Compose Multiplatform project and start building declarative user interfaces with Kotlin.

We hope you enjoy it!

Compose Multiplatform 1.0 即将上线！

Sue

JetBrains 的 Kotlin 声明式 UI 框架 Compose Multiplatform 已更新至 1.0 版，可供生产使用！ 我们将介绍一些亮点，希望您能和我们一样期待框架的发布：

• 在桌面上，您可以快速高效地创建具有精美用户界面的 Kotlin 应用。
• 在 Web 上，您可以使用 Compose for Web 的稳定 DOM API 构建生产级动态 Web 体验，并实现与所有浏览器 API 的完全互操作。 未来版本将提供对 Material UI 微件的支持。
• 总体而言，现在各平台（包括 Android，使用与 Google 的 Jetpack Compose 的兼容）间的专业知识和代码共享都得到了大幅简化。

接下来我们将逐一介绍这些亮点。

访问网站

桌面版 Kotlin UI

在很长一段时间内，如果您想为 Kotlin 桌面应用程序构建用户界面，您都必须使用传统的 Java UI 框架，因为没有任何 Kotlin 库支持桌面的现代化 UI 开发风格。 这一状况将被 Compose Multiplatform 改变。 我们这就来探索新的框架会如何改善为 Kotlin 应用编写 UI 的体验。

构建用户界面的声明式方法

Compose Multiplatform 为声明式，代码反映了应用的 UI 结构，让您无需担心将数据从模型复制到视图或开发 UI 刷新逻辑之类的事情。 全能高效的框架将让 UI 开发成为一种享受。 在这个示例中，当 TextField 的内容被编辑后，Text 标签的内容将被更新，无需任何额外代码：

var text by remember { mutableStateOf("Hello, World!") }
Column {
   Text(text) //text label
   TextField(text, {text = it}) //text field
}

Compose Multiplatform 入门简单，上手体验类似于 React 或 Google 的 Jetpack Compose 之类的声明式 UI 框架。 Compose Multiplatform 使用了许多相同的概念，应该会让您倍感亲切。

通过硬件加速实现出色的运行时性能

现代化用户界面对性能相当敏感，因此我们花了大量精力来提高 Compose Multiplatform 的速度。 它使用的图形库 Skia 经过了良好优化，已被性能敏感的应用程序广泛采用，包括新型浏览器。 这意味着 Compose Multiplatform 支持桌面上的所有主流硬件加速引擎，例如 DirectX、Metal 和 OpenGL。 对于硬件加速不可用的环境，Compose 也提供了优化的软件渲染程序。

通过预览工具缩短迭代周期

在 UI 开发中，最耗时的任务之一是为了取得完美显示效果而重建应用程序。 Compose Multiplatform IDEA 插件将简化这一过程。 它的内置实时预览功能可供微调 UI 的组件/部件和创建多个迭代，而无需重建或重新启动应用程序。 这将大幅缩短开发周期。

通过自动应用程序打包信心满满地交付桌面应用

将应用程序带给用户，不仅需要妥善的开发，也需要合适的打包。 在这一领域，Compose Multiplatform 也可以发挥作用。 Gradle 插件支持将应用程序打包为 msi、dmg 和 deb 格式，包括 MacOS 的签名和公证。

Android 上 Jetpack Compose 与 Java UI 框架的互操作性

Jetpack Compose 是 Google 为构建原生 UI 打造的 Android 现代化工具包，在移动开发者中越来越受欢迎。 如果您以前使用过它，那么 Compose Multiplatform 对您来说会非常容易上手，因为这两个框架共享了大部分 API。如果桌面应用程序已经具有使用典型 Java UI 框架构建的用户界面，则无需从头重新编写代码即可与 Compose Multiplatform 一起使用。 通过出色的互操作性，您可以将使用 Compose 编写的 UI 组件添加到现有 Java UI 中。 您还可以将现有 Java 控件添加到使用 Compose Multiplatform 构建的任何新应用。

使用 Compose Multiplatform 向导快速上手

Compose Multiplatform 上手过程从未如此简单。 在 IntelliJ IDEA 2021.1 以上版本中，只需几下点击即可创建一个简单的 Compose Multiplatform 项目。

我们还准备了大量教程来帮助您熟悉 Compose Multiplatform 的桌面目标。

Compose for Web

除了桌面之外，Compose Multiplatform 还为处理 DOM 提供了强大的声明式 Kotlin/JS API。

它具有现代化 Web 框架中您想要和需要的所有功能，包括全面的 DOM API、内置 CSS-in-JS 支持、对 SVG 的支持、类型化输入等。 Compose Multiplatform 的 Web 目标以纯 Kotlin 编写，并充分利用了语言的类型系统和习语。 这让您可以使用您在其他 Kotlin 目标中可能已经熟悉的开发工作流。

多平台支持

使用 Compose Multiplatform，您并不会受限于以桌面和 Web 平台（均已直接支持）为目标。 您还可以使用 Google 开发的著名 UI 框架 Jetpack Compose 以 Android 为目标。 这两个框架共享公共 API 与核心，因此具有完美的互操作性。 这意味着您不必重新编写常见 UI 和状态管理代码。 只需编写一次，然后根据需要在各个平台上重用即可。

如果您要将现有 Android 应用程序带到桌面或 Web，Compose Multiplatform 可以帮助您轻松实现。 它允许您从单个 Kotlin 项目管理应用程序的所有目标。

要使用 Compose 快速开始构建面向多个平台的应用，您可以使用 IntelliJ IDEA 2021.1 以上版本中的 Kotlin 项目向导。

即使当前不需要开发多平台应用程序，您在一个平台上的知识和专长在另一个平台上也会发挥作用。

自测试版以来发生了什么变化？

在 Compose Multiplatform 1.0 中，我们最关注的是确保框架可实际用于生产应用程序。 因此，此版本主要解决质量和稳定性问题，同时修正关键问题和错误。

真实生产经验

虽然 Compose Multiplatform 今天才正式上线，但它先前已用于部分生产应用程序。 例如，在 JetBrains，我们早在 2021 年初就开始在 Jetbrains Toolbox App (https://www.jetbrains.com/zh-cn/toolbox-app/) 中采用 Compose Multiplatform。 这个用于 JetBrains IDE 的管理应用程序每月有超过 1,000,000 名活跃用户，在 4 个月前完全从 C++ 和 Electron 迁移到了 Compose Multiplatform。

总结

通过 Compose Multiplatform，Kotlin 开发者能够以强大的框架为桌面和 Web 应用程序创建精美的 UI。

现在是尝试 Compose Multiplatform 的最佳时机！ 最简单的入门方法是查看官方教程。 使用 IntelliJ IDEA 2021.1 以上版本的内置 Kotlin 项目向导，您可以轻松开始创建第一个 Compose Multiplatform 项目并以 Kotlin 构建声明式用户界面。

我们希望您喜欢它！

本文英文原作者：