abitgen / fritz2

Reactive ui-framework in Kotlin

fritz2 is a proof of concept for an extremely lightweight well-performing independent library for client-side ui in Kotlin heavily depending on coroutines and flows.

fritz2 includes an intuitive way to build and render html-elements using a type-safe dsl. You can easily create lightweight reactive html-components that are bound to an underlying model and automatically change, whenever the model data changes:

val model = RootStore<String>("init value")

render {
    div("some-css-class") {
        input {
            value = model.data
            changes.values() handledBy model.update 
        }
        p {
            text("model value = ")
            store.data.bind()
        }
    }
}.mount("target")

fritz2 implements precise data binding. That means that exactly those (and only those) dom-nodes (elements, attributes, etc.) change, that depend on the parts of your data-model, that have changed. There is no intermediate layer needed like a virtual DOM and you do not have to implement any additional methods to decide, which parts of your component have to be rerendered, when your data changes:

Utilizing Koltin's multiplatform-abilities, you have to write the code of your data classes just once and use it on your client and server (i.e. in a SpringBoot-Backend). This of course also true for your model-validation-code, that can become far more complex than your data model really fast.

The learning curve should be quite flat. We chose Kotlin as a language, that is easy to learn and has a focus on writing clean and intuitive code. fritz2 itself depends on only a handful of concepts) you have to master. The core API consists of just about a dozen key objects and types offering only the methods und functions, that are really needed.

How to try it?

You can either

• take a look at our hosted examples
• set up a new project on your own following our documentation
• checkout the project, import it in your favourite IDE (or whatever you like) and run ./gradlew :examples:todomvc:run (or another example)

What is there already?

• easy reactive one- and two-way-databinding
• even for lists and deep nested structures
• complete set of html5 elements, attributes and events
• hassle-free redux-like state-handling
• model-validation and message handling
• routing (for SPAs, hash-based)
• examples i.e. implementing the specification of TodoMVC
• server-communication (Rest APIs, etc.)
• documentation (work in progress)

What will come next?

• performance and memory optimizations
• user auth (example with OAuth)

Overall Goals

• stay extremely lightweight (just a few hundred lines of code for the core)
• try to depend on as less libs as possible (zero up to now!)
• generating elements, attributes, events for html from specification (w3c, mozilla, ...)

Inspiration

fritz2 is heavily inspired by the great Binding.scala. Later I discovered that a lot of those concepts are described independently in Meiosis.