clojj / knack

An implementation of the Elm architecture in Kotlin.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

THIS IS AN EXPERIMENT AND WORK IN PROGRESS, DON'T EXPECT ANYTHING TO WORK AT ALL

Knack

Knack is an implementation of The Elm Architecture (TEA) in Kotlin. To quote the first sentence from that link:

The Elm Architecture is a pattern for architecting interactive programs, like webapps and games.

TODO: document basic idea.

If you are coming from JavaScript, you can think of it as React with a built-in, global reducer and built-in side-effects.

Example

To better understand it, take a look at the following example. Note: In contrast to kotlinx.html, the html is not 'type safe'.

// MODEL


data class Model(
    val counter: Int
)


fun init() = 
    Model(0) to Cmd.none



// VIEW


fun view(model: Model): Html<Msg> = div {
    div {
        text("${model.counter}")
    }

    button(onClick(Msg.Inc)) {
        text("Increment")
    }
    
    button(onClick(Msg.Dec)) {
        text("Decrement")
    }
}


// UPDATE


sealed class Msg {
    object Inc: Msg()
    object Dec: Msg()
}


fun update(msg: Msg, model: Model): Pair<Model, Msg> = when (msg) {
    is Inc -> 
        model.copy(counter = model.counter + 1) to Cmd.none

    is Dec -> 
        model.copy(counter = model.counter - 1) to Cmd.none
}


// MAIN

fun main() {
    val program = Program(::init, ::update, ::view)
    val element = document.getElementById("app")
    val app = program.run(element)
}

About

An implementation of the Elm architecture in Kotlin.


Languages

Language:Kotlin 99.3%Language:HTML 0.7%