Hello Kunafa!

Hello Kunafa

Welcome to Kunafa!

It is easy to get started with Kunafa and start front-end web development with Kotlin. Here’s a summary of the steps to get started:

  • Create a Kotlin-js project.
  • Add Kunafa dependencies.
  • Write your first Hello World Application

Create a Kotlin-js project

There are a lot of options to create a Kotlin-Js project. You can use IntelliJ, Gradle Or Maven to configure the project. Here are some useful links:

Here, I am using Gradle. The project name is Kunemo and my build.gradle looks like this:

buildscript {
    ext.kotlin_version = '1.2.10'

    repositories {
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

group 'com.narbse'
version '1.0-SNAPSHOT'

apply plugin: 'kotlin2js'

repositories {
    mavenCentral()
}

dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
}
task assembleWeb(type: Sync) {
    configurations.compile.each { File file ->
        from(zipTree(file.absolutePath), {
            includeEmptyDirs = false
            include { fileTreeElement ->
                def path = fileTreeElement.path
                path.endsWith(".js") && (path.startsWith("META-INF/resources/") ||
                        !path.startsWith("META-INF/"))
            }
        })
    }
    from compileKotlin2Js.destinationDir
    into "${projectDir}/web"

    dependsOn classes
}

assemble.dependsOn assembleWeb

compileKotlin2Js {
    kotlinOptions.outputFile = "${projectDir}/web/output.js"
    kotlinOptions.moduleKind = "plain"
    kotlinOptions.sourceMap = true
}

The generated js files will be located at {projectDir}/web. Now, create a index.html at the project root directory containing the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kunemo demo</title>
</head>
<body>
    <script type="text/javascript" src="web/kotlin.js"></script>
    <script type="text/javascript" src="web/output.js"></script>
</body>
</html>

web/kotlin.js is kotlin standard library js file that will be generated, and web/output.js is your project js file.

Add Kunafa dependencies

To add Kunafa to your project, first you need to add it to your build.gradle file as a dependecy. Under compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" Add the following line.

compile 'com.narbase:kunafa:0.1.4'

Then you need to add Kunafa js file to your index.html. Add the following line to index.html right after kotlin.js but before output.js

<script type="text/javascript" src="web/kunafa.js"></script>

Now your html should look like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kunemo demo</title>
</head>
<body>
    <script type="text/javascript" src="web/kotlin.js"></script>
    <script type="text/javascript" src="web/kunafa.js"></script>
    <script type="text/javascript" src="web/output.js"></script>
</body>
</html>

And that’s it. Now you can start playing with Kunafa.

Write your first Hello World Application

After you sync your gradle project, create a new Kotlin file named App.kt. Then create the main function.

fun main(args: Array<String>) {

}

Kunafa provides a simple DSL to create UI components . The root component should always be page. The page component corresponds to a web page; thus, there should be only one page component. Add a page component to your main function

import com.narbase.kunafa.core.components.page

fun main(args: Array<String>) {
    page {
    
    }
}

Next, add a textView with text of Hello world!.

import com.narbase.kunafa.core.components.page
import com.narbase.kunafa.core.components.textView

fun main(args: Array<String>) {
    page {
        textView {
            text = "Hello world!"
        }
    }
}

And we are done. Build the project, and open index.html in the browser. You should see Hello world! on the page. Next guide will go deeper into Kunafa to create interactive page.

One thought on “Hello Kunafa!

Leave a Reply

Your email address will not be published. Required fields are marked *