-
Notifications
You must be signed in to change notification settings - Fork 157
update: update the Compose Multiplatform and Jetpack Compose article #343
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,22 +1,46 @@ | ||||||
[//]: # (title: Compose Multiplatform and Jetpack Compose) | ||||||
|
||||||
 | ||||||
|
||||||
<tldr> | ||||||
This article explains the relationship between Compose Multiplatform and Jetpack Compose. | ||||||
It covers shared concepts like composables, state management, and UI components, along with platform-specific features and limitations. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
I think this sentence can be removed to make the tldr shorter without losing any essential information from the article summary. WDYT? |
||||||
You'll learn how the two toolkits align, how libraries are handled across targets, | ||||||
and how to create or adapt your own UI libraries for multiplatform projects. | ||||||
</tldr> | ||||||
|
||||||
Compose Multiplatform is a cross-platform UI toolkit developed by JetBrains. | ||||||
It extends Google's [Jetpack Compose](https://developer.android.com/jetpack/compose) toolkit for Android by supporting additional platforms. | ||||||
It extends Google's [Jetpack Compose](https://developer.android.com/jetpack/compose) toolkit for Android | ||||||
by supporting additional target platforms. | ||||||
|
||||||
Compose Multiplatform makes compose APIs available from [common Kotlin code](https://kotlinlang.org/docs/multiplatform-discover-project.html#common-code), | ||||||
allowing you to write shared compose UI code that can run on Android, iOS, desktop, and web. | ||||||
allowing you to write shared compose UI code that can run on Android, iOS, desktop, and web: | ||||||
|
||||||
| | **Compose Multiplatform** | **Jetpack Compose** | | ||||||
|------------------|----------------------------|---------------------| | ||||||
| **Platforms** | Android, iOS, desktop, web | Android | | ||||||
| **Supported by** | JetBrains | Google | | ||||||
|
||||||
As Compose Multiplatform is based on Jetpack Compose, using these frameworks is a very similar experience. | ||||||
Both are powered by the Compose compiler and runtime. They use the same core concepts and the same APIs for building UI, | ||||||
including `@Composable` functions, state handling APIs like `remember`, UI components such as `Row` and `Column`, | ||||||
modifiers, animation APIs, and so on. | ||||||
This means that you can reuse existing knowledge of Jetpack Compose in Compose Multiplatform, | ||||||
and you can learn from almost any Jetpack Compose material, including [Google's official documentation](https://developer.android.com/jetpack/compose/documentation). | ||||||
## Jetpack Compose and composables | ||||||
|
||||||
Jetpack Compose is a declarative UI toolkit for building native Android interfaces. | ||||||
Its foundation is _composable_ functions, marked with the `@Composable` annotation. | ||||||
These functions define parts of the UI and automatically update when the underlying data changes. | ||||||
You can combine composables to build layouts, handle user input, manage state, and apply animations. | ||||||
Jetpack Compose includes common UI components like `Text`, `Button`, `Row`, and `Column`, which you can customize with modifiers. | ||||||
|
||||||
Compose Multiplatform builds on the same principles. | ||||||
It shares the Compose compiler and runtime with Jetpack Compose and uses the same APIs — `@Composable` functions, | ||||||
state management tools like `remember`, layout components, modifiers, and animation support. | ||||||
This means you can reuse your Jetpack Compose knowledge to build cross-platform UIs for Android, iOS, desktop, and web. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
## Compose Multiplatform and Jetpack Compose features | ||||||
|
||||||
> If you're experienced with Android development, you can apply your knowledge of Jetpack Compose when working with Compose Multiplatform. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Maybe remove this sentence as it's very similar to the paragraph above? |
||||||
> You can also learn about fundamentals of the both UI frameworks from almost any Jetpack Compose material, | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
> including [Google's official documentation](https://developer.android.com/jetpack/compose/documentation). | ||||||
> | ||||||
{style="tip"} | ||||||
|
||||||
Naturally, Compose Multiplatform has platform-specific features and considerations: | ||||||
|
||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixes the file location and scales the image a bit.