Tweet
Tweet

Slide 1

Slide 1 text

Using Kotlin JS @JakeWharton and Kotlin Native on Android

Slide 2

Slide 2 text

Kotlin Multiplatform

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

.apk

Slide 11

Slide 11 text

.apk .dex

Slide 12

Slide 12 text

.apk .dex

Slide 13

Slide 13 text

.apk .js

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

American Red Cross Payment to $redcross

Slide 19

Slide 19 text

American Red Cross Payment to $redcross

Slide 20

Slide 20 text

American Red Cross Payment to $redcross Donation

Slide 21

Slide 21 text

American Red Cross Payment to $redcross Donation ~1 day

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

1 - 10,000+ payments per user

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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…

Slide 31

Slide 31 text

"Payment to {cashtag}"

Slide 32

Slide 32 text

"Payment to {cashtag}" "Donation to {cashtag}"

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

{"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"}

Slide 37

Slide 37 text

{"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"}

Slide 38

Slide 38 text

{"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

Slide 39

Slide 39 text

{"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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

&

Slide 48

Slide 48 text

*.kt *.class

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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) }

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

&

Slide 63

Slide 63 text

& *.kt

Slide 64

Slide 64 text

& *.kt

Slide 65

Slide 65 text

& *.kt

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

interface CoolStuff { suspend fun doIt() }

Slide 69

Slide 69 text

interface CoolStuff { suspend fun doIt() }

Slide 70

Slide 70 text

interface CoolStuff { suspend fun doIt() } .class

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

American Red Cross Donation to $redcross

Slide 85

Slide 85 text

├── 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

Slide 86

Slide 86 text

├── 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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

├── 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

Slide 89

Slide 89 text

├── 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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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") } } }

Slide 93

Slide 93 text

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) } } }

Slide 94

Slide 94 text

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) } } }

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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)) } }

Slide 98

Slide 98 text

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)) } }

Slide 99

Slide 99 text

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)) } }

Slide 100

Slide 100 text

├── 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

Slide 101

Slide 101 text

├── 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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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') }

Slide 105

Slide 105 text

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...

Slide 106

Slide 106 text

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...

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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() } } } }

Slide 111

Slide 111 text

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() } } }

Slide 112

Slide 112 text

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() } } }

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

((o) Duktape

Slide 118

Slide 118 text

((o) Duktape QuickJS

Slide 119

Slide 119 text

((o) Duktape QuickJS

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

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" + "};");

Slide 122

Slide 122 text

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);

Slide 123

Slide 123 text

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);

Slide 124

Slide 124 text

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);

Slide 125

Slide 125 text

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);

Slide 126

Slide 126 text

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);

Slide 127

Slide 127 text

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);

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

├── 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

Slide 133

Slide 133 text

(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 _; }));

Slide 134

Slide 134 text

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 _; }));

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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 _; }));

Slide 139

Slide 139 text

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 _; }));

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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() }

Slide 143

Slide 143 text

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() }

Slide 144

Slide 144 text

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() }

Slide 145

Slide 145 text

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() }

Slide 146

Slide 146 text

No content

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

No content

Slide 149

Slide 149 text

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() }

Slide 150

Slide 150 text

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() }

Slide 151

Slide 151 text

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)

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

No content

Slide 155

Slide 155 text

No content

Slide 156

Slide 156 text

No content

Slide 157

Slide 157 text

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 { // ... }

Slide 158

Slide 158 text

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 { // ... }

Slide 159

Slide 159 text

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 { // ... }

Slide 160

Slide 160 text

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 { // ... }

Slide 161

Slide 161 text

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 { // ... }

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

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

Slide 164

Slide 164 text

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

Slide 165

Slide 165 text

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

Slide 166

Slide 166 text

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

Slide 167

Slide 167 text

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

Slide 168

Slide 168 text

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

Slide 169

Slide 169 text

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

Slide 170

Slide 170 text

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) }

Slide 171

Slide 171 text

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) }

Slide 172

Slide 172 text

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

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

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

Slide 177

Slide 177 text

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

Slide 178

Slide 178 text

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

Slide 179

Slide 179 text

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

Slide 180

Slide 180 text

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

Slide 181

Slide 181 text

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

Slide 182

Slide 182 text

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

Slide 183

Slide 183 text

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

Slide 184

Slide 184 text

No content

Slide 185

Slide 185 text

No content

Slide 186

Slide 186 text

No content

Slide 187

Slide 187 text

No content

Slide 188

Slide 188 text

&

Slide 189

Slide 189 text

& *.kt

Slide 190

Slide 190 text

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

Slide 191

Slide 191 text

Using Kotlin JS @JakeWharton and Kotlin Native on Android