Why we ditched JavaScript for Kotlin/JS

You might think that Kotlin is the programming language of Android… Well, it's only partially true, and that's not even Kotlin's raison d'être. Kotlin 1.0 (2016) had experimental support for JavaScript, and 6 years later, we're sticking to it on the WEB, in the backend, on Android of course, and now on (native) iOS as well!

Come to learn why you might, or might not want to follow suit. This talk will be both an up to date introduction to Kotlin, and sharing our experience with it on the WEB.

Transcript

1. Why we ditched JavaScript for Kotlin/JS? FOSDEM 2023 - JavaScript DevRoom Presented by Louis CAD, Google Developer Expert for Kotlin
2. Why we ditched JavaScript for Kotlin/JS? Please answer
3. Why we ditched JavaScript for Kotlin/JS? Wrong answers only • Because Kotlin is cool 😎 • Because of the hype 🏝 • Because we love to hate JavaScript • Because JavaScript was designed in just 7 days while Kotlin was in 6 years
4. What can we do on the WEB with Kotlin?
5. Demo of play.data2viz.io
6. Demo of play.data2viz.io Forces balls + events Ripped Curtains Wind simulation 3 Forces documentation
7. Demo of charts.kt on play.data2viz.io Stacked Area chart Charts: Bubble Chart Charts.kt color themes
8. What can we do on the WEB with Kotlin? • A lot of complicated things • Manipulate the DOM • Draw on Canvas • Write readable and shareable business logic • Sky is the limit
9. Why we ditched JavaScript for Kotlin/JS! 3 answers. 1. Safety and reliability ✅ 2. Language design ✍ • Concise syntax • Type safety • Cancellable async programming (aka. coroutines) • Many other features… 3. Code sharing 🤗 • Share what you want, native interoperability
10. Why we ditched JavaScript for Kotlin/JS! 3. Code sharing 🤗 

11. Let's start with #3 : Code sharing
12. Let's start with #3 : Code sharing Because sharing is caring…?
13. Code sharing Because sharing is caring…?
14. Code sharing Which platforms does Kotlin run on?
15. Code sharing Which platforms does Kotlin compile to?
16. Kotlin compiles to these platforms • JVM (server, desktop, libraries…) • JavaScript (browser, nodeJS) • Android (& Wear OS) within ART (≃JVM) • Native • iOS, watchOS, macOS, tvOS • Linux • Windows • Android NDK
17. Kotlin runs natively
18. Kotlin runs natively on nearly all devices.
19. Kotlin is not all about Kotlin.
20. Interoperability! Kotlin is not all about Kotlin.
21. interoperability! Kotlin is not all about Kotlin.
22. Kotlin has direct interoperability
23. Kotlin has direct interoperability with the following programming languages • Java • JavaScript • TypeScript (since Kotlin 1.8) • Objective-C • Swift • C
24. Kotlin has direct interoperability with the following programming languages • Java (both ways) • JavaScript (both ways, some quirks) • TypeScript (both ways, some quirks) • Objective-C (both ways, some quirks) • Swift (through Objective-C, & also with dedicated community plugins) • C (both ways, some quirks)
25. What direct interop means • Not reliant on third party plugins updates like in Cordova, Flutter, etc. • Use iOS, Android, JS, Java, & C APIs like they were built in Kotlin • Call new Kotlin code from Java, like it was built in Java* • Call new Kotlin code from Swift, like it was built in Swift* • Call new Kotlin code from JavaScript, like it was built in JavaScript* * limitations might apply
26. That makes Kotlin the most interoperable programming language
27. Why we ditched JavaScript for Kotlin/JS! 3 answers. 1. Safety and reliability ✅ 2. Language design ✍ • Concise syntax • Type safety • Cancellable async programming (aka. coroutines) • Many other features… 3. Code sharing 🤗 • Share what you want, native interoperability
28. Why we ditched JavaScript for Kotlin/JS! 3 answers. 1. Safety and reliability ✅ 
 
 

30. Why we ditched JavaScript for Kotlin/JS! 3 answers. 1. Safety and reliability ✅ 
 
 

31. Safety and reliability
32. Safety and reliability Reason number one.
33. JavaScript be like Your users
34. Your users Applies to other dynamic typed programming languages (Bash, Python, etc…). Missing bolts, wing off? No problem Let me try to f ly it anyway. Let me try to run it anyway. JavaScript be like
35. Kotlin be like
36. Kotlin be like
37. No users. Bolt required 👆 No takeo ff possible. Kotlin be like
38. No users. Wrong bolt type 👉 No takeo ff possible. Kotlin be like
39. No users. Expected a pilot seat but got an economy seat. No takeo ff possible. Kotlin be like
40. You don't have to f ly the plane to realize…
41. Compiling isn't just about browsing the WEB while waiting. You don't have to f ly the plane to realize… …that one wing wasn't attached securely.
42. Compiling can actually save you time! Compiled language means less tests to write
43. What should we do on the WEB with Kotlin? • WEB apps • Webpages/websites with lots of dynamic logic that can't move server-side • Anything that doesn't have to be less than 300kB (i.e. landing page) • Generate html with Kotlin code (even not Kotlin/JS) • Libraries for Kotlin consumers • Complex libraries for Typescript/JavaScript consumers
44. Why we ditched JavaScript for Kotlin/JS! 3 answers. 1. Safety and reliability ✅ 2. Language design ✍ • Concise syntax • Type safety • Cancellable async programming (aka. coroutines) • Many other features… 3. Code sharing 🤗 • Share what you want, native interoperability
45. Why we ditched JavaScript for Kotlin/JS! 2. Language design ✍ • Concise syntax • Type safety • Cancellable async programming (aka. coroutines) • Many other features… 
 
 

