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

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