From 2df0b602ee386577a6f3abff32aa78c3636fbf0a Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Fri, 2 Mar 2018 23:30:32 +0100 Subject: Website configuration. Introduction article. --- _posts/2018-03-01-getting-started.markdown | 35 ------- _posts/2018-03-01-introduction.markdown | 141 +++++++++++++++++++++++++++++ 2 files changed, 141 insertions(+), 35 deletions(-) delete mode 100644 _posts/2018-03-01-getting-started.markdown create mode 100644 _posts/2018-03-01-introduction.markdown (limited to '_posts') diff --git a/_posts/2018-03-01-getting-started.markdown b/_posts/2018-03-01-getting-started.markdown deleted file mode 100644 index d609b368..00000000 --- a/_posts/2018-03-01-getting-started.markdown +++ /dev/null @@ -1,35 +0,0 @@ ---- -layout: post -title: "Getting started" -date: 2018-03-01 14:50:53 +0100 -categories: kvision kotlin ---- - -#### 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:8088/](http://localhost:8088/) 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 distZip (on Linux) - gradlew.bat -Pprod=true distZip (on Windows) - -Application package will be saved as build/distributions/showcase.zip. diff --git a/_posts/2018-03-01-introduction.markdown b/_posts/2018-03-01-introduction.markdown new file mode 100644 index 00000000..4497a023 --- /dev/null +++ b/_posts/2018-03-01-introduction.markdown @@ -0,0 +1,141 @@ +--- +layout: post +title: "Introduction" +author: Robert Jaros +date: 2018-03-01 14:50:53 +0100 +categories: kvision kotlin +--- + +This is my first article about [KVision](https://github.com/rjaros/kvision) - a new open source Web UI framework written in Kotlin language. +I plan to write a series of them - describing what KVision is and how to use it. I will try to explain the design, focus on the +unique features and demonstrate the usage examples. + +### Why new framework? + +There are of course many different front-end frameworks on the market. A lot of them share many similarities, others offer some special and unique features. +Probably most of them are plain JavaScript frameworks, but there are other languages and technologies in play as well. +Just look at [TodoMVC](http://todomvc.com) website to find them and learn about them. + +I've been working with different technologies and frameworks for many years. I've used them in many commercial and non-commercial projects of different size and complexity. +Most of the time I was more then satisfied with the tools I've been using. But I've never found a solution, I could just call perfect. There was always something missing +and something was not fully correct. + +I don't really like to go with the mainstream. I like to explore and learn new possibilities. I try to make things easier and more productive. I like to reuse and integrate good stuff, +made by other people available in open source. I had many thoughts and conclusions about features, a perfect framework should have. +And finally I've decided to make my own framework. I plan to make it a perfect solution for me - it's quite easy when you know the expectations ;-) +But I hope it can be a good solutions for a few other developers as well. + +### Main features + +#### Compiled and strongly typed programming language + +When you work on a small project, dynamic and loosely typed programming language (like JavaScript) is more then OK. +But when the project becomes big and complex, and more developers are working with it, you just need to have more control over the code. You have to be able +to find bugs as soon as possible. You have to be able to refactor a large portions of code. It is possible only with compiled languages. +There are a few such languages in use for web development today - e.g. TypeScript or Scala. And Kotlin is just at the beginning of its way in this +direction. In fact, KVision project started as "SVision" written with [Scala.js](https://www.scala-js.org/), but soon I've decided to change the language to Kotlin, +because of much better IDE support, simpler design and better compilation time. + +#### Object oriented, imperative design + +Unlike most of the popular web frameworks (AngularJS, React, Vue.js and others), +KVision is not declarative - it is not designed to mix HTML code (or pseudo code) with a typical +programming language. You can write KVision application without any knowledge of HTML or CSS, +but at the same time you are able to use this knowledge if you wish. + +In KVision everything is just written in Kotlin. Your whole application is designed as type-safe and compiled. +KVision gives you a hierarchy of consistent components, which you can just use in your project or which you can extend to +modify their default behavior. You reuse you code by well known OOP design patterns - composition and inheritance. + +This design is well known in the UI programming world. In fact, it's probably used everywhere but in the web environment. +Swing, JavaFX, QT and WinForms are clear and solid examples of object oriented UI libraries and KVision goes the same way. + +#### Ready to use components + +Many frameworks give you well designed architecture but lack ready to use components. You have to +search the Internet to find ways to use rich text editor, advanced select box, date picker or even +a simple tab panel. + +KVision contains: + +- sophisticated containers (tabs, stack, dock, grid, horizontal, vertical, flexbox, responsive), +- a bunch of text input components including rich text editor +- buttons, checboxes and radios +- date and time picker +- spinner +- advanced select box with ajax support +- data binding components +- modals +- floating, resizable windows + +All of them with modern, [Bootstrap](https://getbootstrap.com/) based look & feel, and a consistent behavior. + +#### Forms support + +Almost all non trivial applications use some kind of forms. But implementing form support in not only about +showing form controls on the screen. Form items are bound to some data model, and this model should be type-safe. +You would like your text inputs to be "Strings", but you would also like your date values to be of "Date" type, +your spinner value to be "Number" and your checkbox state to be "Boolean". KVision lets you do it in an easy +and consistent way. And additionally it allows you to define and test validation for single fields or for the complete forms. + +#### Suitable for any application + +KVision was designed to be open and flexible. By default it gives you [Bootstrap](https://getbootstrap.com/) based look & feel, +but it can be disabled if you wish. Then you can design your application appearance from the scratch, and you are limited only +by your own knowledge of CSS. + +Ability to implement a fully compatible [TodoMVC](http://todomvc.com) +application, which you can find in the [KVision-examples](https://github.com/rjaros/kvision-examples) repository, +proves that KVision is suitable for any kind of projects, including responsive, mobile web applications or even a simple, plain websites. + +#### Last but not least + +Other KVision features: + +- Type safe DSL builders +- [Font awesome](https://fontawesome.com/) icons support +- Drag & drop support +- Integrated JS router +- [Karma](https://karma-runner.github.io/) testing framework support +- Full IDE support with IntelliJ IDEA Community Edition + +make this framework a complete solution ready for many different use cases. I will go into details of these features +in the following articles. + +### Get started + +1. Download [KVision examples](https://github.com/rjaros/kvision-examples) from GitHub: + + git clone https://github.com/rjaros/kvision-examples.git + +2. Enter "template" example directory: + + cd kvision-examples/template (on Linux) + cd kvision-examples\template (on Windows) + +3. Run Gradle incremental build with: + + ./gradlew -t run (on Linux) + gradlew.bat -t run (on Windows) + +4. Open [http://localhost:8088/](http://localhost:8088/) in your browser. + +5. Import "template" project in IntelliJ IDEA and open src/main/kotlin/com/example/App.kt file. +You can of course use your favourite text editor. + +6. Add some code inside the **start** function: + + override fun start(state: Map) { + Root("kvapp") { + label("Hello world!") + } + } + +7. See your changes immediately in the browser. + +### Learn more + +- Explore all [KVision examples](https://github.com/rjaros/kvision-examples) +- Read other articles at [KVision website](https://rjaros.github.io/kvision/) +- Check [API Documentation](https://rjaros.github.io/kvision/api/) +- Fork and play with the [source code](https://github.com/rjaros/kvision) -- cgit