What is Kotlin

Kotlin is an object-oriented programming language, OOP, which supports higher order functions and lambdas.

I won’t go in details about the OOP here but you can read more on Wikipedia article

https://en.wikipedia.org/wiki/Object-oriented_programming

Kotlin is also statically typed programming language to build multi-platform application

These platforms include:

• JVM (Java Byte-Code)
• Web browser (JavaScript and Web-Assembly)
• Native byte codes

These features about Kotlin makes it powerful language to develop complex application with easy, readable and testable code.

Power of Kotlin with JavaScript and Html DSL

One of the best thing about Kotlin is that you can trans-compile your Kotlin into JavaScript and run it in a Browser.

This is possible because of powerful Kotlinx.html library.

A kotlinx.html library provides DSL to build HTML to Writer/Appendable or DOM at JVM and browser (or other JavaScript engine) for better Kotlin programming for the Web.

Let’s look at a simple example

Consider this code with Twitter Bootstrap 3.x with dropdowns:

For a simple dropdown, you’ll have following HTML code:

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

To achieve the same HTML code in Kotlin will have:

li {
    classes = setOf("dropdown")

    a("#", null) {
        classes = setOf("dropdown-toggle")
        attributes["data-toggle"] = "dropdown"
        role = "button"
        attributes["aria-expanded"] = "false"

        ul {
            classes = setOf("dropdown-menu")
            role = "menu"

            li { a("#") { +"Action" } }
            li { a("#") { +"Another action" } }
            li { a("#") { +"Something else here" } }
            li { classes = setOf("divider")}
            li { classes = setOf("dropdown-header"); +"Nav header" }
            li { a("#") { +"Separated link" } }
            li { a("#") { +"One more separated link" } }
        }

        span {
            classes = setOf("caret")
        }
    }
}

Ok now you might think what is the advantage of this?

One of the main advantage of using Kotlin HTML DSL is that you can break your down into separate functions and modules and reuse them other places, rather than copy and pasting your HTML code.

This will increase maintainability of our code and we’ll be able to write unit tests for your client side project; Something that have been very difficult to do so traditionaly.

Let’s introduce a top-level function dropdown like this:

fun UL.dropdown(block : LI.() -> Unit) {
    li("dropdown") {
        block()
    }
}

then let’s break down our previous dropdown code into separate functions:

fun LI.dropdownToggle(block : A.() -> Unit) {
    a("#", null, "dropdown-toggle") {
        attributes["data-toggle"] = "dropdown"
        role = "button"
        attributes["aria-expanded"] = "false"

        block()

        span {
            classes = setOf("caret")
        }
    }
}

fun LI.dropdownMenu(block : UL.() -> Unit) : Unit = ul("dropdown-menu") {
    role = "menu"

    block()
}

fun UL.dropdownHeader(text : String) : Unit = li { classes = setOf("dropdown-header"); +text }
fun UL.divider() : Unit = li { classes = setOf("divider")}

Now we can create dropdowns easier

createHTML().ul {
    dropdown {
        dropdownToggle { +"Dropdown" }
        dropdownMenu {
            li { a("#") { +"Action" } }
            li { a("#") { +"Another action" } }
            li { a("#") { +"Something else here" } }
            divider()
            dropdownHeader("Nav header")
            li { a("#") { +"Separated link" } }
            li { a("#") { +"One more separated link" } }
        }
    }

Now we can see the power of using the Kotlin to create custom UI components that can be used and shared everywhere.

Power of Kotlin and Spring Boot

If you are a Java developer, you might be familiar with power of Spring Boot framework for developing enterprise web applications.

Now let see how we can use Spring Boot and Kotlin to develop full stack web applications.

Creating Spring Boot application is as easy as a few lines:

@SpringBootApplication

class DemoApplication

fun 

main(args: Array<String>) {

    runApplication<DemoApplication>(*args)

}

and similarly, we can create a controller to return our html page

@Controller
@RequestMapping("/")
class IndexController {
    @GetMapping("/")
    fun getIndex(): String {
        return "index.html"
    }
}

now we can create a web application that uses JSON API in the springboot server side.

For a complete example check out the following Demo Todo Application.

Demo Project

https://techprd.com/spring-boot-kotlin-js-demo-project/ ‎