Hola mundo con Kotlin para JavaScript

Kotlin es uno de los lenguajes de programación que más novedades aporta. Explotamos su visión multiplataforma generando un sencillo “hola mundo” con JavaScript sin instalar ningún software.

¿Qué es Kotlin? ¶

Kotlin es un lenguaje de programación de tipado estático que funciona sobre la máquina virtual de Java. También puede ser compilado para Android (con soporte oficial de Google) y transpilado a JavaScript.

Esto será lo que vemos en este tutorial con vídeo.

Esta pequeña guía está pensada sobre todo para un perfil como el mío: desarrollador con experiencia en lenguajes de programación interpretados (PHP, JavaScript, python) que si ha visto alguna vez la compilación fue en sus años de estudiante con C.

Creado por JetBrains a principios de la década, respondía a la necesidad de la empresa de escribir menos código y poder avanzar más rápido en sus productos de software, tales como IntelliJ o PhpStorm.

Si quieres saber más sobre Kotlin, no dejes de escuchar nuestra entrevista con un profesional especializado en Kotlin.

Vídeotutorial Hola Mundo con Kotlin Javascript ¶

Puedes ver el vídeo de la demostración de código a continuación.

Descarga el código completo

El compilador ¶

Podemos desarrollar en kotlin con cualquier editor de código, pero lo más razonable es utilizar el soporte del fabricante a través de IntelliJ IDEA. Cuentas con el soporte de Android Studio o Eclipse.

Cómo queremos hacer este ejemplo de la forma más sencilla posible, no vamos a utilizar ningún IDE, precisamente para que no tengamos que depender de un software que quizás no tengas instalado y que siempre tiene un tamaño considerable.

Seguiremos las recomendaciones de Kotlin, aquí tenéis las opciones de descarga del compilador: Working with the Command Line Compiler.

Si bien puedes utilizar Sdkman o homebrew si estás en MacOS, seguiremos con este afán de sencillez y vamos al recurso más básico. El compilador de instalación manual.

Realmente no hay que instalar nada, solo descomprimir este fichero en una carpeta de tu disco duro.

Encontrarás una estructura como la de la imagen. Ahora mismo nos interesa la carpeta “bin” que es donde están los binarios del compilador.

Necesitaremos también extraer un fichero con toda la librería de JavaScript que necesita Kotlin para guardar la compatibilidad de su estructura en el navegador. En el vídeo lo explico con detalle y también lo puedes encontrar si descargas el código fuente de la práctica.

Primer script de Hola mundo por consola ¶

Antes de crear nuestro “Hola mundo” con Kotlin para JavaScript vamos a crear el mismo script para ver el resultado en nuestra consola.

La estructura de carpetas que tengo es la que puedes ver en la imagen.

Creamos un fichero y lo llamamos helloworld.kt con este contenido. La extensión “kt” es la de Kotlin.

#src/helloworld.kt
fun main(args: Array<String>) {
    println('Hola mundo')
}

La ejecución de Kotlin comienza en la función “main”. Y como puedes ver vamos a utilizar la función que imprime en pantalla un texto.

Tan sólo nos falta compilar y ejecutar. Ten muy encuenta que las rutas del ejecutable en el terminal están en relación a la carpeta “helloworld” que puedes ver en mi estructura de carpetas.

Con esto conseguimos crear el fichero ejecutable en Java con extensión “jar”.

../kotlinc/bin/kotlinc src/helloworld.kt -include-runtime -d helloworld.jar

A continuación lanzamos la ejecución de este fichero

java -jar helloworld.jar

Y el resultado en tu consola será como el que ves en el vídeo, aparecerá un “Hola mundo”.

¡Muy bien!

Ya tenemos nuestro primer script en Kotlin, pero queremos más y verlo en el navegador.

Kotlin para Javascript ¶

Lo primero es generar nuestro fichero JavaScript con el saludo visible en pantalla. Introducimos este código en nuestro “helloworld.kt”, sustituyendo al anterior.

#src/helloworld.kt
import kotlin.browser.document;

fun main(args: Array<String>) {
    val msg = document.getElementById('msg')
    msg!!.innerHTML = '<h1>Hola mundo</h1>'
}

Varias cosas interesantes

• Librería de kotlin para entender lo que aparece en el navegador. La importamos con el primer “import”
• Uso de métodos conocidos de JavaScript, que son más sencillos de entender. El “getElementById” nos carga del DOM el elemento con el identificador “msg”. Vas a ver este HTML en el fichero que crearemos un poco más adelante.
• Control de nulos. El compilador entenderá que la variable “msg” puede ser nula (porque el elemento del HMTL con el identificador “msg” puede no existir). Por eso utilizamos la doble admiración “!!”.
• Insertar HTML al modo de Javascript con “innerHTML”.
• No es necesario colocar un carácter de fin de línea tal y como el punto y coma. El compilador entenderá que es el final de la sentencia.

Nuestro fichero HTML será tal que así:

<!--helloworld.html-->
<!DOCTYPE html>
<html lang='es'>
<head>
    <meta charset='UTF-8'>
    <title>Kotlin JS Hola mundo</title>
</head>
<body>

<div id='msg'></div>


<script src='js/kotlin.js'></script>
<script src='js/helloworld.js'></script>

</body>
</html>

Descarga el código completo

Como ves cargamos dos ficheros que aún no existen: kotlin.js y helloworld.js

El primero puedes encontrarlo en el código o ver el vídeo para conseguirlo. Si transpilas el código a través de IntelliJ el software te generará la libreria de JS.

El segundo fichero es el que vamos a generar ahora.

Decirte que el concepto de transpilar es equivalente a compilar. Se entiende que al transpilar convertimos un código de un lenguaje de alto nivel (Kotlin) a otro de alto nivel (JavaScript).

Generamos ahora nuestro fichero JS

../kotlinc/bin/kotlinc-js -output js/helloworld.js -meta-info src/helloworld.kt

El binario en este caso es “kotlinc-js”. Tenemos que indicarle dónde queremos generar el fichero JS a través del “-output” y el origen con el nombre al final del comando.

El compilador genera más ficheros que ahora no nos interesan.

Carga finalmente helloworld.html en tu navegador y por fin tendrás el “Hola mundo”. Échale un ojo a helloworld.js para ver en detalle lo que genera el compilador.

Espero que esta pequeña guía te sea de utilidad :)