46. Basics
47. Variables val attendees = 23
48. Variables val attendees = 23 attendees++
49. Variables val attendees = 23 attendees++ // compilation error Immutable reference
50. Variables var attendees = 23 attendees++ Mutable reference
51. Variables var attendees = 23 attendees++ // ok Mutable reference
52. Functions fun welcomeMessage(name: String): String { 
 return "Welcome back " + name 
 }
53. Functions fun welcomeMessage(name: String): String = "Welcome back " + name
54. Functions fun welcomeMessage(name: String) = "Welcome back " + name
55. Classes class User
56. Classes class User()
57. Classes class User(val firstName: String, val lastName: String, val middleName: String = "")
58. Classes class User( val firstName: String, val lastName: String, val middleName: String = "" )
59. Classes data class User( val firstName: String, val lastName: String, val middleName: String = "" )
60. Classes open class User( val firstName: String, val lastName: String, val middleName: String = "" )
61. Classes open class Vehicle(val name: String) 
 
 class Car(name: String) : Vehicle(name)
62. Classes open class Vehicle(val name: String) 
 
 class Car(name: String) : Vehicle(name), Comparable<Car> { 
 override fun compareTo(other: Car): Int { 
 TODO() 
 } 
 }
63. Classes open class Vehicle(val name: String) 
 
 class Car(name: String) : Vehicle(name), Comparable<Car> { 
 override fun compareTo(other: Car) = TODO() 
 }
64. Language features
65. Null safety • Nullable? types • NPE safe equals NPE: NullPointerException (similar to TypeError null/unde f ined in JS)
66. Null safety var greeting: String = "Hello World!" 
 greeting = null // compilation error
67. Null safety var greeting: String = "Hello World!" 
 greeting = null
68. Null safety var greeting: String? = "Hello World!" 
 greeting = null
69. Null safety var greeting: String? = "Hello World!" 
 greeting = null // ok
70. Null safety var greeting: String? = "Hello World!" 
 greeting = null // ok 
 greeting.length // compilation error
71. Null safety var greeting: String? = "Hello World!" 
 greeting.length // compilation error
72. Null safety var greeting: String? = "Hello World!" 
 greeting?.length // ok Safe call operator
73. Null safety var greeting: String? = "Hello World!" 
 greeting!!.length Non null assertion
74. Null safety var greeting: String? = "Hello World!" 
 greeting = null greeting!!.length // compiles throws NullPointerException
75. Null safety var greeting: String? = "Hello World!" 
 val chars: Int = greeting?.length // error
76. Null safety var greeting: String? = "Hello World!" 
 val chars: Int = greeting?.length ?: 0 //ok Elvis operator
77. Null safety assert("Bonjour" == "Bonjour")
78. Null safety assert("Bonjour" == "Bonjour") assert “Bonjour".equals("Bonjour");
79. Null safety assert("Bonjour" === "Bonjour") assert “Bonjour” == "Bonjour";
80. Null safety nullableValue == otherNullableValue No NullPointerException!
81. Properties • Similar to f ields, but include getter and setters • Can be delegated (Google for "Kotlin delegated properties")
82. Properties var thing1: Something = someInitialValue 
 val thing2: Whatever = Whatever()
83. Properties var thing1 = someInitialValue 
 val thing2 = Whatever()
84. Properties var stringRepresentation: String 
 get() = this.toString() 
 set(value) { 
 setDataFromString(value) // Parses the string and // assigns values to other properties. 
 }
85. Extension functions • Static methods (no dynamic/surprising resolution) • “instance-method like” syntax • Works even on f inal classes (default in Kotlin)
86. Extension functions if (3.isEven()) println("I don't believe you!") fun Int.isEven() = this % 2 == 0
87. Extension functions if (3.isEven()) println("I don't believe you!") if (9.isMultipleOf(3)) println("For sure!") fun Int.isMultipleOf(other: Int) = this % other == 0 fun Int.isEven() = isMultipleOf(2)
88. Extension functions if (3.isEven()) println("I don't believe you!") if (9 isMultipleOf 3) println("For sure!") infix fun Int.isMultipleOf(other: Int) = this % other == 0 fun Int.isEven() = isMultipleOf(2)
89. Extension functions inline fun Int.hasFlag(flag: Int) = flag and this == flag 
 inline fun Int.withFlag(flag: Int) = this or flag 
 inline fun Int.minusFlag(flag: Int) = this and flag.inv() if (0b1011.hasFlag(0b0001)) println("I think so!") if (0xF003.hasFlag(0x0001)) println("Yes too") if (0x0000.hasFlag(0x0001)) println("Impossible")
