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.
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)
- 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)
- performance and memory optimizations
- user auth (example with OAuth)
- 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, ...)
fritz2 is heavily inspired by the great Binding.scala. Later I discovered that a lot of those concepts are described independently in Meiosis.