Cómo usar KotlinJS como sustituto de Javascript para desarrollo Web

Kotlin prosigue medrando, y merced al lanzamiento de la beta de Kotlin once ya tenemos toda la potencia de la que ya disponíamos para la JVM ahora asimismo en nuestros navegadores.

Con Kotlin, gozarás de la experiencia de emplear un lenguaje con fuerza tipado y de gran potencia como substituto del usual Javascript.

El día de hoy te quiero instruir de qué manera puedes usarlo para crear tu primer proyecto Web de forma sencillísima.

¿Qué precisas para iniciar?

Para poder desarrollar con Kotlin, precisas un entrecierro de desarrollo muy específico: IntelliJ con la última versión EAP del complemento de Kotlin.

Para esto, descarga IntelliJ desde la página oficial de Jetbrains, y desde Tools -> Kotlin -> Configure Complemento Updates, elige Early Access Preview 1.1:

Puede que para el instante en que leas este artículo Kotlin once ya se haya liberado y puedas saltarte este segundo paso.

Creando tu proyecto KotlinJS

Ahora que ya tienes el IDE a punto, solo precisas crear un nuevo proyecto que utilice KotlinJS:

Crea un fichero main.kt en la carpetita src, y agrega este código:

fun main(args: Array) undefined

Y ahora un index.html fácil como este. Como ves, lo esencial es que estamos agregando la librería estándar de Kotlin, y otro Javascript con el nombre del proyecto, que incluirá nuestro código Kotlin transpilado a Javascript:

turincon.net

Ejecuta el main.html (botón derecho sobre el fichero, y clic sobre run), y vas a poder ver en la consola del navegador que se imprime el mensaje:

Añadiendo algo de código extra

Como es lógico, ahora con Kotlin podemos desarrollar el código que precisemos utilizando clases, seguridad en frente de nulos, lambdas… en resumen, todas y cada una de las funcionalidades que ya aguantaba para la máquina virtual de Java.

En ejemplo sencillísimo para renderizar un H1:

import kotlin.browser.document

fun main(args: Array) undefined

Merced a la generación de DSLs fácil que nos deja Kotlin, podrías producir cualquier HTML de forma explícita. Acá te muestro un pequeño ejemplo donde renderizo múltiples etiquetas HTML:

fun main(args: Array) undefined

Y este es el resultado:

¿De qué forma desde esa estructura puedo producir el HTML resultante? Sencillísimo. Primero he creado un enumerado que identifica las etiquetas que voy a utilizar:

enum class HtmlTag(val text: String) undefined

Y desde acá, una serie de funciones que aplican sobre objetos de tipo Element. Hay 2 tipos muy diferenciados: los elementos estructurales y los de texto:

fun Element.h1(text: String): Element = textElement(HtmlTag.H1, text)
fun Element.div(f: Element.() -> Unit) = structuralElement(HtmlTag.DIV, f)
fun Element.p(text: String): Element = textElement(HtmlTag.P, text)
fun Element.ul(f: Element.() -> Unit) = structuralElement(HtmlTag.UL, f)
fun Element.li(text: String) = textElement(HtmlTag.LI, text)

Y estas son las funciones base:

private fun Element.textElement(tag: HtmlTag, text: String) = createTag(tag) undefined
private fun Element.structuralElement(tag: HtmlTag, f: Element.() -> Unit) = createTag(tag) undefined

private fun Element.createTag(tag: HtmlTag, f: Element.() -> Unit): Element undefined

Merced a las funciones de extensión y la característica de Kotlin de permitir extraer la última función de los razonamientos como un bloque de código, nos queda todo sencillísimo.

Conclusión

Si deseas ver el código completo, puedes echar un ojo al repositorio.

Como ves, Kotlin ya no es exclusivo de la JVM, sino merced al complemento de Kotlin podemos transpilar a Javascript y usar toda la potencia de un lenguaje con fuerza tipado y de un compilador que nos ayuda a eludir fallos.

Si deseas aprender más sobre Kotlin, te animo a que le eches una ojeada al artículo que escribí hace ya un tiempo sobre Kotlin.

En turincon.net | Kotlin llega a Gradle: Escribe tus scripts de Gradle utilizando Kotlin script
Tutoriales de KotlinJS en Kotlinlang

hljs.initHighlightingOnLoad();

code.hljs undefined
@media only screen and (min-width: 768px) undefined
@media only screen and (min-width: 1024px) undefined

Asimismo te invitamos a

Seguros por días: ¿qué son y de qué forma marchan?

Angular y Batarang

Karma.js, el término de Test Runner

– La nueva

De qué forma utilizar KotlinJS como substituto de Javascript para desarrollo Web

fue publicada originalmente en

turincon.net

por
Antonio Leiva

.