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

Libraries
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.
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.

1 Like
7

Thanks for your feedback. You are absolutely right.

  1. and 2. Clone-me-use-me does not work and now you can easily add Kunafa to any Kotlin-js project as a gradle dependency
compile "com.narbase:kunafa:0.1.4"
  1. Well, you have a good point there. kotlinx.html is definitely better than <a> as text. Kunafa still has a long way to go and by no means is complete. For these missing parts, kotlinx.html would be very useful.

I updated the Getting started guide to use the gradle dependency.
We have also created this tutorial to demonstrate how to use Kunafa for a web app. I think it will give you more understanding on the design decisions we have made. It would be great to have your feedback.

8

Hi again,
Since it’s first release in 2018, Kunafa has been evolving and now finally we’ve released Kunafa 0.2.x. So many concepts have been added such as components, view styles and CSS support, and routing.
Take a look at what’s new in Kunafa 0.2.x here.
We use Kunafa in production now, and we believe that it can be a good option for anyone who would like to use Kunafa for web frontend.

We would really like to hear from you. Give it a try and let us know what you think. Also, don’t forget to join us at Slack here, and leave us a star in Github.

1 Like
9

There is also this one: GitHub - rjaros/kvision: Object oriented web framework for Kotlin/JS