Kunafa: An easy to use, high level framework in Kotlin for front-end web-development


#1

We just made Kunafa public. It is a Kotlin framework for front-end web-development. We developed it and use it in our company for our projects. It is at its early stages, and we would like to get the community feedback on it.

Philosophy

Web apps framework without using HTML, CSS, or JavaScript.
Problem

  • Web technologies are pain. Html is verbose, CSS is unexpected, and javascript is… javascript.
  • The no. of technoloies a developer needs to learn to write web apps is big. That is, HTML, CSS and JavaScript at the least. Then there are javascript frameworks (react, angular, vue), LESS, SCSS, Haml. There are also packaging tools, gulp, webpack.
  • Modern javascript frameworks solve the JavaScript problem, not the front end problem. React use JSX (embeded HTML in javascript) while Angular requires CSS and HTML.

Proposal

An easy to use, high level framework in Kotlin for web development. You do not need to learn the web stack, only the framework to be able to write web apps.
Developer experience

Developers only need to use Kotlin for developement. The framework the view from the presenter and data.

You write the view (similar to Android xml layouts) in Kotlin DSL. e. g.

  verticalLayout {
   width = matchParent
   height = matchParent
   background = Color.rgb(240, 240, 240)
   button {
    text = "Click me"
  }
 }

We need your feedback. There are so many design decisions and just cannot make them without getting developers feedback.

  • First, what is your feedback on the concept itself? Is there a need for it or is it doomed form the beginning?
  • Second, here is Kunafa in Github Follow the instruction on how to get started, play with it, and let us know what you think.

KVision - Object oriented Web UI framework for Kotlin/JS
#2

Off the top of my head, it is ‘conventional knowledge’ that separating content and presentation is good practice. The same conventional knowledge sometimes goes for separating content and behavior (although not always, e.g. react).

I don’t see things in black and white though, there are niches for almost anything you can think of. But that conventional wisdom does have worthy roots.

I’m not a fullstack developer but I’ll take a peek, and add any more precise thoughts if I have any


#3

Yeah it is important to separate content and behavior. Although it is not required, but Kunafa makes it very easy to separate the two.
For example:

    val appPresenter = AppPresenter()

    page {
        title = "App name"
        viewContainer {
            presenter = appPresenter
            id = "main_view"
            width = matchParent
            height = matchParent
        }
    }

Each view in Kunafa has a presenter property that u can set. These presenters (if set) will be call during the view life cycle. All behavior can be defined inside these presenters.


#4

This looks very interesting. I have not yet done any web development and I was thinking to look into it using Kotlin. I’d love to give this a try.


#5

Thanks… We appreciate it if you do give a try.
In the mean while, we will be writing tutorials and add documentation so people can start using it.


#6

If I understand correctly, you want to create a tornadofx analog for web development which is indeed a noble goal. But even at a first glance, there are some problems:

  1. Clone-me-use-me strategy won’t work. I had experience with grain which works this way and I don’t wont to repeat it. I won’t try this system of yours until it has a gradle plugin with declarative configuration and could be installed via maven.

  2. It is connected to 1. There is no clearly visible way to add resources to the project without modifying your internal directories. User code and framework code must be completely separated and I (user) must be able to add anything I want without fear of braking something in the framework. Again, it could be solved by creating a separate library + small gradle plugin.

  3. I am looking at the example and a bit confused:

                    text =
                            """Visit gitbub page to learn more about Kunafa,<br/>
                            Visit <a href="">Kunafa github page<a/>
                    """

Why plain text html? Kotlin has kotlinx.html for that! You can add a virtual html property and assign type safe html to it, then transform it internally to text or vice versa.