$30 off During Our Annual Pro Sale. View Details »

Using Kotlin/JS and Kotlin/Native on Android (Droidcon NYC 2019)

Using Kotlin/JS and Kotlin/Native on Android (Droidcon NYC 2019)

Kotlin's compiler backends, JVM, JS, and native, are each often associated with one platform: Android, the web, and iOS, respectively. But nothing about these three backends require that they be used on multiple platforms. Android is one of the few places where we have the potential to use all three!

This talk will explore using Kotlin/JS and Kotlin/Native in an Android app. First, we'll look at the motivations for why you might want to compile Kotlin to JS or native on Android. We'll cover the tools and libraries which will be necessary for integration into an app. Finally, we'll talk about the positive and negative architectural implications of using multiple Kotlin backends in your app.

Video: coming soon

Jake Wharton
PRO

August 26, 2019
Tweet

More Decks by Jake Wharton

Other Decks in Programming

Transcript

  1. Using Kotlin JS
    @JakeWharton
    and Kotlin Native
    on Android

    View Slide

  2. Kotlin Multiplatform

    View Slide

  3. Kotlin Multiplatform !=
    Kotlin/JVM Kotlin/Native Kotlin/JS

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. .apk

    View Slide

  11. .apk
    .dex

    View Slide

  12. .apk
    .dex

    View Slide

  13. .apk
    .js

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. American Red Cross
    Payment to $redcross

    View Slide

  19. American Red Cross
    Payment to $redcross

    View Slide

  20. American Red Cross
    Payment to $redcross
    Donation

    View Slide

  21. American Red Cross
    Payment to $redcross
    Donation
    ~1 day

    View Slide

  22. American Red Cross
    Payment to $redcross
    Donation
    ~1 day
    2 - 3 days

    View Slide

  23. American Red Cross
    Payment to $redcross
    Donation
    ~1 day
    2 - 3 days
    4 - 10 days

    View Slide

  24. View Slide

  25. 1 - 10,000+ payments per user

    View Slide

  26. 1 - 10,000+ payments per user
    20+ million users

    View Slide

  27. 1 - 10,000+ payments per user
    20+ million users
    10 - 20 changes per year

    View Slide

  28. 1 - 10,000+ payments per user
    20+ million users
    10 - 20 changes per year
    1-5 KB per payment

    View Slide

  29. 1 - 10,000+ payments per user
    20+ million users
    10 - 20 changes per year
    1-5 KB per payment
    20 - 100TB year

    View Slide

  30. 1 - 10,000+ payments per user
    20+ million users
    10 - 20 changes per year
    1-5 KB per payment
    20 - 100TB year
    But no localization…

    View Slide

  31. "Payment to {cashtag}"

    View Slide

  32. "Payment to {cashtag}"
    "Donation to {cashtag}"

    View Slide

  33. "Payment to {cashtag}"
    "Donation to {cashtag}"
    No logic updates…

    View Slide

  34. "Payment to {cashtag}"
    "Donation to {cashtag}"
    No logic updates…
    Manual localization…

    View Slide

  35. View Slide

  36. {"id":"Lgh13IUG7f6","amount":
    137,"currency":"USD","sender":
    {"id":"2q3u9bUG8f6","username":"jake","display_name":"Jake
    Wharton","is_non_profit":false},"recipient":
    {"id":"h98FUH87gwe","username":"redcross","display_name":"
    American Red
    Cross","is_non_profit":true},"date":"2018-10-29T15:22:21"}

    View Slide

  37. {"id":"Lgh13IUG7f6","amount":
    137,"currency":"USD","sender":
    {"id":"2q3u9bUG8f6","username":"jake","display_name":"Jake
    Wharton","is_non_profit":false},"recipient":
    {"id":"h98FUH87gwe","username":"redcross","display_name":"
    American Red
    Cross","is_non_profit":true},"date":"2018-10-29T15:22:21"}
    {"payment_line_1":"American Red
    Cross","payment_line_2":"Donation to
    $redcross","payment_line_3":"$1.37","payment_line_4":"Oct
    29, 2018 at 3:22PM"}

    View Slide

  38. {"id":"Lgh13IUG7f6","amount":
    137,"currency":"USD","sender":
    {"id":"2q3u9bUG8f6","username":"jake","display_name":"Jake
    Wharton","is_non_profit":false},"recipient":
    {"id":"h98FUH87gwe","username":"redcross","display_name":"
    American Red
    Cross","is_non_profit":true},"date":"2018-10-29T15:22:21"}
    {"payment_line_1":"American Red
    Cross","payment_line_2":"Donation to
    $redcross","payment_line_3":"$1.37","payment_line_4":"Oct
    29, 2018 at 3:22PM"}
    if (payment.recipient.is_non_profit
    && payment.sender.is_florida_man) {
    return "Donation to %s"
    }
    return "Payment to %s

    View Slide

  39. {"id":"Lgh13IUG7f6","amount":
    137,"currency":"USD","sender":
    {"id":"2q3u9bUG8f6","username":"jake","display_name":"Jake
    Wharton","is_non_profit":false},"recipient":
    {"id":"h98FUH87gwe","username":"redcross","display_name":"
    American Red
    Cross","is_non_profit":true},"date":"2018-10-29T15:22:21"}
    {"payment_line_1":"American Red
    Cross","payment_line_2":"Donation to
    $redcross","payment_line_3":"$1.37","payment_line_4":"Oct
    29, 2018 at 3:22PM"}
    if (payment.recipient.is_non_pro
    && payment.sender.is_florida
    return "Donation to %s"
    }
    return "Payment to %s

    View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. &

    View Slide

  48. *.kt *.class

    View Slide

  49. *.kt *.class
    *.js
    *.so

    View Slide

  50. *.kt *.class
    *.js
    *.so

    View Slide

  51. *.kt *.class
    *.js
    *.so
    *.kt
    *.kt
    *.kt

    View Slide

  52. *.kt *.class
    *.js
    *.so
    *.kt
    *.kt
    *.kt

    View Slide

  53. *.kt *.class
    *.js
    *.so
    *.kt
    *.kt
    *.kt

    View Slide

  54. interface UserService {
    @GET("/user/{id}")
    suspend fun user(@Path("id") id: Long): User
    @POST("/user/{id}/image")
    suspend fun updateUserImage(
    @Path("id") id: Long,
    @Body image: RequestBody)
    }

    View Slide

  55. interface UserService {
    @GET("/user/{id}")
    suspend fun user(@Path("id") id: Long): User
    @POST("/user/{id}/image")
    suspend fun updateUserImage(
    @Path("id") id: Long,
    @Body image: RequestBody)
    }
    *.kt

    View Slide

  56. interface UserService {
    @GET("/user/{id}")
    suspend fun user(@Path("id") id: Long): User
    @POST("/user/{id}/image")
    suspend fun updateUserImage(
    @Path("id") id: Long,
    @Body image: RequestBody)
    }
    interface List : Collection {
    val size: Int
    fun contains(element: E): Boolean
    fun get(index: Int): E
    fun iterator(): Iterator
    }
    *.kt

    View Slide

  57. interface UserService {
    @GET("/user/{id}")
    suspend fun user(@Path("id") id: Long): User
    @POST("/user/{id}/image")
    suspend fun updateUserImage(
    @Path("id") id: Long,
    @Body image: RequestBody)
    }
    *.kt

    View Slide

  58. interface UserService {
    @GET("/user/{id}")
    suspend fun user(@Path("id") id: Long): User
    @POST("/user/{id}/image")
    suspend fun updateUserImage(
    @Path("id") id: Long,
    @Body image: RequestBody)
    }
    Retrofit

    View Slide

  59. interface UserService {
    @GET("/user/{id}")
    suspend fun user(@Path("id") id: Long): User
    @POST("/user/{id}/image")
    suspend fun updateUserImage(
    @Path("id") id: Long,
    @Body image: RequestBody)
    }
    Retrofit
    InMemoryUserService

    View Slide

  60. interface UserService {
    @GET("/user/{id}")
    suspend fun user(@Path("id") id: Long): User
    @POST("/user/{id}/image")
    suspend fun updateUserImage(
    @Path("id") id: Long,
    @Body image: RequestBody)
    }
    Retrofit
    InMemoryUserService
    FS
    DB
    P2P
    RAM
    HTTP

    View Slide

  61. View Slide

  62. &

    View Slide

  63. & *.kt

    View Slide

  64. & *.kt

    View Slide

  65. & *.kt

    View Slide

  66. & *.kt interface CoolStuff {
    fun doIt()
    }

    View Slide

  67. & *.kt interface CoolStuff {
    fun doIt()
    }
    class SomeCoolStuff {
    override fun doIt() {
    // ...
    }
    }
    Retrofit

    View Slide

  68. interface CoolStuff {
    suspend fun doIt()
    }

    View Slide

  69. interface CoolStuff {
    suspend fun doIt()
    }

    View Slide

  70. interface CoolStuff {
    suspend fun doIt()
    } .class

    View Slide

  71. interface CoolStuff {
    suspend fun doIt()
    } .class
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }

    View Slide

  72. interface CoolStuff {
    suspend fun doIt()
    } .class
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }

    View Slide

  73. interface CoolStuff {
    suspend fun doIt()
    } .class
    .class
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }

    View Slide

  74. interface CoolStuff {
    suspend fun doIt()
    } .class
    .class
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }

    View Slide

  75. interface CoolStuff {
    suspend fun doIt()
    } .class
    .js .class .so
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }

    View Slide

  76. interface CoolStuff {
    suspend fun doIt()
    } .class
    .js .class .so
    JS Bridge
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }

    View Slide

  77. interface CoolStuff {
    suspend fun doIt()
    } .class
    .js
    JNI Bridge
    .class .so
    JS Bridge
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }

    View Slide

  78. interface CoolStuff {
    suspend fun doIt()
    }
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }
    .class
    .js
    JNI Bridge
    .class .so
    JS Bridge

    View Slide

  79. interface CoolStuff {
    suspend fun doIt()
    }
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }
    .class
    .js
    JNI Bridge
    .class .so
    JS Bridge

    View Slide

  80. interface CoolStuff {
    suspend fun doIt()
    }
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }
    .class
    .js
    JNI Bridge
    .class .so
    JS Bridge

    View Slide

  81. interface CoolStuff {
    suspend fun doIt()
    } .class
    .js
    JNI Bridge
    .class .so
    JS Bridge
    class SomeCoolStuff {
    override suspend fun doIt() {
    // ...
    }
    }

    View Slide

  82. View Slide

  83. View Slide

  84. American Red Cross
    Donation to $redcross

    View Slide

  85. ├── payment-rendering/
    │ ├── api/
    │ │ ├── src/
    │ │ │ └── commonMain/
    │ │ │ └── kotlin/
    │ │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ │ └── PaymentRenderer.kt
    │ │ └── build.gradle
    │ │
    │ ├── src/
    │ │ └── commonMain/
    │ │ └── kotlin/
    │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ └── PaymentRendererImpl.kt
    │ └── build.gradle

    ├── sample/
    │ └── ...

    ├── build.gradle
    └── settings.gradle

    View Slide

  86. ├── payment-rendering/
    │ ├── api/
    │ │ ├── src/
    │ │ │ └── commonMain/
    │ │ │ └── kotlin/
    │ │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ │ └── PaymentRenderer.kt
    │ │ └── build.gradle
    │ │
    │ ├── src/
    │ │ └── commonMain/
    │ │ └── kotlin/
    │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ └── PaymentRendererImpl.kt
    │ └── build.gradle

    ├── sample/
    │ └── ...

    ├── build.gradle
    └── settings.gradle

    View Slide

  87. package com.example.dcnyc2019.payment.rendering
    interface PaymentRenderer {
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }

    View Slide

  88. ├── payment-rendering/
    │ ├── api/
    │ │ ├── src/
    │ │ │ └── commonMain/
    │ │ │ └── kotlin/
    │ │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ │ └── PaymentRenderer.kt
    │ │ └── build.gradle
    │ │
    │ ├── src/
    │ │ └── commonMain/
    │ │ └── kotlin/
    │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ └── PaymentRendererImpl.kt
    │ └── build.gradle

    ├── sample/
    │ └── ...

    ├── build.gradle
    └── settings.gradle

    View Slide

  89. ├── payment-rendering/
    │ ├── api/
    │ │ ├── src/
    │ │ │ └── commonMain/
    │ │ │ └── kotlin/
    │ │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ │ └── PaymentRenderer.kt
    │ │ └── build.gradle
    │ │
    │ ├── src/
    │ │ └── commonMain/
    │ │ └── kotlin/
    │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ └── PaymentRendererImpl.kt
    │ └── build.gradle

    ├── sample/
    │ └── ...

    ├── build.gradle
    └── settings.gradle

    View Slide

  90. package com.example.dcnyc2019.payment.rendering
    class PaymentRendererImpl : PaymentRenderer {
    override fun secondLine(tag: String, isNonProfit: Boolean): String {
    }
    }

    View Slide

  91. package com.example.dcnyc2019.payment.rendering
    class PaymentRendererImpl : PaymentRenderer {
    override fun secondLine(tag: String, isNonProfit: Boolean): String {
    return buildString {
    }
    }
    }

    View Slide

  92. package com.example.dcnyc2019.payment.rendering
    class PaymentRendererImpl : PaymentRenderer {
    override fun secondLine(tag: String, isNonProfit: Boolean): String {
    return buildString {
    append(if (isNonProfit) "Donation" else "Payment")
    }
    }
    }

    View Slide

  93. package com.example.dcnyc2019.payment.rendering
    class PaymentRendererImpl : PaymentRenderer {
    override fun secondLine(tag: String, isNonProfit: Boolean): String {
    return buildString {
    append(if (isNonProfit) "Donation" else "Payment")
    append(" to $")
    append(tag)
    }
    }
    }

    View Slide

  94. package com.example.dcnyc2019.payment.rendering
    class PaymentRendererImpl : PaymentRenderer {
    override fun secondLine(tag: String, isNonProfit: Boolean): String {
    return buildString {
    append(if (isNonProfit) "Donation" else "Payment")
    append(" to $")
    append(tag)
    }
    }
    }

    View Slide

  95. package com.example.dcnyc2019.payment.rendering
    class PaymentRenderingImplTest {
    }

    View Slide

  96. package com.example.dcnyc2019.payment.rendering
    class PaymentRenderingImplTest {
    private val impl = PaymentRendererImpl()
    }

    View Slide

  97. package com.example.dcnyc2019.payment.rendering
    import kotlin.test.Test
    import kotlin.test.assertEquals
    class PaymentRenderingImplTest {
    private val impl = PaymentRendererImpl()
    @Test fun payment() {
    assertEquals("Payment to \$alec",
    impl.secondLine("alec", isNonProfit = false))
    }
    }

    View Slide

  98. package com.example.dcnyc2019.payment.rendering
    import kotlin.test.Test
    import kotlin.test.assertEquals
    class PaymentRenderingImplTest {
    private val impl = PaymentRendererImpl()
    @Test fun payment() {
    assertEquals("Payment to \$alec",
    impl.secondLine("alec", isNonProfit = false))
    }
    @Test fun donation() {
    assertEquals("Donation to \$redcross",
    impl.secondLine("redcross", isNonProfit = true))
    }
    }

    View Slide

  99. package com.example.dcnyc2019.payment.rendering
    import kotlin.test.Test
    import kotlin.test.assertEquals
    class PaymentRenderingImplTest {
    private val impl = PaymentRendererImpl()
    @Test fun payment() {
    assertEquals("Payment to \$alec",
    impl.secondLine("alec", isNonProfit = false))
    }
    @Test fun donation() {
    assertEquals("Donation to \$redcross",
    impl.secondLine("redcross", isNonProfit = true))
    }
    }

    View Slide

  100. ├── payment-rendering/
    │ ├── api/
    │ │ ├── src/
    │ │ │ └── commonMain/
    │ │ │ └── kotlin/
    │ │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ │ └── PaymentRenderer.kt
    │ │ └── build.gradle
    │ │
    │ ├── src/
    │ │ └── commonMain/
    │ │ └── kotlin/
    │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ └── PaymentRendererImpl.kt
    │ └── build.gradle

    ├── sample/
    │ └── ...

    ├── build.gradle
    └── settings.gradle

    View Slide

  101. ├── payment-rendering/
    │ ├── api/
    │ │ ├── src/
    │ │ │ └── commonMain/
    │ │ │ └── kotlin/
    │ │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ │ └── PaymentRenderer.kt
    │ │ └── build.gradle
    │ │
    │ ├── src/
    │ │ └── commonMain/
    │ │ └── kotlin/
    │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ └── PaymentRendererImpl.kt
    │ └── build.gradle

    ├── sample/
    │ └── ...

    ├── build.gradle
    └── settings.gradle

    View Slide

  102. dependencies {
    implementation deps.kotlin.stdlib.jdk8
    implementation deps.androidx.appcompat
    }

    View Slide

  103. dependencies {
    implementation deps.kotlin.stdlib.jdk8
    implementation deps.androidx.appcompat
    implementation project(':payment-rendering:api')
    }

    View Slide

  104. dependencies {
    implementation deps.kotlin.stdlib.jdk8
    implementation deps.androidx.appcompat
    implementation project(':payment-rendering:api')
    // Java bytecode impl embedded directly in dex like any other class.
    implementation project(':payment-rendering')
    }

    View Slide

  105. dependencies {
    implementation deps.kotlin.stdlib.jdk8
    implementation deps.androidx.appcompat
    implementation project(':payment-rendering:api')
    // Java bytecode impl embedded directly in dex like any other class.
    implementation project(':payment-rendering')
    }
    // TODO embed JS...
    // TODO embed native...

    View Slide

  106. dependencies {
    implementation deps.kotlin.stdlib.jdk8
    implementation deps.androidx.appcompat
    implementation project(':payment-rendering:api')
    // Java bytecode impl embedded directly in dex like any other class.
    implementation project(':payment-rendering')
    }
    // TODO embed JS...
    // TODO embed native...

    View Slide

  107. class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    }
    }

    View Slide

  108. class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = MainBinding.inflate(layoutInflater)
    setContentView(binding.root)
    }
    }

    View Slide

  109. class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = MainBinding.inflate(layoutInflater)
    setContentView(binding.root)
    binding.run.setOnClickListener {
    }
    }
    }

    View Slide

  110. class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = MainBinding.inflate(layoutInflater)
    setContentView(binding.root)
    binding.run.setOnClickListener {
    val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> TODO()
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }
    }
    }
    }

    View Slide

  111. class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = MainBinding.inflate(layoutInflater)
    setContentView(binding.root)
    binding.run.setOnClickListener {
    val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> TODO()
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }
    binding.output.text = """
    ${impl.secondLine("alec", false)}
    ${impl.secondLine("redcross", true)}
    """.trimIndent()
    }
    }
    }

    View Slide

  112. class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = MainBinding.inflate(layoutInflater)
    setContentView(binding.root)
    binding.run.setOnClickListener {
    val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> TODO()
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }
    binding.output.text = """
    ${impl.secondLine("alec", false)}
    ${impl.secondLine("redcross", true)}
    """.trimIndent()
    }
    }
    }

    View Slide

  113. View Slide

  114. View Slide

  115. View Slide

  116. View Slide

  117. ((o)
    Duktape

    View Slide

  118. ((o)
    Duktape
    QuickJS

    View Slide

  119. ((o)
    Duktape
    QuickJS

    View Slide

  120. View Slide

  121. interface Utf8 {
    String fromHex(String hex);
    }
    // Connect our interface to a JavaScript object called Utf8.
    Utf8 utf8 = duktape.get("Utf8", Utf8.class);
    // Call into the JavaScript object to decode a string.
    String greeting = utf8.fromHex("EC9588EB8595ED9598EC84B8EC9A9421");
    Log.d("Greeting", greeting);
    // Note that Duktape.dec returns a Buffer, we must convert it to a String return value.
    duktape.evaluate(""
    + "var Utf8 = {\n"
    + " fromHex: function(v) { return String(Duktape.dec('hex', v)); }\n"
    + "};");

    View Slide

  122. interface Utf8 {
    String fromHex(String hex);
    }
    duktape.evaluate(""
    + "var Utf8 = {\n"
    + " fromHex: function(v) { return String(Duktape.dec('hex', v)); }\n"
    + "};");
    // Connect our interface to a JavaScript object called Utf8.
    Utf8 utf8 = duktape.get("Utf8", Utf8.class);
    // Call into the JavaScript object to decode a string.
    String greeting = utf8.fromHex("EC9588EB8595ED9598EC84B8EC9A9421");
    Log.d("Greeting", greeting);

    View Slide

  123. interface Utf8 {
    String fromHex(String hex);
    }
    duktape.evaluate(""
    + "var Utf8 = {\n"
    + " fromHex: function(v) { return String(Duktape.dec('hex', v)); }\n"
    + "};");
    // Connect our interface to a JavaScript object called Utf8.
    Utf8 utf8 = duktape.get("Utf8", Utf8.class);
    // Call into the JavaScript object to decode a string.
    String greeting = utf8.fromHex("EC9588EB8595ED9598EC84B8EC9A9421");
    Log.d("Greeting", greeting);

    View Slide

  124. interface Utf8 {
    String fromHex(String hex);
    }
    duktape.evaluate(""
    + "var Utf8 = {\n"
    + " fromHex: function(v) { return String(Duktape.dec('hex', v)); }\n"
    + "};");
    // Connect our interface to a JavaScript object called Utf8.
    Utf8 utf8 = duktape.get("Utf8", Utf8.class);
    // Call into the JavaScript object to decode a string.
    String greeting = utf8.fromHex("EC9588EB8595ED9598EC84B8EC9A9421");
    Log.d("Greeting", greeting);

    View Slide

  125. interface Utf8 {
    String fromHex(String hex);
    }
    duktape.evaluate(""
    + "var Utf8 = {\n"
    + " fromHex: function(v) { return String(Duktape.dec('hex', v)); }\n"
    + "};");
    // Connect our interface to a JavaScript object called Utf8.
    Utf8 utf8 = duktape.get("Utf8", Utf8.class);
    // Call into the JavaScript object to decode a string.
    String greeting = utf8.fromHex("EC9588EB8595ED9598EC84B8EC9A9421");
    Log.d("Greeting", greeting);

    View Slide

  126. interface Utf8 {
    String fromHex(String hex);
    }
    duktape.evaluate(""
    + "var Utf8 = {\n"
    + " fromHex: function(v) { return String(Duktape.dec('hex', v)); }\n"
    + "};");
    // Connect our interface to a JavaScript object called Utf8.
    Utf8 utf8 = duktape.get("Utf8", Utf8.class);
    // Call into the JavaScript object to decode a string.
    String greeting = utf8.fromHex("EC9588EB8595ED9598EC84B8EC9A9421");
    Log.d("Greeting", greeting);

    View Slide

  127. interface Utf8 {
    String fromHex(String hex);
    }
    duktape.evaluate(""
    + "var Utf8 = {\n"
    + " fromHex: function(v) { return String(Duktape.dec('hex', v)); }\n"
    + "};");
    // Connect our interface to a JavaScript object called Utf8.
    Utf8 utf8 = duktape.get("Utf8", Utf8.class);
    // Call into the JavaScript object to decode a string.
    String greeting = utf8.fromHex("EC9588EB8595ED9598EC84B8EC9A9421");
    Log.d("Greeting", greeting);

    View Slide

  128. ├── payment-rendering/
    │ ├── api/
    │ │ └── ...
    │ │
    │ ├── src/
    │ │ └── commonMain/
    │ │ └── kotlin/
    │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ └── PaymentRendererImpl.kt
    │ └── build.gradle

    ├── sample/
    │ └── ...

    ├── build.gradle
    └── settings.gradle

    View Slide

  129. apply plugin: 'org.jetbrains.kotlin.multiplatform'
    kotlin {
    jvm()
    }

    View Slide

  130. apply plugin: 'org.jetbrains.kotlin.multiplatform'
    kotlin {
    jvm()
    js {
    nodejs()
    }
    }

    View Slide

  131. apply plugin: 'org.jetbrains.kotlin.multiplatform'
    kotlin {
    jvm()
    js {
    nodejs()
    }
    }

    View Slide

  132. ├── payment-rendering/
    │ ├── api/
    │ │ └── ...
    │ │
    │ ├── build/
    │ │ └── libs/
    │ │ ├── payment-rendering-js.jar
    │ │ └── payment-rendering-jvm.jar
    │ ├── src/
    │ │ └── commonMain/
    │ │ └── kotlin/
    │ │ └── com.example.dcnyc2019.payment.rendering/
    │ │ └── PaymentRendererImpl.kt
    │ └── build.gradle

    ├── sample/
    │ └── ...

    ├── build.gradle
    └── settings.gradle

    View Slide

  133. (function (root, factory) {
    if (typeof define === 'function' && define.amd)
    define(['exports', 'kotlin', 'DroidconNYC2019-api'], factory);
    else if (typeof exports === 'object')
    factory(module.exports, require('kotlin'), require('DroidconNYC2019-api'));
    else {
    if (typeof kotlin === 'undefined') {
    throw new Error("Error loading module 'DroidconNYC2019-payment-rendering'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior t
    }
    if (typeof this['DroidconNYC2019-api'] === 'undefined') {
    throw new Error("Error loading module 'DroidconNYC2019-payment-rendering'. Its dependency 'DroidconNYC2019-api' was not found. Please, check whether 'DroidconNYC2
    }
    root['DroidconNYC2019-payment-rendering'] = factory(typeof this['DroidconNYC2019-payment-rendering'] === 'undefined' ? {} : this['DroidconNYC2019-payment-rendering'
    }
    }(this, function (_, Kotlin, $module$DroidconNYC2019_api) {
    'use strict';
    var Kind_CLASS = Kotlin.Kind.CLASS;
    var PaymentRenderer = $module$DroidconNYC2019_api.com.example.dcnyc2019.payment.rendering.PaymentRenderer;
    var StringBuilder_init = Kotlin.kotlin.text.StringBuilder_init;
    function PaymentRendererImpl() {
    }
    PaymentRendererImpl.prototype.secondLine_ivxn3r$ = function (tag, isNonProfit) {
    var $receiver = StringBuilder_init();
    $receiver.append_gw00v9$(isNonProfit ? 'Donation' : 'Payment');
    $receiver.append_gw00v9$(' to $');
    $receiver.append_gw00v9$(tag);
    return $receiver.toString();
    };
    PaymentRendererImpl.$metadata$ = {
    kind: Kind_CLASS,
    simpleName: 'PaymentRendererImpl',
    interfaces: [PaymentRenderer]
    };
    var package$com = _.com || (_.com = {});
    var package$example = package$com.example || (package$com.example = {});
    var package$dcnyc2019 = package$example.dcnyc2019 || (package$example.dcnyc2019 = {});
    var package$payment = package$dcnyc2019.payment || (package$dcnyc2019.payment = {});
    var package$rendering = package$payment.rendering || (package$payment.rendering = {});
    package$rendering.PaymentRendererImpl = PaymentRendererImpl;
    Kotlin.defineModule('DroidconNYC2019-payment-rendering', _);
    return _;
    }));

    View Slide

  134. var StringBuilder_init = Kotlin.kotlin.text.StringBuilder_init;
    function PaymentRendererImpl() {
    }
    PaymentRendererImpl.prototype.secondLine_ivxn3r$ = function (tag, isNonProfit) {
    var $receiver = StringBuilder_init();
    $receiver.append_gw00v9$(isNonProfit ? 'Donation' : 'Payment');
    $receiver.append_gw00v9$(' to $');
    $receiver.append_gw00v9$(tag);
    return $receiver.toString();
    };
    PaymentRendererImpl.$metadata$ = {
    kind: Kind_CLASS,
    simpleName: 'PaymentRendererImpl',
    interfaces: [PaymentRenderer]
    };
    var package$com = _.com || (_.com = {});
    var package$example = package$com.example || (package$com.example = {});
    var package$dcnyc2019 = package$example.dcnyc2019 || (package$example.dcnyc2019 =
    var package$payment = package$dcnyc2019.payment || (package$dcnyc2019.payment = {}
    var package$rendering = package$payment.rendering || (package$payment.rendering =
    package$rendering.PaymentRendererImpl = PaymentRendererImpl;
    Kotlin.defineModule('DroidconNYC2019-payment-rendering', _);
    return _;
    }));

    View Slide

  135. package com.example.dcnyc2019.payment.rendering
    interface PaymentRenderer {
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }

    View Slide

  136. package com.example.dcnyc2019.payment.rendering
    import kotlin.js.JsName
    interface PaymentRenderer {
    @JsName("secondLine")
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }

    View Slide

  137. package com.example.dcnyc2019.payment.rendering
    import kotlin.js.JsName
    interface PaymentRenderer {
    @JsName("secondLine")
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }

    View Slide

  138. var StringBuilder_init = Kotlin.kotlin.text.StringBuilder_init;
    function PaymentRendererImpl() {
    }
    PaymentRendererImpl.prototype.secondLine_ivxn3r$ = function (tag, isNonProfit) {
    var $receiver = StringBuilder_init();
    $receiver.append_gw00v9$(isNonProfit ? 'Donation' : 'Payment');
    $receiver.append_gw00v9$(' to $');
    $receiver.append_gw00v9$(tag);
    return $receiver.toString();
    };
    PaymentRendererImpl.$metadata$ = {
    kind: Kind_CLASS,
    simpleName: 'PaymentRendererImpl',
    interfaces: [PaymentRenderer]
    };
    var package$com = _.com || (_.com = {});
    var package$example = package$com.example || (package$com.example = {});
    var package$dcnyc2019 = package$example.dcnyc2019 || (package$example.dcnyc2019 =
    var package$payment = package$dcnyc2019.payment || (package$dcnyc2019.payment = {}
    var package$rendering = package$payment.rendering || (package$payment.rendering =
    package$rendering.PaymentRendererImpl = PaymentRendererImpl;
    Kotlin.defineModule('DroidconNYC2019-payment-rendering', _);
    return _;
    }));

    View Slide

  139. var StringBuilder_init = Kotlin.kotlin.text.StringBuilder_init;
    function PaymentRendererImpl() {
    }
    PaymentRendererImpl.prototype.secondLine = function (tag, isNonProfit) {
    var $receiver = StringBuilder_init();
    $receiver.append_gw00v9$(isNonProfit ? 'Donation' : 'Payment');
    $receiver.append_gw00v9$(' to $');
    $receiver.append_gw00v9$(tag);
    return $receiver.toString();
    };
    PaymentRendererImpl.$metadata$ = {
    kind: Kind_CLASS,
    simpleName: 'PaymentRendererImpl',
    interfaces: [PaymentRenderer]
    };
    var package$com = _.com || (_.com = {});
    var package$example = package$com.example || (package$com.example = {});
    var package$dcnyc2019 = package$example.dcnyc2019 || (package$example.dcnyc2019 =
    var package$payment = package$dcnyc2019.payment || (package$dcnyc2019.payment = {}
    var package$rendering = package$payment.rendering || (package$payment.rendering =
    package$rendering.PaymentRendererImpl = PaymentRendererImpl;
    Kotlin.defineModule('DroidconNYC2019-payment-rendering', _);
    return _;
    }));

    View Slide

  140. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> TODO()
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }

    View Slide

  141. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> {
    val duktape = Duktape.create()
    }
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }
    TODO()

    View Slide

  142. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> {
    val duktape = Duktape.create()
    duktape.evaluate(assets.open("payment-rendering.js").use {
    it.readBytes().toString(UTF_8)
    })
    }
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }

    View Slide

  143. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> {
    val duktape = Duktape.create()
    duktape.evaluate(assets.open("payment-rendering.js").use {
    it.readBytes().toString(UTF_8)
    })
    duktape.evaluate("""
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent())
    }
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }

    View Slide

  144. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> {
    val duktape = Duktape.create()
    duktape.evaluate(assets.open("payment-rendering.js").use {
    it.readBytes().toString(UTF_8)
    })
    duktape.evaluate("""
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent())
    duktape.get("instance", PaymentRenderer::class.java)
    }
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }

    View Slide

  145. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> {
    val duktape = Duktape.create()
    duktape.evaluate(assets.open("payment-rendering.js").use {
    it.readBytes().toString(UTF_8)
    })
    duktape.evaluate("""
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent())
    duktape.get("instance", PaymentRenderer::class.java)
    }
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }

    View Slide

  146. View Slide

  147. View Slide

  148. View Slide

  149. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> {
    val duktape = Duktape.create()
    duktape.evaluate(assets.open("payment-rendering.js").use {
    it.readBytes().toString(UTF_8)
    })
    duktape.evaluate("""
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent())
    duktape.get("instance", PaymentRenderer::class.java)
    }
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }

    View Slide

  150. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> {
    val duktape = Duktape.create()
    duktape.evaluate(assets.open("payment-rendering.js").use {
    it.readBytes().toString(UTF_8)
    })
    duktape.evaluate("""
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent())
    duktape.get("instance", PaymentRenderer::class.java)
    }
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }

    View Slide

  151. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> {
    hypotheticalKotlinJsLibrary.create()
    }
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }
    val duktape = Duktape.create()
    duktape.evaluate(assets.open("payment-rendering.js").use {
    it.readBytes().toString(UTF_8)
    })
    duktape.evaluate("""
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent())
    duktape.get("instance", PaymentRenderer::class.java)

    View Slide

  152. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> {
    hypotheticalKotlinJsLibrary.create()
    }
    binding.engineNative.isChecked -> TODO()
    else -> throw AssertionError()
    }

    View Slide

  153. val impl = when {
    binding.engineDex.isChecked -> PaymentRendererImpl()
    binding.engineJs.isChecked -> {
    hypotheticalKotlinJsLibrary.create()
    }
    binding.engineNative.isChecked -> PaymentRendererJni()
    else -> throw AssertionError()
    }
    TODO()

    View Slide

  154. View Slide

  155. View Slide

  156. View Slide

  157. interface PaymentRenderer {
    @JsName("secondLine")
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }
    class PaymentRendererImpl : PaymentRenderer {
    override fun secondLine(tag: String, isNonProfit: Boolean): String {
    return buildString {
    append(if (isNonProfit) "Donation" else "Payment")
    append(" to $")
    append(tag)
    }
    }
    }
    val jsBootstrap = """
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent()
    class PaymentRendererJni : PaymentRenderer {
    // ...
    }

    View Slide

  158. interface PaymentRenderer {
    @JsName("secondLine")
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }
    class PaymentRendererImpl : PaymentRenderer {
    override fun secondLine(tag: String, isNonProfit: Boolean): String {
    return buildString {
    append(if (isNonProfit) "Donation" else "Payment")
    append(" to $")
    append(tag)
    }
    }
    }
    val jsBootstrap = """
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent()
    class PaymentRendererJni : PaymentRenderer {
    // ...
    }

    View Slide

  159. interface PaymentRenderer {
    @JsName("secondLine")
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }
    class PaymentRendererImpl : PaymentRenderer {
    override fun secondLine(tag: String, isNonProfit: Boolean): String {
    return buildString {
    append(if (isNonProfit) "Donation" else "Payment")
    append(" to $")
    append(tag)
    }
    }
    }
    val jsBootstrap = """
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent()
    class PaymentRendererJni : PaymentRenderer {
    // ...
    }

    View Slide

  160. interface PaymentRenderer {
    @JsName("secondLine")
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }
    class PaymentRendererImpl : PaymentRenderer {
    override fun secondLine(tag: String, isNonProfit: Boolean): String {
    return buildString {
    append(if (isNonProfit) "Donation" else "Payment")
    append(" to $")
    append(tag)
    }
    }
    }
    val jsBootstrap = """
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent()
    class PaymentRendererJni : PaymentRenderer {
    // ...
    }

    View Slide

  161. interface PaymentRenderer {
    @JsName("secondLine")
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }
    class PaymentRendererImpl : PaymentRenderer {
    override fun secondLine(tag: String, isNonProfit: Boolean): String {
    return buildString {
    append(if (isNonProfit) "Donation" else "Payment")
    append(" to $")
    append(tag)
    }
    }
    }
    val jsBootstrap = """
    var instance = new this['DroidconNYC2019-payment-rendering'].
    com.example.dcnyc2019.payment.rendering.PaymentRendererImpl();
    """.trimIndent()
    class PaymentRendererJni : PaymentRenderer {
    // ...
    }

    View Slide

  162. interface PaymentRenderer {
    @JsName("secondLine")
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }

    View Slide

  163. interface PaymentRenderer {
    @JsName("secondLine")
    fun secondLine(tag: String, isNonProfit: Boolean): String
    }

    View Slide

  164. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }

    View Slide

  165. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    JS/Native Bridge

    View Slide

  166. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    JS/Native Bridge
    JS/Native Implementation

    View Slide

  167. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    JS/Native Bridge
    JS/Native Implementation

    View Slide

  168. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    JS/Native Bridge
    JS/Native Implementation

    View Slide

  169. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    JS/Native Bridge
    JS/Native Implementation

    View Slide

  170. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    interface UserService {
    @GET("/user/{id}")
    suspend fun user(@Path("id") id: Long): User
    @POST("/user/{id}/image")
    suspend fun updateUserImage(
    @Path("id") id: Long,
    @Body image: RequestBody)
    }

    View Slide

  171. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    interface UserService {
    @GET("/user/{id}")
    suspend fun user(@Path("id") id: Long): User
    @POST("/user/{id}/image")
    suspend fun updateUserImage(
    @Path("id") id: Long,
    @Body image: RequestBody)
    }

    View Slide

  172. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    kotlinx.serialization

    View Slide

  173. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    kotlinx.serialization
    JS/Native Bridge

    View Slide

  174. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    kotlinx.serialization
    kotlinx.serialization
    JS/Native Bridge

    View Slide

  175. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    kotlinx.serialization
    kotlinx.serialization
    JS/Native Bridge
    JS/Native Implementation

    View Slide

  176. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    kotlinx.serialization
    kotlinx.serialization kotlinx.serialization
    JS/Native Bridge
    JS/Native Implementation

    View Slide

  177. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    kotlinx.serialization
    kotlinx.serialization kotlinx.serialization
    JS/Native Bridge
    JS/Native Implementation

    View Slide

  178. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    kotlinx.serialization
    kotlinx.serialization
    kotlinx.serialization
    kotlinx.serialization
    JS/Native Bridge
    JS/Native Implementation

    View Slide

  179. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    kotlinx.serialization
    kotlinx.serialization
    kotlinx.serialization
    kotlinx.serialization
    JS/Native Bridge
    JS/Native Implementation

    View Slide

  180. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }
    kotlinx.serialization
    JS / native bridge
    JS / native implementation
    kotlinx.serialization
    JS/Native Bridge
    JS/Native Implementation

    View Slide

  181. interface PaymentRenderer {
    @JsName("render")
    fun render(payment: Payment): PaymentRendering
    }

    View Slide

  182. interface PaymentRenderer {
    @JsName("render")
    suspend fun render(payment: Payment): PaymentRendering
    }

    View Slide

  183. interface PaymentRenderer {
    @JsName("render")
    suspend fun render(payment: Payment): PaymentRendering
    }

    View Slide

  184. View Slide

  185. View Slide

  186. View Slide

  187. View Slide

  188. &

    View Slide

  189. & *.kt

    View Slide

  190. & *.kt interface CoolStuff {
    fun doIt()
    }
    class SomeCoolStuff {
    override fun doIt() {
    // ...
    }
    }
    JS bridge
    Native bridge

    View Slide

  191. Using Kotlin JS
    @JakeWharton
    and Kotlin Native
    on Android

    View Slide