1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
# KVision
Object oriented web framework for Kotlin/JS.
[](https://travis-ci.com/rjaros/kvision)
[ ](https://bintray.com/rjaros/kotlin/kvision/_latestVersion)
[](https://opensource.org/licenses/MIT)
[](https://kotlinlang.slack.com/?redir=%2Fmessages%2FCL4C1SLKC)
KVision allows you to build modern web applications with the [Kotlin](https://kotlinlang.org) language,
without any use of HTML, CSS or JavaScript.
KVision prefers the imperative style of programming. It's object oriented and supports many well known OOP design patterns. It gives you a hierarchy of many different components,
which are used as a builder blocks for the application GUI.
KVision's design is quite similar to many non-web UI programming libraries including Swing, JavaFX, QT, WinForms and Flutter.
KVision contains innovative connectivity interface for [Ktor](https://ktor.io/), [Jooby](https://jooby.io), [Spring Boot](https://spring.io/projects/spring-boot),
[Javalin](https://javalin.io) and [Vert.x](https://vertx.io) frameworks on the server side, which
allows to build fullstack applications with shared common code.
**KVision is being actively developed. Please create an issue for any bugs or feature requests.**
## Features
- 100% type safe and fully compiled dev environment.
- Type safe DSL builders.
- Based on [Bootstrap](https://getbootstrap.com/) styles, typography and components.
- Utilizes [Snabbdom](https://github.com/snabbdom/snabbdom) fast virtual DOM implementation.
- Integrates with a lot of libraries and components:
- [Font awesome](https://fontawesome.com/)
- [Bootstrap Select](https://github.com/silviomoreto/bootstrap-select) (with [AJAX](https://github.com/truckingsim/Ajax-Bootstrap-Select) extension)
- [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox)
- [Trix editor](https://trix-editor.org/)
- [Bootstrap Datetime picker](https://github.com/pingcheng/bootstrap4-datetimepicker)
- [Bootstrap touchspin](https://github.com/istvan-ujjmeszaros/bootstrap-touchspin)
- [Bootstrap File Input](http://plugins.krajee.com/file-input)
- [Bootstrap Typeahead](https://github.com/eduardoinf/Bootstrap-3-Typeahead)
- [Handlebars](http://handlebarsjs.com/)
- [Chart.js](https://www.chartjs.org/)
- [Tabulator](http://tabulator.info/)
- [Redux](https://redux.js.org/)
- [ReduxKotlin](https://reduxkotlin.org/)
- [Navigo](https://github.com/krasimir/navigo)
- [Moment.js](https://momentjs.com/)
- [Pace](https://github.hubspot.com/pace/docs/welcome/)
- [Leaflet](https://leafletjs.com/)
- [Toastr](https://codeseven.github.io/toastr/)
- Includes sophisticated layout containers, including CSS flexbox, CSS grid and Bootstrap responsive 12 columns grid.
- Includes convenient forms implementation, with support for many different input components and easy to use validation.
- Supports [React](https://reactjs.org/) components with KVision DSL and built-in state management.
- Supports an observer pattern for data bindings.
- Internationalization support based on [Jed](http://messageformat.github.io/Jed/) library and [gettext](https://www.gnu.org/software/gettext/) translations.
- Easy to use Drag & Drop support.
- Support for jQuery animations and effects.
- Type-safe REST connectivity.
- Support for event Flows and StateFlow for observables.
- Innovative integration interface for [Ktor](https://ktor.io), [Jooby](https://jooby.io), [Spring Boot](https://spring.io/projects/spring-boot),
[Javalin](https://javalin.io) and [Vert.x](https://vertx.io) frameworks on the server side,
including support for type-safe websockets connections.
- Support for building hybrid mobile applications with [Apache Cordova](https://cordova.apache.org/).
- Support for building cross-platform, desktop applications with [Electron](https://electronjs.org).
- KVision applications are built with [Gradle](https://gradle.org/) with support for Webpack's [Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/) and
[Kotlin JavaScript DCE (dead code elimination)](https://kotlinlang.org/docs/reference/javascript-dce.html). Kotlin compiler plugin for Gradle is available to automatically generate
boilerplate code for server-side interfaces.
- [Karma](https://karma-runner.github.io/) testing framework support.
- IDE support (IntelliJ IDEA Community Edition).
## Examples and documentation
Ready to explore, rich set of [KVision examples](https://github.com/rjaros/kvision-examples) is available in the separate project.
See also the complete frontend implementation of [RealWorld example application](https://github.com/rjaros/kvision-realworld-example-app).
The comprehensive [KVision guide](https://kvision.gitbook.io/kvision-guide/) is published on GitBook.
Full API documentation (KDoc) is available at [https://rjaros.github.io/kvision/api/](https://rjaros.github.io/kvision/api/).
You can also look at [KVision blog posts at dev.to](https://dev.to/t/kvision/latest) and you can talk with KVision
developers on Kotlin Slack [#kvision](https://kotlinlang.slack.com/messages/kvision/) channel.
If you are interested in the documentation for KVision 1.x (based on Bootstrap 3), you can [find the guide here](https://kvision.gitbook.io/kvision-guide/v/kvision-1.x/) and the [API docs here](https://rjaros.github.io/kvision/api1/).
## Quickstart
#### Development
1. Download [KVision examples](https://github.com/rjaros/kvision-examples) from GitHub:
git clone https://github.com/rjaros/kvision-examples.git
2. Enter one of the examples directory:
cd kvision-examples/showcase (on Linux)
cd kvision-examples\showcase (on Windows)
3. Run Gradle incremental build with:
./gradlew -t run (on Linux)
gradlew.bat -t run (on Windows)
4. Open [http://localhost:3000/](http://localhost:3000/) in your browser.
5. Play with the code and see your changes immediately in the browser.
#### Production
To build complete application optimized for production run:
./gradlew -Pprod=true zip (on Linux)
gradlew.bat -Pprod=true zip (on Windows)
Application package will be saved as build/libs/showcase-1.0.0-SNAPSHOT.zip.
## Code samples
### Hello world
root("root") {
span("Hello world!")
}
### Basic components interactions using type safe DSL builders
root("root") {
hPanel(spacing = 20, alignItems = FlexAlignItems.CENTER) {
val label = span("Not yet clicked.")
var count = 0
button("Click me").onClick {
label.content = "You clicked the button ${++count} times."
}
}
}
### Tab panel with JavaScript routing
val firstPanel = Div("First")
val secondPanel = Div("Second")
val thirdPanel = Div("Third")
root("root") {
tabPanel {
addTab("First", firstPanel, route = "/first")
addTab("Second", secondPanel, route = "/second")
addTab("Third", thirdPanel, route = "/third")
}
}
### Type safe forms
@Serializable
data class Model(val username: String? = null, val password: String? = null)
root("root") {
formPanel {
add(Model::username, Text(label = "Username"), required = true)
add(Model::password, Password(label = "Password"), required = true)
add(Button("OK").onClick {
val data: Model = this@FormPanel.getData()
println("Username: ${data.username}")
println("Password: ${data.password}")
})
}
}
### Observer design pattern
data class Data(val text: String)
val model = observableListOf(
Data("One"),
Data("Two"),
Data("Three")
)
root("root") {
dataContainer(model, { data, _, _ ->
Span(data.text)
}, HPanel(spacing = 10))
}
model.reverse()
|
