Tweet
Tweet

Slide 1

Slide 1 text

Full Stack Kotlin Guillermo Orellana @wiyarmir February 2019 Kotlin London

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

+ =

Slide 4

Slide 4 text

https://www.thinkgeek.com/product/e554/

Slide 5

Slide 5 text

#10YearChallenge https://www.pinterest.co.uk/pin/225813368792712452/

Slide 6

Slide 6 text

How to learn something?

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Goals •100% Kotlin •??? •Profit https://medium.com/elementaryos/all-aboard-the-meson-future-hype-train-2b6c478b6b9e

Slide 9

Slide 9 text

Keynotedex

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Web

Slide 12

Slide 12 text

KotlinJS + Kotlin Frontend Plugin

Slide 13

Slide 13 text

KotlinJS

Slide 14

Slide 14 text

dynamic https://www.joya.life/en/blog/the-power-of-kryptonite/

Slide 15

Slide 15 text

val a: dynamic = 3 a.`types?` .I.`haven't`.heard .that.name.`in`.years = "!"

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Kotlin Frontend Plugin

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

kotlinFrontend { downloadNodeJsVersion = "8.11.2" sourceMaps = false }

Slide 20

Slide 20 text

npm { dependency "react", "16.3.1" dependency "react-dom" dependency "react-router" dependency "react-router-dom" devDependency "babel-loader" devDependency "babel-core" devDependency "css-loader" devDependency "style-loader" devDependency "source-map-loader" }

Slide 21

Slide 21 text

webpackBundle { publicPath = "/frontend/" port = 8080 proxyUrl = "http: //localhost:9090/" sourceMapEnabled = true stats = "errors-only" }

Slide 22

Slide 22 text

./gradlew web:run > Task :web:nodejs-download UP-TO-DATE > Task :web:npm-preunpack UP-TO-DATE > Task :web:npm-configure > Task :web:npm-install UP-TO-DATE > Task :web:npm-index UP-TO-DATE > Task :web:npm-deps > Task :web:npm > Task :web:packages > Task :web:compileKotlin2Js > Task :web:compileJava NO-SOURCE > Task :web:processResources UP-TO-DATE > Task :web:classes > Task :web:compileTestKotlin2Js NO-SOURCE > Task :web:webpack-config UP-TO-DATE > Task :web:karma-config SKIPPED > Task :web:karma-start SKIPPED > Task :web:processTestResources NO-SOURCE > Task :web:runDceKotlinJs > Task :web:runDceTestKotlinJs NO-SOURCE > Task :web:webpack-run webpack started, see http: //localhost:8080/ > Task :web:run BUILD SUCCESSFUL in 9s 15 actionable tasks: 5 executed, 10 up-to-date ./gradlew web:run

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

React in Kotlin https://en.wikipedia.org/wiki/React_(JavaScript_library) +

Slide 25

Slide 25 text

Components

Slide 26

Slide 26 text

const Submission = (props) => (

{props.submission.title}

{props.submission.abstract}

{"View details"}
); // Usage

Slide 27

Slide 27 text

Rendered component

Slide 28

Slide 28 text

Asynchronous operations

Slide 29

Slide 29 text

fun fetchUserProfileFromId(userId: String) = promise { val user = userProfile(userId) setState { userProfile = user } } .catch { console.error(it) }

Slide 30

Slide 30 text

Backend

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

https://vertx.io/ https://spring.io/ http://ktor.io/

Slide 33

Slide 33 text

Ktor http://ktor.io/

Slide 34

Slide 34 text

"Easy to use, fun and asynchronous." http://ktor.io/

Slide 35

Slide 35 text

fun main(args: Array) { embeddedServer(Netty, 8080) { routing { get("/") { call.respondText("My Example Blog", ContentType.Text.Html) } } }.start(wait = true) } http://ktor.io/

Slide 36

Slide 36 text

class ApplicationPage : Template { val caption = Placeholder() val head = Placeholder<HEAD>() override fun HTML.apply() { head { meta { charset = "utf-8" } meta { name = "viewport" content = "width=device-width, initial-scale=1.0" } title { insert(caption) } insert(head) } body { div { id = "content" } script(src = "frontend/frontend.bundle.js") } } }

