JetBrains has released the Compose Multiplatform version 1.0, which marks the Compose Multiplatform is ripe for use in production environments. For those of you who are not familiar with it, here are 10 popular questions to ask about the latest cross-platform technology.
FAQ:
- Relationship to Jetpack Compose?
- Will it replace Flutter?
- What are the technical advantages? Is 1.0 stabilized?
- Is Android Studio still available?
- What about performance?
- How about ecological construction?
- Should the JVM be introduced in desktop application development?
- Is Web development ready?
- Will iOS be supported in the future?
- Will Jetpack be cross-platform?
Before the text begins, agree on the following terms:
- Compose – JB: short for compose Multiplatform
- Compose – android: Jetpack compose
- Compose -desktop: compose for desktop
- Compose -web: compose for web
1. Relationship with Jetpack Compose?
Jetpack Compose is A new generation of Google’s declarative UI toolkit for Android, which is completely based on Kotlin and is naturally cross-platform. JetBrains builds on Jetpack Compose (comedy-Android) with the subsequent release of comedy-Desktop and comedy-Web, allowing Compose to run on many different platforms.
The Compose Multiplatform is essentially a combination of Compose -desktop, Compose – Web, and Compose – Android. Developers can use the same set of Artifacts in a single project to develop multiple applications on Android, Desktop (Windows, macOS, LInux), and the Web. Most of the code can be shared in the project to achieve cross-platform development.
Therefore, conceptually, compose- JB can be regarded as a superset of compose- Android. In terms of the concrete implementation of compose- JB is to fork the source code of compose- Android and add API to Desktop and Web side. The 1.0 version of compose- JB currently corresponds to compose- Android 1.0-beta02. Therefore, the common API for comema-JB is always the same as that for comema-Android. The only difference is that the package name changes, so you can migrate your comema-Android code to the comema-JB project at a low cost.
| Jetpack Compose (Composing – Android) | Compose Multiplatform (Compose – JB) |
|---|---|
| androidx.compose.runtime:runtime | org.jetbrains.compose.runtime:runtime |
| androidx.compose.ui:ui | org.jetbrains.compose.ui:ui |
| androidx.compose.material:material | org.jetbrains.compose.material:material |
| androidx.compose.fundation:fundation | org.jetbrains.compose.fundation:fundation |
2. Will it replace Flutter?
Comedy-jb is released by JetBrains, but Google, the developer of Flutter, is also happy with its development because both compose and Flutter are cross-platform technologies, but they are not in direct competition because of their different positioning.
Flutter is positioned as a mobile cross-platform solution. All of its capabilities are built around how to better “write once, run anywhere”, with the primary goal of reducing the cost of developing mobile applications (although it has recently expanded to include Desktop and Desktop applications as well).
Compose-jb is primarily positioned as a declarative UI toolkit with the goal of improving UI development efficiency through more advanced development paradigms. Because the idea of declarative development is so adaptable, a cross-platform framework with Kotlin is a natural fit. If Flutter made Dart, Kotlin made Compose. With Kotlin’s growing popularity in recent years, the future of Compose is full of imagination.
The audience for compose is divided into two main groups. First, Android developers familiar with Kotlin and Compose can deliver their products to more platforms. Then there are the Kotlin practitioners, who can develop UI-containing applications more efficiently using a familiar language, such as IDE companies like JetBrains, They were eager to use Compose to replace older Java-based technology stacks such as Swing and AWT, and that’s where comedy-Desktop came from.
3. What are the technical advantages? Is 1.0 stabilized?
Application development focuses on three things: data acquisition, state management, and interface rendering. JetBrains’ Kotlin Multiplatform Mobile (KMM) makes the data acquisition part cross-platform, while comement-JB extends the cross-platform scope further to state management and even interface rendering (based on Skia).
In a compose- JB project, the logic layer (state management) and data layer code can be almost completely shared. At the presentation level, common components and layouts such as Text, Button, Column/Row, etc., can be used across the compose-Android and Compsose-desktop boundaries. In addition, comement-desktop provides specialized capabilities for desktop features such as mouse awareness and window size, Scrollbars, Tooltips, Tray, etc
fun main(a) {
Window {
var windowSize by remember { mutableStateOf(IntSize.Zero) }
var windowLocation byremember { mutableStateOf(IntOffset.Zero) } AppWindowAmbient.current? .apply { events.onResize = { windowSize = it } events.onRelocate = { windowLocation = it } } Text(text ="Location: ${windowLocation}\nSize: ${windowSize}")}}Copy the code
Composement-desktop also provides SwingPanels for embedding existing Swing components. Compose – Desktop is a capable replacement for existing UI frameworks such as AWT and Swing.
Compose – Web provides web developers with A DOM API that implements Composable components for common HTML tags, such as Div, P, A, etc. Attrs method is also provided to set tag attributes in key-value form. Some common attributes also have their own methods. In addition, the CSS-in-JS technology composing – Web allows developers to define Style styles based on DSLS.
fun main(a) {
renderComposable("root") {
var platform by remember { mutableStateOf("a platform") }
P {
Text("Welcome to Compose for $platform! ")
Button(attrs = { onClick { platform = "Web" } }) {
Text("... for what?")
}
}
A("https://www.jetbrains.com/lp/compose-web") {
Text("Learn more!")}}}Copy the code
Compose – Web has structured monetization capabilities like HTML or JSX, as well as responsive state management capabilities and the ability to share logical layer code with Desktop and Android sides in compose- JB.
In terms of stability, the majority of compose-JB’s code comes from Jetpack Compose, and there are already thousands of apps available for Android, which is enough to ensure its stability on Android.
JetBrains migrated the Toolbox application from C++ and Electron to comema-jb a few months ago and has been running smoothly, serving over 1 million monthly users, with routine UI development proven. However, some complex functions may not be stable enough, and there are still many issues to be solved.
4. Is Android Studio still available?
Compose-jb 1.0 can run in versions after IntelliJ IDEA 2021.1, which provides an engineering wizard and a project template to guide developers to quickly create a new compose-JB project.
Developers can also add Composalbe with @Preview to real-time Preview on their Desktop by downloading the Composalbe plugin from the compose-Desktop market.
@ComposableWhile IDE is marked red with errors, IDEA can only detect errors at compile time.
5. How about performance?
Both compose- Android and Compose – Desktop use Skia, an open source graphics library, for rendering. Skia is widely used in Chrome, Flutter, and other projects, and has proven its performance. Skia also supports platform-specific hardware acceleration technologies such as DirectX, Metal, and OpenGL, and comema-JB offers optimized software rendering solutions for devices without hardware acceleration. Comemy-desktop has been actually tested against JavaFX, and the rendering performance of both is generally comparable and slightly inferior to JavaFX in extreme cases, but good enough.
Dev. To/gz_k/jetpac…
The Web side of comage-JB will still compile the code into JS code by Kotlin/JS compiler and run it in the browser, so theoretically there is no difference in performance with traditional Web development method. Since CSS-in-JS implementations generate CSS at runtime, Just at this point there may be a slight performance penalty compared to using CSS front-end projects directly.
In logic code, because Kotlin is used as the development language, the code execution efficiency is significantly better than similar cross-platform frameworks such as Electron based on Node, and Kotlin/JVM also ensures at least the same runtime performance as Java on the desktop side.
6. How about ecological construction?
Comage-jb relies on the rich class library of Kotin Multiplatform to meet capabilities development at various levels. For example, there are many excellent solutions in architecture, network, data storage and other aspects. Some representative projects are as follows:
| Category | Library | Description |
|---|---|---|
| Architecture | Decompose | Kotlin Multiplatform lifecycle-aware business logic components (aka BLoCs) with routing functionality and pluggable UI (Jetpack Compose, SwiftUI, JS React, etc.), inspired by Badoos RIBs fork of the Uber RIBs framework |
| MVIKotlin | Extendable MVI framework for Kotlin Multiplatform with powerful debugging tools (logging and time travel), inspired by Badoo MVICore library | |
| redux-kotlin | Redux implementation for Kotlin (supports multiplatform JVM, native, JS, WASM) | |
| Network | Ktor | Framework for quickly creating connected applications in Kotlin with minimal effort |
| rsocket-kotlin | RSocket Kotlin multi-platform implementation | |
| Storage | sqldelight | SQLDelight – Generates typesafe Kotlin APIs from SQL |
| Kodein-DB | Multiplatform NoSQL database | |
| multiplatform-settings | A Kotlin Multiplatform library for saving simple key-value data | |
| Utils & Others | Reaktive | Kotlin multi-platform implementation of Reactive Extensions |
| koin | A pragmatic lightweight dependency injection framework for Kotlin | |
| kotlinx-datetime | KotlinX multiplatform date/time library | |
| kotlin-logging | Lightweight logging framework for Kotlin. A convenient and performant logging library wrapping slf4j with Kotlin extensions |
More libraries: libs. KMP. Icerock. Dev /
7. Should the JVM be introduced for desktop application development?
Compose-jb needs to support multiple operating systems such as Windows, macOS and Linux on the desktop, so the implementation cost based on Kotlin/Native is high. Therefore, for the time being, compose-desktop still relies on Kotlin/JVM to compile Java bytecode and then publish it to all desktop systems.
Compose-desktop provides a dedicated Gradle plugin that can be used to pack JVMS into various installation packages, such as DMG for Mac, MSI for Windows, Deb for Linnux, etc. The user does not need to install an additional JDK, can use it as a binary out of the box, and minimizes package size by using JLink technology to package only minimal dependencies on Java modules.
$ ./gradlew package
> Task :packageDmg
WARNING: Using incubator modules: jdk.incubator.jpackage
The distribution is written to build/compose/binaries/main/dmg/DesktopApp- 1.0.0.dmg
BUILD SUCCESSFUL in 11s
5 actionable tasks: 3 executed2,up-to-date
Copy the codeCurrently, the adaptation of Kotlin/Native compiler is also in progress. In the future, it is expected that the application execution speed will be further improved by switching to Kotlin/Native for comage-Desktop.
8. Is Web development mature?
The main point of integrating comemage-Web in comemage-JB is to help Kotlin developers expand their application distribution scenarios. If you already have a composing -desktop or composing – Android project, you can quickly publish your product to the Web and share most of the logic.
The declarative DOM API provided by compose- Web is more advanced in the development paradigm than the traditional technology stack of HTML+JS+CSS. This advantage doesn’t exist if you already have experience with front-end frameworks like React. In addition, the construction speed of compose- Web lags behind that of compose-desktop, and some HTML tags and attributes still lack corresponding DSL implementation. Therefore, from the perspective of purely developing a front-end application, if you are not attached to Kolin, More mature frameworks such as React are recommended.
Even from a cross-platform perspective, desktop-Web still has room for improvement. Desktop-web’s API design respects the original HTML development habits, which leads to a significant difference in DSL from compose- Android and compose- Desktop, which is not conducive to the sharing of UI code. The JetBrains team is already working on a DSL that is consistent with the style of other DSLS on both ends, allowing for unified UI drawing using HTML5 Canvas to improve the cross-platform development experience.
9. Will iOS be supported in the future?
The lack of support for iOS is a serious impediment to its growth into a mainstream cross-platform framework, so it’s safe to assume that comage-JB will add support for iOS in the future, and there are signs that JetBrains is already working on it on the side.
An iOS branch has been found in the composement-JB project, and the Skiko library that comement-UI relies on has been added to support iOS, making it theoretically possible to do iOS side rendering. Because iOS does not use Kotlin/JVM, there is a lot of adaptation work in Kotlin/Native compiler and iOS toolchain. After all, KMM itself is still in the alpha stage, and iOS development experience is not ideal. This may be the reason for the delay in the release of compose-ios, but look forward to the future.
Therefore, if your application needs to be published to ios before the emergence of comage-ios, you can use D-KMP architecture recommended by KMM to realize code sharing between logic layer and data layer as a transition solution. At the present stage, swift-UI and other platform languages can be used for UI development. Wait for compose-ios to actually arrive before migrating the UI code.
Github.com/dbaroncelli…
10. Will Jetpack be cross-platform?
Many Android developers are used to using Compose with Android’s Jetpack family of components, so when a Compose – Android project is migrated to Compose – JB, Many people would like to have a KMP version of the Jetpack library available.
The Andorid Jetpack team answered this question at the Android Dev Summit a few days ago, and the answer was that there were no plans.
www.youtube.com/watch?v=Qre…
First of all, some components in Jetpack that rely heavily on the features of the Andorid platform are not suitable for the release of THE KMP version, while some platform-independent components such as Hilt and Room have the foundation of KMP but still start cautiously. The current priority is to ensure its stable use on Android. While there are no current plans, the Jetpack team has stated that they will try to convert some of the Jetpack libraries to KMP in the future, and they are interested in helping developers move projects to KMP at a lower cost.
For developers, if your project has near-term cross-platform needs, avoid relying too much on Jetpack for technology selection and look like KMP’s Library. For example, Flow is preferred over LiveData in the logical layer. SQLDelight can also be considered in place of Room at the data layer.