📚 Frontend development

Kotlin supports a wide selection of frontend frameworks across all platforms: mobile, desktop and web.

Please find below a glimpse of the possibilities that you can do right from IntelliJ:

Kotlin supports cross platform frontend development thanks to Kotlin MultiPlatform (KMP)

Kotlin Multiplatform (KMP)

"The Kotlin Multiplatform technology is designed to simplify the development of cross-platform projects. It reduces time spent writing and maintaining the same code for different platforms while retaining the flexibility and benefits of native programming." ₁open in new window

KMPopen in new window relies on Kotlin native and other Kotlin features to help developers create projects that target multiple platforms using a common Kotlin code-base.

KMP
KMP

Many combinations of targets and use cases are possible:

Kotlin/JS and Kotlin/WASM

  • Kotlin/JS can also target the web and even use web frameworks (such as react) in Kolitn.
  • Kotlin WASM is another possibility to target the web but this will generate WASM instead of pure JS code.
    • It can be used for example to develop computation intensive libraries.
  • Maybe we can do even more in the future with as all these technologies (Kotlin, WASM and Kotlin/WASM) evolve. - For example, WASIopen in new window allows WASM to communicate with the operating system. - This means that me may see Kotlin/WASM project projects in the future that can target both the browser and the OS.
  • Let's keep watching 😄.

🧪 Kotlin/WASM web app

  • Let's create a Kotlin/WASM app. By cloning git clone git@github.com:Kotlin/kotlin-wasm-examples.git and opening the browser-example folder in your IDE.
  • Open the project and run the wasmJsBrowserRun task.
  • The development server should start and you can open your WASM powered webapp on http://localhost:8080/open in new window
    • ⚠️ You may need to activate some flags on your browser for the app to work. If you see a blank page, please read the browser logs to check for the instructions.
Alt text
Alt text
  • Please check the contents of src/wasmJsMain/kotlin/Simple.kt to understand how the page is coded.
  • Next, let's check the generated wasm file which is available in build/js/packages/project_name/kotlin

Kotlin/JS and Kotlin/WASM common points

Both Kotlin/WASM and Kotlin/JS IntelliJ work somewhat similarly.

  • Both rely on the KMP plugin
  • Kotlin/WASM is enabled by adding a wasmjs section in the build.gradle.kts file, while Kotlin/JS is enabled by adding a js section.
  • The Kotlin code will compile to WASM and / or JS. Kotlin/JS generates only JS while Kotin/WASM generates both JS and WASM.
  • In both cases, the entry point of the generated code is a JS file called module_name.js.
  • The index.html in the resources folder loads the generated JS explained above (the one named module_name.js).
  • The task wasmBrowserDevelopmentRun or jsWasmBrowserDevelopmentRun run a local server that hosts both the index.html files and the generated JS and WASM files.

Compose multiplatform

"Compose Multiplatform simplifies and accelerates UI development for Desktop and Web applications, and allows extensive UI code sharing between Android, iOS, Desktop and Web. It's a modern toolkit for building native UI. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs."

img
img
Button(
  onClick = {
    logger.info("Pressed!")
  }
) {
  Text("Hello $platform")
}

It is based on Android Jetpack Composeopen in new window declarative UI approach ( which is similar also to iOS SwiftUIopen in new window ) 1open in new window

Compose multiplatform vs Jetpack Compose

While very similar, Compose multiplatform is different from Jetpack Compose as the latter is only compatible with Android. Google provides a JetPack compose tutorialopen in new window for Android development.

Compose HTML is not cross-platform

Compose HTML is UI a library targeting Kotlin/JS which is not compatible with Compose Multiplatform (it is a different API). For cross-platform UI development with Compose Multiplatform, compose Web is the choice.

🧪 Create a Compose multiplatform app

We'll create a multiplatform app using the official templateopen in new window. At the time of writing, this template does not include a compose web target.

  • Please check that your environment is correctly setup as explained hereopen in new window.
    • On Windows and Linux, we don't need to install iOS/macOS related tools but and we won't be able to run iOS/macOS targets.
    • If we don't want to install Android Studio, we need at least to install the Android SDK either through the official installer or from the "Languages and Framework -> Android SDK" menu in the settings.
  • Open the official templateopen in new window and either download a zip or use the "use this template" options on GitHub.
  • Open the downloaded projet. You'll note that it contains these modules:
    • a shared module (or subproject) that contains common code as well as
    • and another module for earch targeted platform: androidApp, iOSApp and desktopApp (When web will be included in the template, we should also see a webApp project). These contain the source code of the apps itself (such as the main activity in Android, the @main App in iOS and the main function in desktopJVM) and well as platform specific resources that cannot be placed in the shared module. Some examples of such files are the AndroidManifest.xml for android and the info.plist in iOS.
  • In order to run the desktopApp, open a terminal on the project root folder and launch this command: ./gradlew desktopApp:run.
  • In order to run the Android App, the simplest way is to launch it from IntelliJ Alt text. It is also possible define a gradle taskopen in new window that installs the app on the device and issues a command to the device to launch it.
  • In order to run the iOS App, the simplest way is to run it on the simulator using IntelliJ. In order to run it on a real device, the TramID needs to be defined as explained hereopen in new window
Alt text
Alt text

🧪 Playing with the Compose multiplatform API

Compose multiplatform is a component based declarative UI framework. Each component is called a Composable and is defined as a function annotated with @Composable.

In compose multiplatform, the main component (the component at the root of the App) is usually found in shared/src/commonMain/Kotlin/App.kt.

  • Take a look at shared/src/commonMain/Kotlin/App.kt, run the app and try to understand how compose works.
  • Let's create a new composable called RandomNumberList.
@Composable
fun RandomNumberList(){
    // Generate a list of random numbers
    val myRandomValues = List(5) { Random.nextInt(0, 30) }
    // LazyColumn is a vertically scrolling list that renders items on demand
    LazyColumn {
        items(myRandomValues.size){
            Text(text = "$it")
        }
    }
}
  • Place this composable below AnimatedVisibility and Button and run the app.
/*
Button(onClick ...
AnimatedVisibility(showImage) { ...
*/
RandomNumberList()
  • Exercise: Make the "Hello, .." button switch between showing the list and and the image.
Hello compose demo
Hello compose demo

🎯 Solutions

📖 Further reading