Slide 37

Slide 37 text

class KeynotedexPageContent : Template { val head = Placeholder() val bundle = Placeholder() override fun HTML.apply() { head { meta { charset = "utf-8" } meta { name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" } title { +"Keynotedex" } insert(head) link( rel = LinkRel.stylesheet, type = LinkType.textCss, href = "https: //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" ) { attributes["integrity"] = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" attributes["crossorigin"] = "anonymous" } } body { div { id = "content" } script(src = "https: //code.jquery.com/jquery-3.2.1.slim.min.js") { attributes["integrity"] = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" attributes["crossorigin"] = "anonymous" } script(src = "https: //cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js") { attributes["integrity"] = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" attributes["crossorigin"] = "anonymous" } script(src = "https: //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js") { attributes["integrity"] = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" attributes["crossorigin"] = "anonymous" } script { insert(bundle) } } } }

Slide 38

Slide 38 text

Don't overdose on builders

Slide 39

Slide 39 text

fun Route.index() { static("frontend") { resource("web.bundle.js") } accept(ContentType.Text.Html) { get { val model = mapOf( "jsbundle" to "/frontend/web.bundle.js" ) call.respond(FreeMarkerContent("index.ftl", model)) } } }

Slide 40

Slide 40 text

API Tests

Slide 41

Slide 41 text

@Test fun `when userId and password provided then user is created`() = testApp(mockStorage) { handleRequest(HttpMethod.Post, endpoint) { addHeader( HttpHeaders.ContentType, ContentType.Application.FormUrlEncoded.toString() ) setBody( listOf( "userId" to testId, "password" to testPassword ).formUrlEncode() ) }.apply { assertThat(response.status(), equalTo(HttpStatusCode.Created)) } }

Slide 42

Slide 42 text

Shared code

Slide 43

Slide 43 text

Kotlin Multiplatform common jvm android js native compile

Slide 44

Slide 44 text

Platform specific code actual class Foo actual constructor(val bar: String) { actual fun frob() { println("Frobbing the $bar") } } Native Common expect class Foo(bar: String) { fun frob() }

Slide 45

Slide 45 text

Platform specific module common common-jvm common-android common-js common-native expectedBy jvm android js native compile

Slide 46

Slide 46 text

kotlinx.serialization

Slide 47

Slide 47 text

@Serializable data class SubmissionResponse( val submission: Submission )

Slide 48

Slide 48 text

val submissionResponse = JSON.parse( responseText ) call.respond( JSON.stringify( SubmissionResponse() ) ) JSON Serialise Deserialise

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

val submissionResponse = JSON.parse( responseText ) Be careful with implicits

Slide 51

Slide 51 text

val submissionResponse = JSON.parse( SubmissionResponse ::class.serializer(), responseText ) Be careful with implicits

Slide 52

Slide 52 text

Reflection

Slide 53

Slide 53 text

val submissionResponse = JSON.parse( SubmissionResponse.serializer(), responseText ) Explicit serialiser

Slide 54

Slide 54 text

Deployment

Slide 55

Slide 55 text

$ git push heroku master

Slide 56

Slide 56 text

web: java \ -Dserver.port=$PORT \ $JAVA_OPTS \ -jar backend/build/libs /*-release.jar

Slide 57

Slide 57 text

task stage() { group "distribution" dependsOn(':backend:release') }

Slide 58

Slide 58 text

$ git push dokku master

Slide 59

Slide 59 text

Counting objects: 155, done. Delta compression using up to 36 threads. Compressing objects: 100% (50/50), done. Writing objects: 100% (89/89), 17.45 KiB | 0 bytes/s, done. Total 89 (delta 33), reused 75 (delta 19) remote: -----> Cleaning up ... remote: -----> Building keynotedex from herokuish ... remote: -----> Adding BUILD_ENV to build environment ... remote: -----> Gradle app detected remote: -----> Installing JDK 1.8 ... done remote: -----> Building Gradle app ... remote: -----> executing ./gradlew stage remote: To honour the JVM settings for this build a new JVM will be forked. Please consider using the daemon: https: //docs.gradle.org/4.10.2/userguide/gradle_daemon.html. remote: Daemon will be stopped at the end of the build stopping after processing remote: > Task :buildSrc:discoverMainScriptsExtensions remote: > Task :buildSrc:compileKotlin remote: > Task :buildSrc:compileJava NO-SOURCE remote: > Task :buildSrc:compileGroovy NO-SOURCE remote: > Task :buildSrc:processResources NO-SOURCE remote: > Task :buildSrc:classes UP-TO-DATE remote: > Task :buildSrc:inspectClassesForKotlinIC remote: > Task :buildSrc:jar remote: > Task :buildSrc:assemble remote: > Task :buildSrc:discoverTestScriptsExtensions remote: > Task :buildSrc:compileTestKotlin NO-SOURCE remote: > Task :buildSrc:compileTestJava NO-SOURCE remote: > Task :buildSrc:compileTestGroovy NO-SOURCE remote: > Task :buildSrc:processTestResources NO-SOURCE remote: > Task :buildSrc:testClasses UP-TO-DATE remote: > Task :buildSrc:test NO-SOURCE remote: > Task :buildSrc:check UP-TO-DATE remote: > Task :buildSrc:build remote: > Task :backend:clean UP-TO-DATE remote: > Task :backend:discoverMainScriptsExtensions remote: > Task :common:compileJava NO-SOURCE remote: > Task :common:compileKotlinCommon remote: > Task :common:processResources NO-SOURCE remote: > Task :common:classes remote: > Task :common:inspectClassesForKotlinIC remote: > Task :common:jar remote: > Task :common-jvm:discoverMainScriptsExtensions remote: > Task :common-jvm:compileKotlin remote: > Task :common-jvm:compileJava NO-SOURCE remote: > Task :common-jvm:processResources NO-SOURCE remote: > Task :common-jvm:classes UP-TO-DATE remote: > Task :common-jvm:inspectClassesForKotlinIC remote: > Task :common-jvm:jar remote: > Task :backend:compileKotlin remote: remote: w: /tmp/build/backend/src/main/kotlin/es/guillermoorellana/keynotedex/backend/Application.kt: (52, 13): This declaration is experimental and its usage should be marked with '@io.ktor.locations.KtorExperimentalLocationsAPI' or '@UseExperimental(io.ktor.locations.KtorExperimentalLocationsAPI ::class)' remote: w: /tmp/build/backend/src/main/kotlin/es/guillermoorellana/keynotedex/backend/Application.kt: (85, 9): This declaration is experimental and its usage should be marked with '@io.ktor.locations.KtorExperimentalLocationsAPI' or '@UseExperimental(io.ktor.locations.KtorExperimentalLocationsAPI ::class)'

Slide 60

Slide 60 text

remote: "id" : "Keynotedex", remote: # application.conf @ jar:file:/app/backend/build/libs/backend-0.0.1-SNAPSHOT-release.jar!/application.conf: 13 remote: "modules" : [ remote: # application.conf @ jar:file:/app/backend/build/libs/backend-0.0.1-SNAPSHOT-release.jar!/application.conf: 13 remote: "es.guillermoorellana.keynotedex.backend.ApplicationKt.keynotedex" remote: ] remote: }, remote: # application.conf @ jar:file:/app/backend/build/libs/backend-0.0.1-SNAPSHOT-release.jar!/application.conf: 2 remote: "deployment" : { remote: # application.conf @ jar:file:/app/backend/build/libs/backend-0.0.1-SNAPSHOT-release.jar!/application.conf: 7 remote: "autoreload" : true, remote: # env var ENVIRONMENT remote: "environment" : "production", remote: # env var PORT remote: "port" : "5000", remote: # application.conf @ jar:file:/app/backend/build/libs/backend-0.0.1-SNAPSHOT-release.jar!/application.conf: 8 remote: "watch" : [ remote: # application.conf @ jar:file:/app/backend/build/libs/backend-0.0.1-SNAPSHOT-release.jar!/application.conf: 8 remote: "keynotedex" remote: ] remote: }, remote: # Content hidden remote: "security" : " ***" remote: } remote: 2019-02-09 16:33:31.774 [main] DEBUG Keynotedex - Java Home: /app/.jdk remote: 2019-02-09 16:33:31.797 [main] DEBUG Keynotedex - Class Loader: sun.misc.Launcher$AppClassLoader@33909752: [/app/backend/build/libs/backend-0.0.1-SNAPSHOT-release.jar] remote: 2019-02-09 16:33:31.807 [main] INFO Keynotedex - No ktor.deployment.watch patterns match classpath entries, automatic reload is not active remote: 2019-02-09 16:33:34.270 [main] WARN Keynotedex - Populating db with mock data remote: 2019-02-09 16:33:35.991 [main] INFO Keynotedex - Responding at http: //0.0.0.0:5000 remote: 2019-02-09 16:33:35.993 [main] TRACE Keynotedex - Application started: io.ktor.application.Application@274872f8 remote: 2019-02-09 16:33:37.490 [nettyCallPool-4-1] TRACE Keynotedex - 200 OK: GET - / remote: 2019-02-09 16:33:37.576 [nettyCallPool-4-2] TRACE Keynotedex - 200 OK: GET - /logout remote: 2019-02-09 16:33:41.958 [nettyCallPool-4-3] TRACE Keynotedex - 200 OK: GET - /frontend/web.bundle.js remote: =====> end keynotedex web container output remote: -----> Running post-deploy remote: -----> Configuring keynotedex.wiyarmir.es ...(using built-in template) remote: -----> Creating https nginx.conf remote: -----> Running nginx-pre-reload remote: Reloading nginx remote: -----> Setting config vars remote: DOKKU_APP_RESTORE: 1 remote: -----> Found previous container(s) (5e0586566aa2) named keynotedex.web.1 remote: =====> Renaming container (5e0586566aa2) keynotedex.web.1 to keynotedex.web.1.1549730034 remote: =====> Renaming container (321dd6999ae1) cocky_ride to keynotedex.web.1 remote: -----> Attempting to run scripts.dokku.postdeploy from app.json (if defined) remote: -----> Shutting down old containers in 60 seconds remote: =====> 5e0586566aa204eb393e82496cb7d1a26d3f13471e81c95f559f01fb8788da22 remote: =====> Application deployed: remote: http: //keynotedex.wiyarmir.es remote: https: //keynotedex.wiyarmir.es remote: To [email protected]:keynotedex 8d2a091 ..abee039 master -> master

Slide 61

Slide 61 text

$ git push origin master $ git push dokku master

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

deploy-backend: docker: - image: buildpack-deps:trusty steps: - checkout - run: name: Deploy Master to Heroku command: | ssh-keyscan -H dev.wiyarmir.es >> ~/.ssh/known_hosts git push $HEROKU_URL master

Slide 64

Slide 64 text

$ git push origin master

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Runtime

Slide 67

Slide 67 text

Backend code Frontend code Kotlinx.serialization JAR JS bundle ktor React Data transfer objects https://commons.wikimedia.org/wiki/File:Google_Chrome_icon_(September_2014).svg https://github.com/dokku/dokku

Slide 68

Slide 68 text

Backend code Frontend code Kotlinx.serialization JAR JS bundle ktor React Data transfer objects https://commons.wikimedia.org/wiki/File:Google_Chrome_icon_(September_2014).svg https://github.com/dokku/dokku http://www.quickmeme.com/p/3w2euz

Slide 69

Slide 69 text

https://memegenerator.net/instance/53270254/yeah-thatd-be-great-yeah-if-you-could-just-show-me-some-code-thatd-be-great

Slide 70

Slide 70 text

https://github.com/wiyarmir/keynotedex

Slide 71

Slide 71 text

https://keynotedex.wiyarmir.es/

Slide 72

Slide 72 text

What next?

Slide 73

Slide 73 text

•kotlinx-io: Multiplatform I/O •Android and iOS clients •React Hooks

Slide 74

Slide 74 text

Slides: https://speakerdeck.com/wiyarmir/full-stack-kotlin Code: github.com/wiyarmir/keynotedex Contact: twitter.com/@wiyarmir