Kotlin-JS
I thought of trying out Kotlin ever since it gained first class citizen status on Android. It has ticked many boxes ever since.
It has become the second most popular language on JVM.
It has become one of the most loved languages on StackOverflow
It was among the top 10 google search trends for programming languages, 2019
Some of Kotlin’s features that caught my eye:
- Seamless interop with Java and JavaScript, meaning no learning overhead. This makes it very easy to incrementally adapt to Kotlin in your project
- Ability to compile to multiple platforms: JVM-based, Native platforms and JS. Lightning in a bottle!
- Project improvements: Traditional Java projects moving to Kotlin benefit from its robustness(null safety) and conciseness. Debugging and development is faster. Top it with your front-end adopting it too and the path is clear for a unified development, removing the barrier between front-end and back-end teams.
- Multi-platform: While teams work on different applications, they can write platform-specific common logic in one place, maintaining a single source of truth while avoiding redundancy.
I had been working with ReactJS for long and was looking for something which was a cross between the sternness of Java and the freedom of JavaScript. Kotlin fits that description. Given its likeness to React, it is surprisingly easy to write.
Here’s some code snippets from my experiment:
Main.kt — The Entry Point
Just like in React, main file injects the entire hierarchy of components into the root div of the DOM as shown above. Apart from that it also requires the entire CSS of the application at the root level.
We now drill down to app.kt which we inflated in main.kt above
App.kt
App.kt is the parent component to searchBar, loading and errorView components. Here we load our image gallery when not in loading or empty list state. It has an object literal like representation for DOM elements like div{}, br{} etc. JSX vibes!
searchBar component: is passed the onSearchTermChange method as its props which internally debounces startSearch method.
Loading component: is passed the loading variable present in the state of app component, thereby playing an important role in the business logic of the component.
Similarly, errorView is also passed with the errorMessage from the state of the app component so that the message can be displayed in case any error.
Let’s go further down the hierarchy and see these components as themselves.
searchBar.kt
Searchbar is very a class component composed of div, h2, input and p elements with the input element triggering a onInputChange method (below) when user types in the term.
onInputChange method runs a function which contains service call. onSearchTermChange is passed in from props by app.kt. It also sets the state with the current search term.
loader.kt
Loader is a simple functional component which takes the isLoading flag from app.kt and on fetch renders a spinner div and an h3 with message “Loading…”.
Image Gallery
Kotlin works seamlessly with existing npm libraries. Here we integrated react-photo-gallery to show a collage. Simply npm install and import the library as a jsModule
Service
We call the above function with searchTerm param passed by searchBar component. It utilises Kotlin’s coroutines to asynchronously fetch our images from the API endpoint.
Summary
Kotlin is the new kid on the block and it deserves notice! Its features like multiplatform, coroutines, cross compile ability and type safety set it apart. In our little exploration above, we saw how its very similar to React on the front end apart from the below mentioned topics we touched:
Class and Functional components
Props and State
Http service integation
NPM package integration
#BeKindKotlinChallenge
Inspired by Kotlin, we’ve launched a coding contest powered by Globant and Jetbrains.
Click here to know more!
Team Credits: Nikhil Jadhav | Akshata Shelar | Sumit Sutar | archana 0623
