Kotlin on Android, iPhone and the web: the mobile apps' Kotlin code is powering our JavaScript website
Vocabloot is a vocabulary app: you snap the real things around you and learn their names in the language you're learning. Open the app, point the camera at an apple, and you get "der Apfel" (the apple) with a sticker, two example sentences and the sound of it. That works for everything you can point a camera at. It does nothing for "Freut mich" (nice to meet you), "Wie geht es dir?" (how are…
Vocabloot is a vocabulary app that lets users learn words by snapping pictures of real objects around them. When a user points the camera at an apple, for example, the app displays "der Apfel" (the apple) along with a sticker, two example sentences, and the pronunciation of the word. However, the app falls short when it comes to common phrases like "Freut mich" (nice to meet you), "Wie geht es dir?" (how are you?) or "Auf Wiedersehen" (goodbye), as these cannot be captured through photography.
To address this limitation, Vocabloot introduced "decks," which function similarly to shared Anki or Quizlet decks. A deck is essentially a .vlbackup file that can contain any number of words and their associated information, such as stickers, sentences, tap-a-word meanings, and sound files. Users can download pre-curated decks from vocabloot.com/decks or create their own using the provided Deck Kit.
One challenge arose when developing the website version of Vocabloot: the website was built using JavaScript, while the app itself was written in Kotlin. To ensure a consistent user experience across all platforms, the shared Kotlin code had to be compiled into JavaScript and used on the website as well. This approach meant that 85% of the Kotlin code in the app, totaling 93,100 lines, was shared across Android, iPhone, and the web.
The shared Kotlin code consists of two modules: one responsible for determining which word the user has tapped and the current spoken word (298 lines), and the other for handling .vlbackup deck files and part-of-speech information (647 lines). These modules compile seamlessly for Android, iPhone, and the browser, and are tested using the same source code on both the JVM and Node.
The website's content is primarily driven by this shared Kotlin module, which provides the necessary logic and content. The visual components are handled by HTML, allowing for a consistent experience across devices. The shared Kotlin code was compiled into a 83 KB bundle, making it lightweight and efficient for web use.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
