Kotlin JavaScript

Avete mai sentito parlare di Kotlin? 🙂 Beh io sinceramente da poco, però forse adempie a più task di quello che realmente immaginiamo. C’è chi sostiene addirittura che spodesterà Java sullo sviluppo mobile vedremo 🙂 Però il suo ambizioso progetto, non si ferma solo ad abbattere Java, ma sbarcare anche sullo sviluppo web integrando sia un progetto web kotlin javascript sia lavorando assieme a Node.js, fantastico 🙂

Kotlin JavaScript

Kotlin JavaScript


Kotlin è un linguaggio di programmazione multi-paradigma, open source sviluppato non a caso dall’azienda di software JetBrains, la stessa che ha realizzato l’IDE IntelliJ IDEA.
Proverò quindi a realizzare un piccolo progettino web basato su kotlin javascript, utilizzando come IDE IntelliJ IDEA. Iniziamo.
Prima però di seguire questo tutorial, occorre configurare kotlin sulla nostra macchina, ad esempio io utilizzo Windows come S.O. quindi vi rimando a questo tutorial per l’installazione di Kotlin su di una macchina Windows – https://www.gianlucadivincenzo.it/java/kotlin-windows/.
Lo sviluppo con Kotlin per JavaScript prevede anche l’utilizzo di un altro interessante strumento che di sicuro avrete sentito parlare ed è Gradle.
Gradle è ispirato alle logiche di gestione delle dipendenze di Apache Maven, inoltre esso usa un DAG (grafo aciclico diretto) per la gestione dei processi da eseguire. Gradle è principlamente usato su piattaforma Java, C++, Groovy, ma anche Kotlin ha abbracciato la sua gestione delle dipendenze preferendolo a Maven, ancora troppo legato alla staticità del file xml.
Pertanto, sostandoci nel nostro IDE, inizio con il creare il progetto.

File -> New -> Project -> Gradle -> Kotlin(JavaScript)

Gradle Kotlin JavScript

Configurazione Gradle per Kotlin JavScript


Sempre in questa prima schermata, non dimenticate di flaggare il campo “Kotlin DSL build script”.
Nella schermata successiva inserire groupId e artifactId, ad esempio groupId org.example mentre example per artificatId, nonchè name e location, come ad esempio da immagine sottostante.
ArtificatId e groupId, progetto Kotlin

ArtificatId e groupId, progetto Kotlin


Quindi Finish.
Fatto ciò, dopo la Sync iniziale all’apertura del progetto, l’alberatura del progetto si dovrebbe presentare in maniera simile a quella riportata di seguito.
Kotlin project javascript after sync

Alberatura progetto dopo Sync di Kotlin


Il contenuto del file build.gradle.kts, dopo essere simile a quello riporto nello snippet appena sotto.

build.gradle.kts
plugins {
    id("org.jetbrains.kotlin.js") version "1.3.70"
}
 
group = "com.example"
version = "1.0-SNAPSHOT"
 
repositories {
    mavenCentral()
}
 
dependencies {
    implementation(kotlin("stdlib-js"))
}

Come possiamo notare, il puglin ‘org.jetbrains.kotlin.js’ in Gradle viene utilizzato per fornire supporto JavaScript per il nostro progetto.
Il plug-in si occupa anche della gestione di un ambiente del nostro ambiente YARN e webpack esponendo le funzionalità attraverso il DSL Gradle.
Bene, dopo la nuova Sync, abbiamo ultimato la configurazione, non limitiamoci a ciò vediamo anche come effettuare la RUN del nostro progettino semplificato.

Come da link, qui di seguito https://kotlinlang.org/docs/tutorials/javascript/running-kotlin-js.html potremmo effettuare la RUN sia mediante Node.js sia mediante browser, vedremo la seconda per avere un ambiente basico privo di ulteriori strumenti di sviluppo.
Dopo questi passaggi il wizard guidato, ha creato due file:

  • main.kt
  • index.html, al cui interno è incluso example.js(che prende il nome dal nostro progettino Kotlin JavaScript).

Il file html ha questo contenuto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>example</title>
    <script src="example.js"></script>
</head>
<body>
 
</body>
</html>

Mentre il file main.kt, questo:

import kotlin.browser.document
 
fun main() {
    document.write("Hello, world!")
}

Abbiamo quasi terminato, tornando nel nostro IDE, ci spostiamo nel TAB Terminal in basso, come da foto di seguito riportata.

gradlew run, Kotlin JavaScript

Launch gradlew run, esecuzione del progetto Kotlin JavaScript


Questo tab si posiziona sulla nostra folder di progetto su cui è installato il progetto Gradle, in questo terminale potremo invocare l’istruzione gradlew run per eseguire il nostro progetto sulla porta 8080, questa RUN scaricherà anche la dipendenza webpack necessaria per lo starting di Kotlin.
Spostandoci quindi nel browser all’URL localhost:8080, vedremo una pagina completamente bianca, con il nostro Hello World 🙂
Buon divertimento con Kotlin e JavaScript 🙂

Kotlin JavaScript ultima modidfica: 2020-05-11T17:21:52+02:00 da admin
Posted in: Java

By on 11 Maggio 2020

Tagged: , , , , , , , , ,