fritz2 Build reactive web-apps in pure Kotlin

Let's start with creating our first elements, or tags as we call them, using the DSL. First we need to call the render function in order to create a RenderContext for our tags. Every tag is just a function representing an HTML-element, <div> in this case. You can nest them just like in HTML. To style your tags, add CSS-class-names directly as first parameter.

fun main() {
    render {
        div("my-style-class") {
            h2 {
                +"Hello Peter!"
            }
        }
    }
}

To divide your code into reusable fragments, simply write functions with a RenderContext receiver - they can be called from inside any render-context. In this example we create a greet function and call it multiple times with different names.

fun RenderContext.greet(name: String) {
    h2 {
        +"Hello $name!"
    }
}

render {
    div("my-style-class") {
        greet("Peter")
        greet("Paul")
        greet("Marry")
    }
}

Let's get a little more reactive by using a Store to store our data. Stores are needed for two-way data binding in fritz2. Access the store's data as a Flow by calling store.data, then render it into the value attribute of the <input> tag (this is one-way data binding). To update the data inside the store, call the update handler by using the handledBy function (two-way data binding).

render {
    val store = storeOf("Hello Peter")

    div("...") {
        input("...") {
            type("text")
            value(store.data)
            changes.values() handledBy store.update
        }
        p("...") {
            store.data.renderText(into = this)
        }
    }
}

As you have seen, fritz2 considers data-handling a first class citizen of any reactive web-app. Think of the UI as a rule driven, derived representation of the application data. That's why our framework also natively supports validation as part of the data-handling.

In order to evaluate data correctness, create a container for the messages by implementing ValidationMessage. You also have to provide a Validation instance by using the factory function validation. The latter contains all the domain rules to check the validity state. There is a special storeOf factory function which directly accepts a Validation-object. It will be automatically evaluated on each update. Last but not least, use the provided store.messages flow to display errors and warnings for the user.

class Message(
    override val path: String,
    val text: String
): ValidationMessage {
    override val isError: Boolean = true
}

val mailRegex = Regex("""\S+@\S+\.\S+""")
val validation = validation<String, Message> {
    if(!mailRegex.matches(it.data))
        add(Message(it.path,"Not a valid mail address"))
}

render {
    val store = storeOf("", validation)

    div("...") {
        input("...") {
            type("text")
            placeholder("Enter e-mail address")
            value(store.data)
            changes.values() handledBy store.update
        }
        store.messages.renderEach {
            p("...") {
                +it.text
            }
        }
    }
}