Beyond Android, Using Kotlin to build React Web Apps
Kotlin: One language to rule them all ?
If like me, you have been following Google Developers India’s #30DaysOfKotlin initiative, you may have learned of many exciting features of Kotlin such as null safety, extension functions, coroutines and of course its interoperability with Java. But Kotlin aims to be much more than a “Java replacement” or a language for Android Development.
Although in various stages of development, Kotlin has
- Mobile cross-platform sdk for code-sharing between Android and iOS.
- Ktor framework used for creating asynchronous server-side applications much like NodeJs.
- Kotlin/Js for transpiling Kotlin to JavaScript. Kotlin/Js is what enables us to write React Applications.
To quickly get started with building React Apps using Kotlin, JetBrains provides a handy command-line tool create-react-kotlin-app which mimics Facebook’s create-react-app cli.
npx create-react-kotlin-app my-app
cd my-appThis will create a React Kotlin App in the folder “my-app” and will configure Kotlin, Webpack and IntelliJ IDEA so we don’t have to.
Lets see how writing React Apps in Kotlin differs from writing it in JavaScript. Writing the business logic of the app in Kotlin enables us to leverage its various features like static-typing, coroutines etc. and has the potential to provide a much better developer experience than JavaScript.
On the UI side, React provides JSX, a syntax extension to JavaScript, which creates React “elements” that can either represent html elements or other React components. Kotlin, through its Domain Specific Languages (DSLs) feature, allows us to describe HTML in a type-safe way. Below is an example of the same code component written in JSX and Kotlin.
Personally, I prefer JSX to describe the UI Components. Since its syntax, while different, is much closer to HTML. Kotlin’s way of handling it seems a bit unnatural. But you do get to utilize all the Kotlin language features. And if you have an Android App written in Kotlin, you can transfer much of your business logic into the web app without changes, and only re-write the UI parts. That is assuming you follow proper separation of concerns!
JetBrains provides kotlin-react, a Kotlin wrapper for React Library, which provides many more features such as RBuilder extension functions to structure complex components, type-safe inline styles using kotlin-css and also support for hooks!
To learn more, head to Kotlin Playground. It has hands-on tutorials for building React Apps with Kotlin as well as other Mutliplatform features.
I have created a very basic calculator app, to try out Kotlin/Js. Feel free to check it out! Linking the repository below.
Kotlin/JS being in its early days needs much more refining and fine-tuning. Same for Kotlin/Native for iOS. And while it is now the default language for Android Development, it’s still not a perfect cross-platform solution. But I believe, since Google is heavily promoting the language along with JetBrains, with initiatives like #30DaysOfKotlin and having been consistently ranked high among the most loved languages by developers all around, the future of Cross-Platform Kotlin Development looks promising!
