ersin-ertan / fritz2

Reactive ui-framework in Kotlin

fritz2 is an extremely lightweight, well-performing, independent library to build reactive web apps 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 = storeOf("init value")

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

fritz2 implements precise data binding. This means that when parts of your data model change, exactly those and ONLY those DOM-nodes depending on the changed parts will automatically change as well.

No intermediate layer (like a virtual DOM) is needed. fritz2 requires no additional methods to decide which parts of your component have to be re-rendered:

Utilizing Kotlin's multiplatform-abilities, you'll write the code of your data classes only once and use it on your client and server (i.e. in a SpringBoot- or Ktor-Backend). This is also true for your model-validation-code, which can quickly become far more complex than your data model.

Expect a flat learning curve - we chose Kotlin for its focus on writing clean and intuitive code, which makes working with fritz2 easy to learn. fritz2 itself depends on only a handful of concepts you have to master. The core API consists of about a dozen key objects and types offering only essential methods und functions.

How to try it?

• Take a look at our hosted examples
• Or set up a new project on your own, following our documentation

What we've got so far

• 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
• backend-repositories (Rest APIs, LocalStorage, etc.)
• history / undo
• documentation

Overall Goals

• staying extremely lightweight (a few hundred lines of code for the core)
• keeping dependencies as low as possible (zero up to now!)
• generating elements, attributes, events for html from specification (w3c, mozilla, ...)

Inspiration

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

Leave us a star...

If you like the idea of a lightweight pure Kotlin implementation for building reactive web apps, please give us a star on github. Thank you.