Jetpack Compose

Starting from Kotlin 2.0 the compose compiler is in match with the Kotlin version.

android {
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.1"
    }
}

// libs.versions.toml
[plugins]
compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }

// Root build.gradle.kts
plugins {
	alias(libs.plugins.compose.compiler) apply false
}

// Android / CMP build.gradle.jts
plugins {
  	alias(libs.plugins.compose.compiler)
}

If you’re using Android studio and want to have full access to tooling like previews, preview animations, live edit, etc you need to enable the build flag on your apps build.gradle.kts

android {
    buildFeatures {
        compose = true
    }
}
dependencies {
	implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
}

Compose dependencies have different version numbers so having a “single” compose version that manages its dependencies won’t work. For this we can use a BOM (Bill of Materials) which will manage the version of the dependencies that we decide to include. You can see which version will be including looking at the BOM Library version mapping and if you want to see the Alpha or Beta releases you can see that on the MVN repository.

// libs.versions.toml
composeBom = "2024.04.01"

androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-ui = { group = "androidx.compose.ui", name = "ui" }


// Build.gradle.kts - App
dependencies {
	androidTestImplementation(platform(libs.androidx.compose.bom)) //Android only
	implementation(libs.androidx.activity.compose)

    implementation(libs.androidx.ui)


}

// libs.version.toml
// From
androidx-ui = { group = "androidx.compose.ui", name = "ui" } 
// TO
androidx-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "yourVersion" } 

// build.gradle.kts
dependencies {
    implementation(libs.androidx.ui)
}

For Compose Multiplatform, Google mostly develops Android-specific libraries and Jetbrains creates wrappers for them (currently there’s no BOM for Compose Multiplatform ) and many android-specific libraries are available under the org.jetbrains.androidx prefix. (You can see all libraries in MVN)
As briefly mentioned before in Compose BOM, compose is very modular and so it doesn’t include many functionalities out of the box. We will talk about different libraries once we are looking into specific topics and areas, but it’s good to know what the official libraries are and what are they used for.

// Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // Material Design 3
    implementation("androidx.compose.material3:material3") // <--- Use this by default
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3.adaptive:adaptive")

// Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")

Similar to React, compose is divided in two; The compose compiler and compose UI which makes compose really versatile as the runtime and compiler can be embedded on other platforms similar to ReactNative or React Three Fiber.

Jetpack compose started off as a way to write Declarative user interfaces by using the Android XML Views system within Kotlin code, kind of like React did with JSX in JS (which is not part of the JS programming language so it has to go trough a build tool first) But Jetbrains (the creators of Kotlin preferred to use the Kotlin’s capabilities to create DSLs instead of adding XML support.

State in compose is a wrapper on a value that allows compose to track its changes and re-execute `composable` functions, most of the time state needs to be marked as mutable, this can be done with `mutableStateOf` and it will wrap our value with the `State` and we will be able to access the current value of the state by using the `.value` property. This minor inconvenience can be fixed by using Kotlin delegates so it would look something like:

var name by mutableStateOf("")

Since compose are functions the state is only saved when rendering, instead of a component t lifecycle

An effect is a composable function that doesn’t emit UI and causes side effects to run when a composition completes.

val currentOnStart by rememberUpdatedState(onStart)
    val currentOnStop by rememberUpdatedState(onStop)

    // If `lifecycleOwner` changes, dispose and reset the effect
    DisposableEffect(lifecycleOwner) {
        // Create an observer that triggers our remembered callbacks
        // for sending analytics events
        val observer = LifecycleEventObserver { _, event ->
            if (event == Lifecycle.Event.ON_START) {
                currentOnStart()
            } else if (event == Lifecycle.Event.ON_STOP) {
                currentOnStop()
            }
        }

        // Add the observer to the lifecycle
        lifecycleOwner.lifecycle.addObserver(observer)

        // When the effect leaves the Composition, remove the observer
        onDispose {
            lifecycleOwner.lifecycle.removeObserver(observer)
        }
    }

The composition is a Tree-structure of your composables that describe your UI. This keeps track of all the composables available on your UI.

Recomposition
When the state of the app changes, a recomposition will be scheduled and will re-execute the composables that might have changed, then the composition is updated to reflect the changes.
Similar to React’s Virtual DOM.

The composition can only be created by initial composition and updated by recomposition.

A composable lifecycle is defined by the following events:

• Initial composition
• Recompose 0 or more times
• Leaving the composition

A composable lifecycle is quite simple compared to Views or Activities. If a compostable needs to interact with those more complex lifecycles you should use Side-Effects

• Supports:
  • composable
  • dialog
  • activity
  • fragments
  • nested navgraphs

Voyager is a Programatic navigation library, similar to the iOS navigation style, where you can just call navigator.push(PostDetailsScreen(post.id)) and it will navigate to the new screen (no graph needed)

An extension for voyager and the official navigation to support iOS back navigation natively

A Multiplatform library to render markdown content, with support for images, links, custom styles and components.

• No Bold Support
• Issues with Image rendering

Unfortunatelly Android still doesn’t have a official 3d library yet and the best option for now is to use Spline

• Filament
• Materia
• Korender
• WorldWindKotlin - 3d globe

Framework for Building full-stack applications with compose

• Focus on frontend with integartion with Tailwind and other technologies
• SSR support
• Integration with Kotlin backend libraries like Ktor and Spring
• Export to Static Site (?)

Opinionated
Build Websites using Compose-html, with support for backend and frontend, as well as other utilities, it is like the Next.js of Compose

In my experience this is a great project, but for static site rendering it uses a whole browser to render the site…