Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Kotlin/JS KUG Munich

Kotlin/JS KUG Munich

Slides from my talk about Kotlin/JS, what it is and how you can use it from the Kotlin User Group Munich July 2018 meetup.

This is basically an updated version of my talk Kotlin/JS I gave at KUGHH a few months back: https://speakerdeck.com/jossiwolf/js

Jossi Wolf

June 20, 2018
Tweet

More Decks by Jossi Wolf

Other Decks in Programming

Transcript

  1. AGENDA - INTRODUCTION - WHY KOTLIN? - GETTING STARTED -

    THE THING WITH JAVA - USING NODEJS - CREATING A WEBSITE - CONCLUSION @jossiwolf
  2. STATICALLY TYPED DYNAMICALLY TYPED var hello = "Hello" hello =

    5 ❌ let hello = "Hello" hello = 5 ✅ @jossiwolf
  3. buildscript { ext.kotlin_version = '1.2.31' repositories { mavenCentral() } dependencies

    { classpath "$kotlin_gradle_plugin:$kotlin_version" } } apply plugin: 'kotlin2js' repositories { mavenCentral() } dependencies { compile "$kotlin_stdlib_js:$kotlin_version" } @jossiwolf
  4. compileKotlin2Js.kotlinOptions { sourceMap = true //Generate a source-map for debug

    sourceMapEmbedSources = "always" //And embed the source } @jossiwolf
  5. compileKotlin2Js.kotlinOptions { sourceMap = true //Generate a source-map for debug

    sourceMapEmbedSources = "always" //And embed the source moduleKind = "plain" //The module loader to be used } @jossiwolf
  6. compileKotlin2Js.kotlinOptions { sourceMap = true //Generate a source-map for debug

    sourceMapEmbedSources = "always" //And embed the source moduleKind = "plain" //The module loader to be used outputFile = "web/index.js" //Output file that we use } @jossiwolf
  7. apply plugin: 'kotlin2js' buildscript { repositories { … } dependencies

    { classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" } } … repositories { mavenCentral() jcenter() maven { url "https://dl.bintray.com/kotlin/kotlin-eap" } } dependencies { compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" compile "org.jetbrains.kotlinx:kotlinx-html-js:$kotlinx_html_version" testCompile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version" } @jossiwolf
  8. apply plugin: 'org.jetbrains.kotlin.frontend' apply plugin: 'kotlin2js' buildscript { repositories {

    … } dependencies { classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" classpath "org.jetbrains.kotlin:kotlin-frontend-plugin:$kotlin_frontend_plugin" } } … repositories { mavenCentral() jcenter() maven { url "https://dl.bintray.com/kotlin/kotlin-eap" } } dependencies { compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" compile "org.jetbrains.kotlinx:kotlinx-html-js:$kotlinx_html_version" testCompile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version" } @jossiwolf
  9. <!DOCTYPE html> <html lang="en"> <head> <title>Kotlin & JS <3</title> </head>

    <body> </body> <!-- The Kotlin libraries --> <script src="web/kotlin.js"></script> <script src="web/kotlinx-html-js.js"></script> <!-- Make sure this is at the bottom --> <script src="web/index.js"></script> </html> @jossiwolf
  10. <!DOCTYPE html> <html lang="en"> <head> <title>Kotlin & JS <3</title> </head>

    <body> </body> <!– Everything bundled through webpack --> <script type="text/javascript" src="main.bundle.js"></script> </html> @jossiwolf
  11. <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
  12. verticalLayout { val name = editText() button("Say Hello") { onClick

    { toast("Hello, ${name.text}!") } } } @jossiwolf
  13. 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
  14. 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
  15. 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
  16. card { title = "Card Title" subtitle = "Card Subtitle"

    text = "Hello KUG Munich!" } @jossiwolf
  17. card { title = "Card Title" subtitle = "Card Subtitle"

    text = "Hello Kotlin Meetup!" action { text = "Action!" } elevation = 6 } @jossiwolf
  18. fun higherOrderFunction(block: (String) -> String): String { return block("Hello from

    up here") } The function takes a string as parameter @jossiwolf
  19. fun higherOrderFunction(block: (String) -> String): String { return block("Hello from

    up here") } The function takes a string as parameter @jossiwolf
  20. fun higherOrderFunction(block: (String) -> String): String { return block("Hello from

    up here") } The function takes a string as parameter Its return type is also String @jossiwolf
  21. fun higherOrderFunction(block: (String) -> String): String { return block("Hello from

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

    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
  23. card { title = "Card Title" subtitle = "Card Subtitle"

    text = "Hello Kotlin Meetup!" } @jossiwolf
  24. card { title = "Hello" subtitle = "Subtitle" } {

    "title_xesk5l$_0": "Hello", "subtitle_x7q17f$_0": "Subtitle", "actions": [] } @jossiwolf
  25. 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
  26. 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