Kotlin in the browser
Tags: webdev, programming, javascript, kotlin
Published: 2024-01-05 06:51:52

I love JavaScript web development except for the JS part. It's not personal: in fact, JS is pretty cool and imo it helped push concepts like closures into imperative languages (don't @ me, functional languages).

The thing is, I make mistakes that compilers identify & remedy really easily. I what static types do for me. Computers are very good with structured data. Have you ever tried to refactor a method like `gross_pay` in a dynamic language? 😵 Structural certainty lets us reason more like mathematics and develop proofs. [Halting problem](https://en.wikipedia.org/wiki/Halting_problem) aside.

Indeed: TypeScript was the fastest growing language in 2022 (see [JetBrains State of the Developer Ecosystem](https://www.jetbrains.com/lp/devecosystem-2022/)). Maybe like Sorbet for Ruby. These brought a sigh of relief. Being able to **_incrementally_** migrate a codebase… really? No need to rewrite it all in another language? 🤩

Still– all else aside, I simply prefer languages designed and  tooled around static types. Think: IDE refactoring, static analysis, automatic optimization… While that opinion is fine for the server, it's been a non-starter for the browser. (It's also tricky vis-à-vis Python for scientific computing but that's another story.) Ya can't avoid the JS.

[WebAssembly](https://webassembly.org/) changed that. For example Microsoft developed [Blazor](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) to run C# in the browser, similar to [Kotlin Multiplatform](https://kotlinlang.org/docs/multiplatform.html) by JetBrains. I know many developers from both .NET and JVM lands who'd love to avoid loosey goosey scripts.

While these frameworks run in the browser, WebAssembly doesn't use HTML. Instead, apps render pixels to the window canvas much like mobile or desktop apps in operating system windows.

The kobweb project–where Kotlin renders HTML & JS–lists some [disadvantages](https://github.com/varabyte/kobweb/tree/b41b5b0e86d033a71dcf3fe2ec3d00e3fcda2356?tab=readme-ov-file#what-about-compose-multiplatform-for-web) [[permalink]](https://github.com/varabyte/kobweb/tree/b41b5b0e86d033a71dcf3fe2ec3d00e3fcda2356?tab=readme-ov-file#what-about-compose-multiplatform-for-web) of the canvas approach; these stood out to me:

> * robots would lose the ability to crawl and index your site, hurting SEO.
> * your initial render may take longer.
> * your UI will be opaque to the powerful suite of devtools that come bundled with browsers.
> * accessibility tools for browsers might not work.
> 
> It would also prevent a developer from making use of the rich ecosystem of Javascript libraries out there.

As languages, HTML & CSS bother me on a whole other level… 😤 but nobody has time for that rant. Rants aside, it's true that HTML tooling for consumers & developers alike is simply better. In any case, I wanted to use Kotlin.

[Kotlin/JS](https://kotlinlang.org/docs/js-overview.html) looked like a way to have my cake and eat it too. It transpiles Kotlin to JavaScript, which becomes business as usual for the browser. Now, "all" we need is code to render our app's HTML right?

![Boromir meme: one does not simply render html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dw0yn5ai15giuiizs9b.jpg)

Any web developer knows one does not simply render html apps with a few functions. Entire frameworks exist to maintain the HTML document based on application state. Just managing the state is a big part of a browser app let alone creating HTML.

The Kotlin/JS page recommended two frameworks for rendering HTML: KVision & fritz2. I went with KVision somewhat arbitrarily; I did like that it supports UI elements like panels, grids, etc., and is less DSL-heavy.

Armed with this question,

**_how much Kotlin can I do in the browser?_**

I started this web app, based on a practical need in my home routine: [You Need a Splitter](https://github.com/dchaley/you-need-a-splitter)

Stay tuned for what I learned!