Kotlin sigue creciendo, y gracias al lanzamiento de la beta de Kotlin 1.1 ya tenemos toda la potencia de la que ya disponíamos para la JVM ahora también en nuestros navegadores.
Con Kotlin, disfrutarás de la experiencia de utilizar un lenguaje fuertemente tipado y de gran potencia como sustituto del convencional Javascript.
Hoy te quiero enseñar cómo puedes utilizarlo para crear tu primer proyecto Web de forma muy sencilla.
¿Qué necesitas para empezar?
Para poder desarrollar con Kotlin, necesitas un entorno de desarrollo muy específico: IntelliJ con la última versión EAP del plugin de Kotlin.
Para ello, descarga IntelliJ desde la página oficial de Jetbrains, y desde Tools -> Kotlin -> Configure Plugin Updates, selecciona Early Access Preview 1.1:
Puede ser que para el momento en que leas este artículo Kotlin 1.1 ya se haya liberado y puedas saltarte este segundo paso.
Creando tu proyecto KotlinJS
Ahora que ya tienes el IDE a punto, sólo necesitas crear un nuevo proyecto que utilice KotlinJS:
Crea un archivo main.kt en la carpeta src, y añade este código:
fun main(args: Array) {
println("Hello GenbetaDev!")
}
Y ahora un index.html sencillo como este. Como ves, lo importante es que estamos añadiendo la librería estándar de Kotlin, y otro Javascript con el nombre del proyecto, que incluirá nuestro código Kotlin transpilado a Javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Genbeta Dev</title>
</head>
<body>
<script src="out/production/genbetadev/lib/kotlin.js"></script>
<script src="out/production/genbetadev/genbetadev.js"></script>
</body>
</html>
Ejecuta el main.html (botón derecho sobre el archivo, y click sobre run), y podrás ver en la consola del navegador que se imprime el mensaje:
Añadiendo algo de código extra
Por supuesto, ahora con Kotlin podemos desarrollar el código que necesitemos usando clases, seguridad frente a nulos, lambdas... en fin, todas las funcionalidades que ya soportaba para la máquina virtual de Java.
En ejemplo muy sencillo para renderizar un H1:
import kotlin.browser.document
fun main(args: Array) {
val h1 = document.createElement("h1")
h1.textContent = "Hello Genbeta Dev!"
document.body?.append(h1)
}
Gracias a la generación de DSLs sencilla que nos permite Kotlin, podrías generar cualquier HTML de forma explícita. Aquí te muestro un pequeño ejemplo donde renderizo varias etiquetas HTML:
fun main(args: Array) {
val items = (1..10).map { "Item$it" }
document.body?.apply {
h1("Hello Genbeta Dev!")
div {
p("This is a test to generate HTML from Kotlin")
ul {
items.forEach { li(it) }
}
}
}
}
Y este es el resultado:
¿Cómo a partir de esa estructura puedo generar el HTML resultante? Muy sencillo. Primero he creado un enumerado que identifica las etiquetas que voy a utilizar:
enum class HtmlTag(val text: String) {
H1("h1"),
DIV("div"),
P("p"),
UL("ul"),
LI("li")
}
Y a partir de aquí, una serie de funciones que aplican sobre objetos de tipo Element. Hay dos 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) { textContent = text }
private fun Element.structuralElement(tag: HtmlTag, f: Element.() -> Unit) = createTag(tag) { f() }
private fun Element.createTag(tag: HtmlTag, f: Element.() -> Unit): Element {
val element = document.createElement(tag.text)
element.f()
append(element)
return element
}
Gracias a las funciones de extensión y la característica de Kotlin de permitir extraer la última función de los argumentos como un bloque de código, nos queda todo muy sencillo.
Conclusión
Si quieres ver el código completo, puedes echar un ojo al repositorio.
Como ves, Kotlin ya no es exclusivo de la JVM, sino que gracias al plugin de Kotlin podemos transpilar a Javascript y utilizar toda la potencia de un lenguaje fuertemente tipado y de un compilador que nos ayuda a evitar errores.
Si quieres aprender más sobre Kotlin, te animo a que le eches un vistazo al artículo que escribí hace un tiempo sobre Kotlin.
Ver todos los comentarios en https://www.genbeta.com
VER 0 Comentario