KVision - Object oriented Web UI framework for Kotlin/JS


#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

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.


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