Installation
Doodle apps are built using Gradle like other Kotlin apps. These apps can be developed to target multiple platforms, with various build configurations depending on the mix of platforms supported.
The following shows how to configure your app for various targets.
- Browser (JavaScript)
- Browser (WasmJs)
- Desktop (JVM)
You can set up an app that runs in the Browser using JavaScript with the following build script.
build.gradle.kts
plugins {
id ("org.jetbrains.kotlin.multiplatform") version "1.9.25"
}
version = "1.0.0"
group = "com.my.cool.app"
repositories {
mavenCentral()
}
kotlin {
js {
browser()
binaries.executable()
}
val doodleVersion = "0.10.3" // <--- Latest Doodle version
dependencies {
implementation ("io.nacular.doodle:core:$doodleVersion" )
implementation ("io.nacular.doodle:browser:$doodleVersion")
// Optional
// implementation ("io.nacular.doodle:controls:$doodleVersion" )
// implementation ("io.nacular.doodle:animation:$doodleVersion")
// implementation ("io.nacular.doodle:themes:$doodleVersion" )
}
}
Learn more about Kotlin for Javascript.
WasmJs apps run in the Browser and are configured as follows.
build.gradle.kts
plugins {
id ("org.jetbrains.kotlin.multiplatform") version "1.9.25"
}
version = "1.0.0"
group = "com.my.cool.app"
repositories {
mavenCentral()
}
kotlin {
wasm {
browser()
binaries.executable()
// Apply binaryen to optimize output
if (project.gradle.startParameter.taskNames.find { it.contains("wasmJsBrowserProductionWebpack") } != null) {
applyBinaryen {
binaryenArgs = mutableListOf(
"--enable-nontrapping-float-to-int",
"--enable-gc",
"--enable-reference-types",
"--enable-exception-handling",
"--enable-bulk-memory",
"--inline-functions-with-loops",
"--traps-never-happen",
"--fast-math",
"--closed-world",
"--metrics",
"-O3", "--gufa", "--metrics",
"-O3", "--gufa", "--metrics",
"-O3", "--gufa", "--metrics",
)
}
}
}
val doodleVersion = "0.10.3" // <--- Latest Doodle version
dependencies {
implementation ("io.nacular.doodle:core:$doodleVersion" )
implementation ("io.nacular.doodle:browser:$doodleVersion")
// Optional
// implementation ("io.nacular.doodle:controls:$doodleVersion" )
// implementation ("io.nacular.doodle:animation:$doodleVersion")
// implementation ("io.nacular.doodle:themes:$doodleVersion" )
}
}
Learn more about Kotlin for WebAssembly.
You can set up a pure JVM app that runs on Desktop with the following build scripts.
build.gradle.kts
plugins {
id ("org.jetbrains.kotlin.jvm") version "1.9.25"
application
}
version = "1.0.0"
group = "com.my.cool.app"
repositories {
mavenCentral()
maven {
url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}
}
kotlin {
target.compilations.all {
kotlinOptions {
jvmTarget = "11"
}
}
val doodleVersion = "0.10.3" // <--- Latest Doodle version
dependencies {
val osName = System.getProperty("os.name")
val targetOs = when {
osName == "Mac OS X" -> "macos"
osName.startsWith("Win" ) -> "windows"
osName.startsWith("Linux") -> "linux"
else -> error("Unsupported OS: $osName")
}
val osArch = System.getProperty("os.arch")
val targetArch = when (osArch) {
"x86_64", "amd64" -> "x64"
"aarch64" -> "arm64"
else -> error("Unsupported arch: $osArch")
}
val target = "$targetOs-$targetArch"
implementation ("io.nacular.doodle:core:$doodleVersion" )
implementation ("io.nacular.doodle:desktop-jvm-$target:$doodleVersion") // Desktop apps are tied to specific platforms
// Optional
// implementation ("io.nacular.doodle:controls:$doodleVersion" )
// implementation ("io.nacular.doodle:animation:$doodleVersion")
// implementation ("io.nacular.doodle:themes:$doodleVersion" )
}
}
application {
mainClass.set("YOUR_CLASS")
}
Learn more about Kotlin for the JVM.
Multi-platform
Doodle is a set of Kotlin Multi-platform libraries. Which means you can create an MPP for your app as well. The advantage of this is that you can write your app entirely (except for main
) in common
code and make it available on both Web (JS, WasmJS) and Desktop (JVM). The following shows how to create such an app.
App launch code is the only portion that needs to be in jsMain
or jvmMain
.
build.gradle.kts
plugins {
id ("org.jetbrains.kotlin.multiplatform") version "1.9.25"
application
}
version = "1.0.0"
group = "com.my.cool.app"
repositories {
mavenCentral()
maven {
url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}
}
kotlin {
js {
browser()
binaries.executable()
}
wasm {
browser()
binaries.executable()
// Apply binaryen to optimize output
if (project.gradle.startParameter.taskNames.find { it.contains("wasmJsBrowserProductionWebpack") } != null) {
applyBinaryen {
binaryenArgs = mutableListOf(
"--enable-nontrapping-float-to-int",
"--enable-gc",
"--enable-reference-types",
"--enable-exception-handling",
"--enable-bulk-memory",
"--inline-functions-with-loops",
"--traps-never-happen",
"--fast-math",
"--closed-world",
"--metrics",
"-O3", "--gufa", "--metrics",
"-O3", "--gufa", "--metrics",
"-O3", "--gufa", "--metrics",
)
}
}
}
jvm {
withJava()
compilations.all {
kotlinOptions {
jvmTarget = "11"
}
}
}
val doodleVersion = "0.10.3" // <--- Latest Doodle version
sourceSets {
val commonMain by getting {
dependencies {
implementation ("io.nacular.doodle:core:$doodleVersion")
// Optional
// implementation ("io.nacular.doodle:controls:$doodleVersion" )
// implementation ("io.nacular.doodle:animation:$doodleVersion")
// implementation ("io.nacular.doodle:themes:$doodleVersion" )
}
}
val jsMain by getting {
dependencies {
implementation ("io.nacular.doodle:browser:$doodleVersion")
}
}
val jvmMain by getting {
dependencies {
val osName = System.getProperty("os.name")
val targetOs = when {
osName == "Mac OS X" -> "macos"
osName.startsWith("Win" ) -> "windows"
osName.startsWith("Linux") -> "linux"
else -> error("Unsupported OS: $osName")
}
val osArch = System.getProperty("os.arch")
val targetArch = when (osArch) {
"x86_64", "amd64" -> "x64"
"aarch64" -> "arm64"
else -> error("Unsupported arch: $osArch")
}
val target = "$targetOs-$targetArch"
implementation ("io.nacular.doodle:desktop-jvm-$target:$doodleVersion") // Desktop apps are tied to specific platforms
}
}
}
}
application {
mainClass.set("YOUR_CLASS")
}