Introducing Kweb: A unique new approach to building rich web applications

Ian Clarke
2 min readFeb 4, 2017

--

KWeb is a library for building rich interactive web applications in pure Kotlin that makes the distinction between web browser and server largely invisible to the programmer.

Kweb the new coroutines mechanism in upcoming Kotlin 1.1 to elegantly avoid callback hell.

Kweb also incorporates a simple DSL for manipulating the browser’s DOM, and plugins to allow you to use popular JavaScript frameworks like JQuery and Material Design Light. It’s also surprisingly easy to add your own plugin for your favorite library or tool.

But why yet another web framework, don’t we have enough already?

Building rich web applications normally requires navigating the awful Javascript ecosystem, choosing between a vast multitude of tools, transpilers, minifiers, state maintainers, and so on, most of which will be obsolete in 6 months. Then you’re faced with handling interaction between client and server which is a whole other world of pain.

KWeb fixes this.

How does it work?

KWeb treats the web browser as a fairly dumb robot, keeping most of the intelligence server-side, relaying instructions to the client via a websocket, and receiving responses from the client. Instructions to the server are simple JavaScript snippets which the browser immediately executes, returning the result to the server if requested.

In this regard it is somewhat similar to Vaadin, although unlike Vaadin it doesn’t incorporate a large widget library, and it’s much simpler to integrate into a project (just add the dependency).

There is also a similar mechanism in Apache Wicket, although Wicket is mostly focussed on transparently keeping server and client state in sync, motivated largely by the desire to have a graceful fallback to HTML in the event that the browser doesn’t support JavaScript. This requirement is a lot less relevant today than it was a decade ago.

Uniquely, KWeb takes advantage of the new coroutines functionality in the upcoming Kotlin 1.1 to handle asynchronously waiting for responses from the client in a way that’s almost transparent to the user of KWeb, without tying up threads (a definite no-no if you plan on having more than a handful of people visiting your website at a delay).

What does it look like?

In this example I create a very simple to-do list, which supports addition and removal of items. It’s actually quite a small amount of code, but I’ve included detailed comments so it appears longer.

You’ll notice that at no point do you need to think about communication between the browser and the server, this is the magic of Kweb.

How do I try it?

Check out our Github page and follow the instructions there.

Kweb is still at the prototype stage. We’ve been making rapid progress on it but there is still a lot to do, so please try it, take a look at the code, and if you’d like to help please join our Slack channel #kweb on kotlinlang (you may need to sign up for kotlinlang first).

--

--