KVision - Object oriented Web UI framework for Kotlin/JS

Libraries
1

Hi,

I’ve just published KVision - a new open source framework for building web applications in Kotlin. It’s available at https://github.com/rjaros/kvision.

KVision gives you a hierarchy of many different components, which are used to build application UI. It integrates many JavaScript, CSS and Kotlin-based components and projects (Bootstrap, Snabbdom, Font awesome, Trix editor, Kotlin observables and others) to give you an uniform working environment.

Additional information, examples and API documentation is available from the GitHub page.

I appreciate any comments and feedback.

Thanks!

2 Likes
2

At a first glance it is more mature then the one presented here few days ago.
The problem I see here is the lack of kotlin-style builders. Code like that:

        val mainPanel = HPanel(wrap = FLEXWRAP.WRAP, spacing = 100)
        val buttonsPanel = VPanel(spacing = 7)
        buttonsPanel.add(Button("Default button", style = BUTTONSTYLE.DEFAULT).apply { width = 200.px() })
        buttonsPanel.add(Button("Primary button", style = BUTTONSTYLE.PRIMARY).apply { width = 200.px() })
        buttonsPanel.add(Button("Success button", style = BUTTONSTYLE.SUCCESS).apply { width = 200.px() })
        buttonsPanel.add(Button("Info button", style = BUTTONSTYLE.INFO).apply { width = 200.px() })
        buttonsPanel.add(Button("Warning button", style = BUTTONSTYLE.WARNING).apply { width = 200.px() })
        buttonsPanel.add(Button("Danger button", style = BUTTONSTYLE.DANGER).apply { width = 200.px() })
        buttonsPanel.add(Button("Link button", style = BUTTONSTYLE.LINK).apply { width = 200.px() })
        mainPanel.add(buttonsPanel)

looks ugly in kotlin. It could easily be reduced with apply block. Also with a little effort, one could add builder functions, which could make the API much more comprehensible. Like that:

class VPanel(...){
  ...

  fun button(title: String, ..., op: (Button) -> Unit){
    this.add(Button(title, ... ).apply (op))
  }
}

and then, voila:

val buttonsPanel = vpanel(spacing = 7){
  button(("Default button",...){}
  button("Primary button",...){}
  button("Success button",...){}
  ...
}

In my opinion, you should look into tornadofx implementation. Maybe even see if you could use similar syntax.

1 Like
3

Thanks for your feedback!
I’ve published version 0.0.3 with new DSL builders for all containers and components. The builders are made with extension functions so it is even possible to write such functions for new, custom components.
I’ve refactored examples to use these kotlin-style builders, too.

1 Like
4

@rjaros I had a look at the examples and I really liked it. I find JS a bit chaotic. Do you thin it is possible to use KVision to write a single page JS REST client that requests and responds in json from and to different endpoints over HTTPS? I guess it would also need some notion of state and routing.

5

It’s definitely possible. At the moment KVision doesn’t have any dedicated methods to call REST endpoints, but it has integrated jQuery bindings and some helper extension functions as well. So you can simply write:

jQuery.post("/rest_url", mapOf("key1" to "value1", "key2" to "value2").asJson(), { data, status, xhr ->
    console.log(data)
    console.log(status)
    console.log(xhr)
})
6

OK. Is there plans for dedicated methods to call REST endpoint?. I like to stay away from JS as much as possible :slight_smile: even though the current approach doesn’t look to overwhelming.

1 Like
7

I plan to add dedicated api for remote endpoints, but first I have to think it through. I would like it to be as optimal as possible to use and I have to learn more about coroutines and promises :slight_smile:

1 Like
8

Cool, thanks. I’ll keep an eye on this post :wink:

9

Would it be possible to use the DSL to compile the layout to JavaFX GUIs? Is there such a cross-platform toolkit?

10

@rjaros I had look at https://kvision-address-book.herokuapp.com/ in a browser at it looks like it is making a HTTP call. I had a look in the code also https://github.com/rjaros/kvision-examples/tree/master/addressbook-fullstack but I can’t find where in the code the the URL, the header and the body of the request is set. Could this potentially be used to pull JSON data from HTTP endpoint?

11

Address book sample application uses fully transparent and automatic endpoint generation (both on the server and client side). So you will not find any code responsible for these HTTP calls.
But if you want to call your own endpoint you can use “remoteCall” method of “pl.treksoft.kvision.remote.CallAgent” class. It’s a simple wrapper over jQuery.ajax(), which allows you to specify request parameters, send any data and get Promise of the response (which can be converted to Deferred and used inside coroutines if you want to).