90. Higher-order functions Kézako? A function that takes another function as a parameter (or multiple ones)
91. Higher-order functions fun logEntryAndExit( name: String, block: () -> Unit ) { }
92. Higher-order functions fun logEntryAndExit( name: String, block: () -> Unit ) { } logEntryAndExit( )
93. Higher-order functions fun logEntryAndExit( name: String, block: () -> Unit ) { } logEntryAndExit( "Calling fancy code", )
94. Higher-order functions fun logEntryAndExit( name: String, block: () -> Unit ) { } logEntryAndExit( "Calling fancy code", { fancyCode() } )
95. Higher-order functions fun logEntryAndExit( name: String, block: () -> Unit ) { try { } finally { } } logEntryAndExit( "Calling fancy code", { fancyCode() } )
96. Higher-order functions fun logEntryAndExit( name: String, block: () -> Unit ) { try { println("Start: $name") } finally { println("End: $name") } } logEntryAndExit( "Calling fancy code", { fancyCode() } )
97. Higher-order functions fun logEntryAndExit( name: String, block: () -> Unit ) { try { println("Start: $name") block() } finally { println("End: $name") } } logEntryAndExit( "Calling fancy code", { fancyCode() } )
98. Higher-order functions inline fun logEntryAndExit( name: String, block: () -> Unit ) { try { println("Start: $name") block() } finally { println("End: $name") } } logEntryAndExit( "Calling fancy code", { fancyCode() } )
99. Higher-order functions inline fun logEntryAndExit( name: String, block: () -> Unit ) { try { println("Start: $name") block() } finally { println("End: $name") } } logEntryAndExit( name = "Calling fancy code", block = { fancyCode() } )
100. Higher-order functions inline fun logEntryAndExit( name: String, block: () -> Unit ) { try { println("Start: $name") block() } finally { println("End: $name") } } logEntryAndExit("Calling fancy code") { fancyCode() }
101. Lambdas The "anonymous" functions passed to higher-order functions • Can be inlined! Avoids unneeded memory allocation for better perfs.
102. Lambdas aka. anonymous functions inline fun logEntryAndExit( name: String, block: () -> Unit ) { try { println("Start: $name") block() } finally { println("End: $name") } } logEntryAndExit("Calling fancy code") { fancyCode() }
103. Lambdas aka. anonymous functions inline fun logEntryAndExit( name: String, block: () -> Unit ) { try { println("Start: $name") block() } finally { println("End: $name") } } logEntryAndExit( name = "Calling fancy code", block = { fancyCode() } )
104. Lambdas val numbers = intArrayOf(1, 2, 3, 4, 5) 
 numbers.filter { it % 2 == 0 }
105. when expression fun cases(obj: Any) { 
 when (obj) { 
 1 -> println("One") 
 "Hello" -> println("Greeting") 
 is Long -> println("Long") 
 !is String -> println("Not a string") 
 else -> println("Unknown") 
 } 
 }
106. String templates fun greet(name: String) { 
 println("Bonjour $name!") 
 }
107. String templates fun greet(name: String) { 
 println("Bonjour ${name.first().uppercase()}.!") 
 }
108. Built-in singletons • Lazy instantiation • No parameter • Can extend any class
109. Built-in singletons object Unit { 
 override fun toString() = "kotlin.Unit" 
 }
110. Smart casts fun getStringLength(obj: Any): Int? { 
 if (obj is String) 
 return obj.length // no cast to String is needed 
 return null 
 }
111. Kotlin killer feature? Besides best-in-class interop
112. Structured concurrency aka. coroutines, is Kotlin's killer feature
113. What are coroutines? • Saves you from callback hell • A way to write asynchronous code sequentially, without nested callbacks • Similar to async/await from JavaScript and other languages • Also Structured Concurrency
114. What is Structured Concurrency? • A system to prevent concurrency issues • Requires a parent scope to launch a new, concurrent coroutine • Propagates cancellation and crashes at the right place
115. How to get started? Best way to learn and leverage is to try and experiment • Open IntelliJ IDEA (Community Edition is enough) • New Project > Kotlin > Browser application • Learn Kotlin syntax and basics at kotl.in/learn • Learn about Kotlin for JavaScript at kotl.in/js • Learn about Kotlin Multiplatform at kotl.in/multiplatform • Learn about coroutines and structured concurrency at kotl.in/coroutines, with Google search, and by watching Roman Elizarov's talks
116. Questions, comments, ideas… Thank you for listening. LouisCAD on GitHub (social links on my pro fi le) Blog at blog.louiscad.com (you can subscribe) Kotlin