Posted onDec 1, 2023 • Originally published attouchlab.co

Getting Started with Compose for Web

#kotlin #compose #multiplatform #webdev

If you are a Kotlin developer like me, you are probably very excited about Jetpack Compose. It’s a modern UI toolkit for developing apps, and with the great work from JetBrains, it’s becoming a really interesting solution.

As a mobile developer, I’ve never gone in the weeds on how to properly develop sites with HTML, CSS, and JS. My closest experience was with React Native back in 2018. But now, with Compose, using a Kotlin DSL, I feel comfortable on doing this.

Compose Runtime and Component Library

Before creating a project and start coding, it's important to have a small introduction to Compose runtimes. As of now, Compose has two different runtimes on the web:

JS + HTML
Wasm + Canvas

They both use the Compose Runtime underneath, but they use different components. Long story short:

The HTML version will have HTML composable components (like H1, P, Span, Input, Div, etc.)
The Canvas version will have similar components as the Android version as it uses SKIA to draw on the Canvas.

Both of them are experimental. Note that choosing how you want to build your application will impact on possible code-sharing with native if this is what you want.

For this series of posts, I'll use the HTML version and I will be able to explore more the web components.

Creating the project

Now that we know what runtime/components we want to use, we need to create a project. My first idea was to use theKMP project wizard, but unfortunately, the Web target is not available as an option for now. As a workaround, I had to create a new clean project using IntelliJ IDEA and add the dependencies manually.

Using a clean template you will reduce the amount of code that needs to be removed/updated to make the project work. But if you prefer to use any other IDE/Template, feel free to do so and share your experience with us later :)

With that, the configuration is completed with a few extra lines:

Change the Kotlin plugin from JVM to MULTIPLATFORM
Add the Compose plugin
Declare JS source-sets
Import the dependencies
Create an HTML file

plugins{kotlin("multiplatform")version"1.9.20"// Make this multiplatformid("org.jetbrains.compose")version"1.5.10"// Add compose plugin}kotlin{js(IR){// Declare JS source-setsbrowser()binaries.executable()}sourceSets{valjsMainbygetting{dependencies{// Import librariesimplementation(compose.html.core)implementation(compose.runtime)}}valjsTestbygetting{dependencies{implementation(kotlin("test-js"))}}}}

If you have a trained eye for Gradle configuration, you probably already noticed that we are importing the Compose HTML library. And that's why we need to create an HTML page that will load and be filled by our Composable code. This file should be located atjsMain/resources/index.html.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Compose Web</title></head><body><divid="root"></div><scriptsrc="compose-sweeper.js"></script></body></html>

This can be very simple, just load the JS built from your Kotlin code and create a DOM element that will be you compose root.

Running the project

As with any other project using Gradle as the build system, you will run most of your changes with thegradlew binary (or thegradlew.bat if you are running on Windows). Even though there are multiple commands listed when you callgradlew tasks, the important ones are three:

./gradlew jsBrowserDevelopmentRun - Start development server;
1. This call supports the--continuous build flag that can be used for reloading the app when the code changes;
./gradlew jsBrowserProductionWebpack - Generate the bundle version of your project.
1. It will spit out a static site at thebuild/dist/js/productionExecutable dir;
./gradlew allTests - Run all unit tests you have implemented for your project;

How does this work?

When you start the development server, it will compile your Kotlin code and run themain() function. On this function, you can call therenderComposable method to start a composable block inside a window element.

funmain(){renderComposable(rootElementId="root"){Text("Hello World")}}

As you can see, it will render all the content inside one root element we've defined on previous sections.

Lastly, as you can see at the end of the body block, we are importing the JS file created while building our application. The default name is just the project name with a.js extension.

Now that we have everything in place, we can finally run our server and have the following result:

Final Thoughts

In this first article, we are just exploring how to create and set up your project. But we can already say that Compose Web is a promising alternative for Kotlin developers who don’t want to learn HTML/CSS/JS (even though you will need it).

In future posts, we will dig into more topics, like how to use HTML Components, Styling with CSS, Handling, and Listening to DOM events. After all the articles, you will be able to fully understand how I’ve builtthis Minesweeper game only using Compose.