Introducción a KotlinJS: Desarrollo web con Kotlin
Hasta ahora estamos escribiendo Kotlin principalmente para el desarrollo de aplicaciones en Android, pero Kotlin es un lenguaje de programación versátil con cuatro ámbitos principales de aplicación: Android, JVM, nativo y, lo que nos interesa ahora, desarrollo web. Esto es así porque Kotlin también puede ser compilado a código fuente de JavaScript, con la diferencia de que con Kotlin se puede disfrutar de la experiencia de utilizar un lenguaje fuertemente tipado y de gran potencia.
Hay varias formas de compilar Kotlin a JavaScript, siendo el enfoque recomendado usar Gradle, aunque también se pueden crear proyectos JavaScript directamente desde IntelliJ IDEA, usar Maven o compilar el código manualmente desde la línea de comandos. De momento vamos a ver un ejemplo sencillo de cómo usar KotlinJS (Kotlin a JavaScript) para el desarrollo web.
Abrimos IntelliJ Idea y creamos un nuevo proyecto seleccionando Kotlin y JS | IDEA:
Asignamos un nombre al proyecto y seleccionamos una librería (en caso de no existir la creamos con el botón Create):
Observa la estructura de archivos que se ha creado. En la carpeta src creamos un archivo tipo Kotlin, por ejemplo kotlinJS.kt, y en la raíz del proyecto creamos un archivo html (File -> New -> HTML File), por ejemplo index.html, y un archivo para contener el estilo, por ejemplo estilo.css (también se puede crear un archivo xsl desde File -> New -> XSLT Stylesheet).
Ahora ya podemos ejecutar Build -> Build Project, lo que genera una nueva carpeta llamada out, donde ahora nos interesan dos archivos:
- out/production/KotlinJS/lib/kotlin.js
- out/production/KotlinJS/KotlinJS.js
Ahora tenemos esta estructura de archivos:
Abrimos el archivo index.html y cambiamos el título y añadimos las referencias a esos dos archivos y al archivo de estilo, quedando de esta manera:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Desarrollo Web con KotlinJS</title> <link rel="stylesheet" href="estilo.css"> </head> <body> <script src="out/production/KotlinJS/lib/kotlin.js"></script> <script src="out/production/KotlinJS/KotlinJS.js"></script> </body> </html>
Y en el archivo kotlinJS.kt podemos crear un par de elementos html que añadimos a la etiqueta body:
import kotlin.browser.document fun main() { val h1 = document.createElement("h1") h1.textContent = "Hola KotlinJS!" val p1 = document.createElement("p") p1.textContent = "Mi primera web con Kotlin." document.body?.append(h1, p1) }
Y en el archivo estilo.css establecemos un estilo:
body { background-color : #d8da3d; font-family : arial; } h1 { font-size : 36pt; font-family : verdana, arial; text-align : center; color: white; background-color : teal; padding: 10%; } p { font-size : 16pt; font-family : arial,helvetica; font-weight : normal; color: teal; }
Volvemos a reconstruir con Build Project y desde el archivo index abrimos un navegador para ver el resultado (en la esquina superior derecha aparecen los iconos de los navegadores configurados, o alternativamente desde View -> Open in Browser; en caso de pulsar sobre un navegador no instalado, se abre la ventana de advertencia Browser Error, y pulsando sobre Fix abrimos una ventana para editar los navegadores). Así se ve en el navegador:
Comentarios
Publicar un comentario