Kotlin/JS

/ @jossiwolf

Jossi Wolf Android Developer High School Student @jossiwolf

AGENDA - INTRODUCTION - WHY KOTLIN? - GETTING STARTED -
DIFFERENCES - USING NODEJS - CREATING A WEBSITE - CONCLUSION @jossiwolf

/ @jossiwolf

WHY KOTLIN? THE CASE AGAINST JAVASCRIPT @jossiwolf

STATICALLY TYPED DYNAMICALLY TYPED var hello = "Hello" hello =
5 ❌ let hello = "Hello" hello = 5 ✅ @jossiwolf

DEVELOPER HAPPINESS IS IMPORTANT! @jossiwolf

INTEROPERABILITY @jossiwolf

SCALABILITY @jossiwolf

CODE REUSE @jossiwolf

DIFFERENCES @jossiwolf

PACKAGE NAMES IN FILES ARE OPTIONAL @jossiwolf

NO JAVA APIs @jossiwolf

GETTING STARTED @jossiwolf

@jossiwolf

2. Wait for Gradle build to finish (⏳) @jossiwolf

@jossiwolf

buildscript { ext.kotlin_version = '1.2.10' repositories { mavenCentral() } dependencies
{ classpath "$kotlin_gradle_plugin:$kotlin_version" } } apply plugin: 'kotlin-js' repositories { mavenCentral() } dependencies { compile "$kotlin_stdlib_js:$kotlin_version" } @jossiwolf

compileKotlin2Js.kotlinOptions { sourceMap = true //Generate a source-map for debug
} @jossiwolf

sourceMapEmbedSources = "always" //And embed the source } @jossiwolf

sourceMapEmbedSources = "always" //And embed the source moduleKind = "plain" //The module loader to be used } @jossiwolf

sourceMapEmbedSources = "always" //And embed the source moduleKind = "plain" //The module loader to be used outputFile = "web/index.js" //Output file that we use } @jossiwolf

USING NODE.JS @jossiwolf

compileKotlin2Js.kotlinOptions { moduleKind = "commonjs" } @jossiwolf

fun main(args: Array<String>) { console.log("Hello from Kotlin!") } @jossiwolf

$ gradle build @jossiwolf

$ gradle build $ node node/index.js @jossiwolf

$ gradle build $ node node/index.js > Hello from Kotlin!
@jossiwolf

dynamic //„Disables“ type-safety @jossiwolf

dynamic //„Disables“ type-safety val hello: dynamic = "Hello" hello.whatever() hello.itDoesntMatter
@jossiwolf

external //This is defined externally @jossiwolf

external fun require(module: String): dynamic @jossiwolf

INTERACTING WITH THE DOM @jossiwolf

task assembleWeb(type: Sync) { configurations.compile.each { File file -> from(zipTree(file.absolutePath),
{ includeEmptyDirs = false include { fileTreeElement -> def path = fileTreeElement.path path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/")) } }) } from compileKotlin2Js.destinationDir into "${projectDir}/web" dependsOn classes } assemble.dependsOn assembleWeb @jossiwolf

document#getElementById @jossiwolf

document#getElementById document#getElementsByClassName @jossiwolf

document#getElementById document#getElementsByClassName // All the normally available @jossiwolf

div { } @jossiwolf

div { h1 { +"This is some text from Kotlin!"
} } @jossiwolf

document.body?.append { div { h1 { +"This is some text
from Kotlin!" } } } @jossiwolf

<!DOCTYPE html> <html lang="en"> <head> <title>Kotlin & JS <3</title> </head>
<body> </body>  <script src="web/kotlin.js"></script> <script src="web/kotlinx-html-js.js"></script>  <script src="web/index.js"></script> </html> @jossiwolf

@jossiwolf

<div class="mdc-card"> <section class="mdc-card__primary"> <h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1> <h2
class="mdc-card__subtitle">Subtitle here</h2> </section> <section class="mdc-card__supporting-text"> Some text goes here </section> <section class="mdc-card__actions"> <button class="mdc-button mdc-button--compact mdc-card__action"> Action 1 </button> <button class="mdc-button mdc-button--compact mdc-card__action"> Action 2 </button> </section> </div> @jossiwolf

DSL (DOMAIN SPECIFIC LANGUAGE) „BUILDERS ON STEROIDS“ @jossiwolf

verticalLayout { val name = editText() button("Say Hello") { onClick
{ toast("Hello, ${name.text}!") } } } @jossiwolf

div("mdc-card") { section("mdc-card__primary") { h1("mdc-card__title) { +"This is the title"
} h2("mdc-card__subtitle") { +"Subtitle" } } section("mdc-card__supporting-text") { +"This is the card's text" } } @jossiwolf

fun DIV.card(title: String, subtitle: String, text: String) { div("mdc-card") {
section("mdc-card__primary") { h1("mdc-card__title") { +title } h2("mdc-card__subtitle") { +subtitle } } section("mdc-card__supporting-text") { +text } } } @jossiwolf

document.create.div { card("Card Title", "Card Subtitle", "Card Text") } @jossiwolf

@jossiwolf

card { title = "Card Title" subtitle = "Card Subtitle"
text = "Hello Kotlin Meetup!„ } @jossiwolf

text = "Hello Kotlin Meetup!" action { text = "Action!" } elevation = 6 } @jossiwolf

HIGHER-ORDER FUNCTIONS @jossiwolf

fun higherOrderFunction(block: (String) -> String): String { return block("Hello from
up here") } @jossiwolf

up here") } The function takes a string as parameter @jossiwolf

up here") } The function takes a string as parameter Its return type is also String @jossiwolf

up here") } println(higherOrderFunction { it }) //Prints „Hello from up here“ The function takes a String as parameter Its return type is Also String @jossiwolf

up here") } println(higherOrderFunction { return@higherOrderFunction it }) //Prints „Hello from up here“ The function takes a String as parameter Its return type is Also String @jossiwolf

RECEIVERS @jossiwolf

text = "Hello Kotlin Meetup!" } @jossiwolf

class MaterialCardOptions { lateinit var title: String lateinit var subtitle:
String lateinit var text: String } @jossiwolf

fun card(block: MaterialCardOptions.() -> Unit) { val options = MaterialCardOptions().apply(block)
println(JSON.stringify(options)) } @jossiwolf

card { title = "Hello" subtitle = "Subtitle" } @jossiwolf

card { title = "Hello" subtitle = "Subtitle" } {
"title_xesk5l$_0": "Hello", "subtitle_x7q17f$_0": "Subtitle", "actions": [] } @jossiwolf

document.body?.append { div { } } @jossiwolf

fun DIV.card(block: MaterialCardOptions.() -> Unit) { val options = MaterialCardOptions().apply(block)
div("mdc-card") { section("mdc-card__primary") { h1 { classes = setOf("mdc-card__title") +options.title } h2("mdc-card__subtitle") { +options.subtitle } } section("mdc-card__supporting-text") { +options.text } } } @jossiwolf

document.body?.append { div { card { title = "Shiba Inu"
subtitle = "Japanese Dog Breed" text = "Shiba Inu, also known as Doge, is a Japanese dog breed." } } } @jossiwolf

SHOULD I USE IT? (IN PRODUCTION) @jossiwolf

NOT REALLY. @jossiwolf

medium.com/@jossiwolf twitter.com/jossiwolf github.com/jossiwolf speakerdeck.com/jossiwolf

Kotlin/JS

Kotlin/JS

More Decks by Kotlin User Group Hamburg

Other Decks in Programming

Featured

Transcript