Writing Kotlin in the Browser
The Basics – A Simple Project
We also need to add the Kotlin standard library to the project. Clicking on the Create button we’ll be prompted with the location where we want these files copied. By default it copies is to a folder named script. And we’ll get to this later on as it’s important.
The resulting structure of the project should be
The project has two files that are added:
- The lib folder contains the header files, as a jar file, which are used during development.
- The script folder contains a single kotlin.js which is the Kotlin runtime library. This is used in production.
Setting up a workflow
During development we need to have an up to date version of these files so ideally we’d like to have these located in our web/js/app folder. We can do this in many ways, either using IntelliJ IDEA artifacts or Maven/Gradle. In our case we’re just going to use an artifact. We can set one up to copy the corresponding files to the desired output location and additional also copy the kotlin.js file that was originally copied to the script folder to the same location*.
*This is a one-time operation so a better alternative is to define the output location of this file directly to our required output folder when setting up the project. We have done it this way to explain things step by step.
Interacting with DOM Elements
Now that we have the project layout ready, let’s start writing some code. The most basic thing we can do is manipulate some DOM elements. We can create a simple HTML page (named index.html) and place it under the web folder
The idea is to now update the value of the input field using Kotlin. For that we can create a new file called main.kt and place it under our src folder.
Kotlin provides a series of libraries targeted specifically at the web. In our case, since we want to manipulate the DOM, we can import the js.dom.html to access the document variable. The resulting code would be
The standard library already provides support for DOM manipulation, HTML 5 features such as Canvas and Local Storage, as well as wrappers for common libraries such as jQuery. We will be adding more as we go along, and we’ll cover some of them in future posts.
Running the code
Now that we have the code compiled, we need to actually run it. For this we have to reference both the kotlin.js as well as the generated (basic.js) file from our index.html page.
The code corresponding to the main function will automatically be called when the page is loaded.
Once we load our index.html page, we should see the result.
This is placed inside the same module as the application and we can call it referencing it by the Kotlin module name*
*This API is not final and will most likely change in the future, and probably will be much more compact.
Subscribe to Blog updates
Ktor 1.3 Release
Ktor 1.3 was released recently, and we’re happy to share the details with you in this blog post. Ktor consists of two parts: the server engine and a flexible asynchronous HTTP client. The current release focuses mainly on the HTTP client. Here you can find the complete changelog for this release.…
Kotlin 1.3.50 released
We’re happy to announce the release of Kotlin 1.3.50 today. In addition to the quality and tooling improvements, the main focus for this version has been on: Designing a new Duration and Time Measurement API (available for preview). Working on an improved Java-to-Kotlin converter. Experimental gen…
Kotlin 1.3.40 released
We’re happy to present the new release today, Kotlin 1.3.40. In addition to the quality and tooling improvements the main focus for this version has been on: Gradle support for NPM, Yarn, and Webpack for Kotlin/JS Test runner improvements for multiplatform projects New type inference Perfor…
Kotlin 1.3.20 released
We’re happy to announce the release of Kotlin 1.3.20, a new bug fix and tooling update for Kotlin 1.3. In addition to improvements to the compiler and IDE, this version: Allows running Gradle tasks in parallel within a single project Allows building multiplatform projects via Gradle Kotlin DSL Bri…