Davide Cerbo - Kotlin loves React - Codemotion Milan 2018

Kotlin loves React
Davide Cerbo
Software Architect @ E.m.m. Informatica
Milan | November 29 - 30, 2018

Davide Cerbo
15+ years as developer
DevDay Community Leader
@davide_cerbo
https://medium.com/@davidecerbo

Kotlin is a statically-typed programming
language that runs on the Java Virtual Machine
and also can be compiled to JavaScript source
code or uses the LLVM compiler infrastructure.

https://dzone.com/articles/why-learn-kotlin-infographic
Predicatability not performance:https://www.youtube.com/watch?v=ExkNNsDn6Vg
Since 2010 (2012): KOTLIN!
100% interoperable
with Java ☕
~40% less lines of
code than Java 🍀
Easy to learn, if you
know Java 📚
JetBrains 🚀
It’s safe 👮
Apache 2 ⛺
PerformancePredictability 👍

May 2018
ThoughtWorks suggests to adopt Kotlin in its
Technlogy Radar
https://www.thoughtworks.com/radar/languages-and-frameworks/kotlin
May
2017
Nov
2017
May
2018
TrialAsses Adopt

My first API with Ktor
fun main(args: Array<String>) {
val server = embeddedServer(Netty, 8080) {
install(ContentNegotiation) {
jackson { enable(SerializationFeature.INDENT_OUTPUT) // Pretty Prints the JSON }
}
routing {
get("/greetings") {
call.respond(Greetings().sayGreetings())
}
}
}
server.start(wait = true)
}

Greetings
actual class Greetings {
actual fun sayGreetings(): String {
return "Hello from JVM world!!!"
}
}

KotlinJS can!
● No longer experimental since 1.1.0
● Can run anywhere where JS runs
● Can interoperate with JS
● Can reuse code
● Can use the same Kotlin/JVM IDE

React
A JavaScript library for
building user interfaces.
The V in MVC

Components, not templates.
Re-render, don’t mutate.
Virtual DOM is simple and fast

Kotlin React Wrapper
https://github.com/JetBrains/kotlin-wra
ppers/blob/master/kotlin-react/src/mai
n/kotlin/react/React.kt

Kotlin (experimental) Multiplatform
https://github.com/gbaldeck/react-js-jv
m-kotlin-multiplatform

Demo!!!
https://github.com/jest
y/kotlin-loves-react

Main
import app.*
import kotlinext.js.*
import react.dom.*
import kotlin.browser.*
fun main(args: Array<String>) {
requireAll(require.context("src", true, js("/.css$/")))
render(document.getElementById("root")) {
app()
}
}

Components
class Welcome :
RComponent<RProps,
RState>() {

State & Props
interface WelcomeProps : RProps {
var name: String
}
interface WelcomeState : RState {
var color: String
}

Components with state & props
class Welcome :
RComponent<WelcomeProps,
WelcomeState>() {

Render
override fun RBuilder.render() {
div {
+"Hello, ${props.name} - ${state.color}"
button {
+"Click me ${props.name}"
attrs {
onClickFunction = {
setState { color = "red" }
} } } }
}
https://kotlinlang.org/docs/reference/type-safe-builders.html
Weird! This pass this

Style
import kotlinext.js.js
//...
div {
attr.title = “Hello”
//Not typesafe, js body function must be a constant
attr.style= js { color: “red” }
//no constant issue
jsStyle { color = “red” }
}
//...

Routing
hashRouter {
switch {
route("/", IndexComponent::class, exact = true)
route("/about", AboutComponent::class, exact = true)
}
}
//Link
routeLink("/about") { +"About" }

fun dynamicExample() {
val a: dynamic = js("{ foo: function () { console.log(Hi!')} }")
a.foo()
a.bar() //Uncaught TypeError: a.bar is not a function
}

fun externalExample() {
val e = E()
e.foo()
//e.bar() //Compile time error!!!
}
external class E {
fun foo()
}
//helloworld.js
var E = function(){
this.foo = function () {
console.log('Hello world! (external)')
} }

fun actualExpectExample() {
val ea = EA()
ea.foo()
}
expect class EA {
fun foo()
}
//in a JS project
actual class EA {
fun foo() { println("Hello from JS!") }
}
//in a JVM project
actual class EA {
fun foo() { println("Hello from JVM!") }
}

if (typeof kotlin === 'undefined') {
throw new Error("Error loading module 'codemotion'. Its dependency 'kotlin'
was not found. Please, check whether 'kotlin' is loaded prior to 'github'.");
}
var github = function (_, Kotlin) {
'use strict';
var println = Kotlin.kotlin.io.println_s8jyv4$;
var Kind_CLASS = Kotlin.Kind.CLASS;
function dynamicExample() {
var a = {foo: function () {
console.log('Hello world! (dynamic)');
}};
a.foo();
}
function externalExample() {
var e = new E();
e.foo();

(Auto)references
● https://github.com/jesty/kotlin-fossavotabona
● https://github.com/jesty/reactiveredis

Dynamic Vs. Static typed
Static: Types checked before run-time
Dynamic: Types checked on the fly, during execution

Typescript Vs. KotlinJs
TypeScript is a
superset of
Javascript.
Kotlin aims to be
full-stack for creating
apps.
https://www.slant.co/versus/378/1543/~typescript_vs_kotlin
https://discuss.kotlinlang.org/t/feedback-on-our-migration-from-typescript-to-kotlin/2578

The end!https://twitter.com/davide_cerbo

let's talk?
let’s talk?
http://devday.it

Davide Cerbo - Kotlin loves React - Codemotion Milan 2018

More Related Content

What's hot (20)

Similar to Davide Cerbo - Kotlin loves React - Codemotion Milan 2018 (20)

More from Codemotion (20)

Recently uploaded (20)

Davide Cerbo - Kotlin loves React - Codemotion Milan 2018