I wrote my website in Kotlin

A few weeks ago I thought I should have a website. Since I am an Android developer, I thought it should be in material design and because I’m a full on fanboy lunatic I thought it should be written on Kotlin.

If you didn’t know Kotlin can also compile to JavaScript. It’s still experimental but Jetbrain has said they are still committed to it. It’s something we should care about. In case you haven’t noticed JavaScript is taking over the world. While there are plenty of other JavaScript transpilers, if React Native gets as big as it seems I would rather write it in Kotlin over JavaScript.

For my site, Google’s Material Design Lite seemed like the easiest way to do it.

I whipped up a quick single page front-end framework named Kotlin Material Design Lite… Yeah, I know a boring name. The docs on Kotlin-JavaScript are slim, to say the least. So there is a good chance there are better methods than the ones I came up. It’s also very much not complete. It mostly just has the components I needed. But I do plan to keep working on it and any other contributions are welcome. If nothing else, it is a great way to learn more about Kotlin-JavaScript and be ready for when the tide of JavaScript drowns us all.

There are three main parts to KMDL.

This class looks for a div with an id of “MdlApp”. In Kotlin-JavaScript you interact with the DOM using “document” so when I call “document.getElementById(“MdlApp”)” it searches the HTML for an element with the id of MdlApp and returns it or null if it doesn’t find it.

The other main part is an abstract class MdlComponent. It’s what’s used to build out all the Material Design Lite Components.

document.createElement is how Kotlin-JavaScript creates elements on the DOM. This class also makes heavy use of delegate properties to make creating the components attributes easier. For example the Img

The src property uses the htmlPram delegate which uses the property’s name to set HTML attributes.

Now inside the main function just build out a MdlApp using the mdlApp function.

The last part is the MdlContent.

It’s used to build out content pages for the app.

Again the project, like Kotlin-JavaScript is still experimental but you can take a look at the code and you want to contribute here.