Skip to content

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 32 additions & 8 deletions topics/compose/compose-multiplatform-and-jetpack-compose.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,46 @@
[//]: # (title: Compose Multiplatform and Jetpack Compose)

![Compose Multiplatform created by JetBrains, Jetpack Compose created by Google](og-image-compose-multiplatform-and-jetpack-compose.png)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
![Compose Multiplatform created by JetBrains, Jetpack Compose created by Google](og-image-compose-multiplatform-and-jetpack-compose.png)
![Compose Multiplatform created by JetBrains, Jetpack Compose created by Google](compose-multiplatform-and-jetpack-compose.png){width=730}

Fixes the file location and scales the image a bit.


<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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
It covers shared concepts like composables, state management, and UI components, along with platform-specific features and limitations.

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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
This means you can reuse your Jetpack Compose knowledge to build cross-platform UIs for Android, iOS, desktop, and web.
This means you can reuse your Jetpack Compose knowledge with Compose Multiplatform to build cross-platform UIs for Android, iOS, desktop, and web.


## 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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
> If you're experienced with Android development, you can apply your knowledge of Jetpack Compose when working with Compose Multiplatform.

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,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
> You can also learn about fundamentals of the both UI frameworks from almost any Jetpack Compose material,
> You can learn about the fundamentals of both UI frameworks from almost any Jetpack Compose material,

> including [Google's official documentation](https://developer.android.com/jetpack/compose/documentation).
>
{style="tip"}

Naturally, Compose Multiplatform has platform-specific features and considerations:

Expand Down