Kotlin beyond Android

Transcript

1. Kotlin beyond Android Guillermo Orellana @wiyarmir
3. + =
4. https://www.thinkgeek.com/product/e554/
5. https://imgur.com/gallery/7oxRClN
6. Back in the day https://www.theverge.com/2014/6/25/5842024/googles-android-logo-gets-a-new-look
7. https://www.pinterest.co.uk/pin/225813368792712452/ My first phone
8. https://www.pinterest.co.uk/pin/225813368792712452/ My first app
9. https://www.pinterest.co.uk/pin/225813368792712452/ My first redesign
10. https://www.redbubble.com/people/dimmi/works/28707595-low-poly-confused-nick-young Why are you talking about Android?
11. Kotlin feels like my first Android app
12. Makes new tech reachable https://en.wikipedia.org/wiki/Multi-touch https://yalik.deviantart.com/art/Daft-Punk-Soundboard-267150429
13. Awesome community
14. Gets people excited
16. Keynotedex
18. –Guillermo Orellana “I am a strong, independent programmer and I need no designer.” Things I regret
19. Goals •100% Kotlin •??? •Profit https://medium.com/elementaryos/all-aboard-the-meson-future-hype-train-2b6c478b6b9e
20. How is it made https://giphy.com/gifs/how-its-made-loop-link-gH6I5QWnIZjy0
21. Web
22. KotlinJS + Kotlin Frontend Plugin
23. KotlinJS
24. What happens with types? ?
25. dynamic https://www.joya.life/en/blog/the-power-of-kryptonite/
26. val a: dynamic = 3 a.`types?` .I.`haven't`.heard .that.name.`in`.years = "!"
27. Kotlin frontend plugin
28. kotlinFrontend { downloadNodeJsVersion = "8.11.2" sourceMaps = false }
29. 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" }
30. webpackBundle { publicPath = "/frontend/" port = 8080 proxyUrl = "http: //localhost:9090/" sourceMapEnabled = true stats = "errors-only" }
31. ./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 One command to rule them all ./gradlew web:run
32. Demo time https://asciinema.org/a/HIC2Ct3mT9jLr1LlbJ7wuiFtH
33. React in Kotlin https://en.wikipedia.org/wiki/React_(JavaScript_library) +
34. const Submission = (props) => ( <div className={"col-md-4"}> <h4>{props.submission.title} </h4> <p>{props.submission.abstract} </p> <Link to={`${props.submission.submissionUrl}`} className={"btn btn-secondary btn-lg"}> {"View details"} </Link> </div> ); // Usage <Submission submission={{}} />
35. class Submission : RComponent<SubmissionProps, RState>() { override fun RBuilder.render() { with(props.submission) { div("col-md-4") { h4 { +title } p { +abstract } routeLink(to = submissionUrl) { attrs { className = "btn btn-secondary btn-lg" } +"View details" } } } } }
36. Rendered component
37. fun fetchUserProfileFromId(userId: String) = promise { val user = userProfile(userId) setState { userProfile = user } } .catch { console.error(it) }
38. Backend
40. https://vertx.io/ https://spring.io/ http://ktor.io/
41. Ktor http://ktor.io/
42. "Easy to use, fun and asynchronous." http://ktor.io/
43. fun main(args: Array<String>) { embeddedServer(Netty, 8080) { routing { get("/") { call.respondText("My Example Blog", ContentType.Text.Html) } } }.start(wait = true) } http://ktor.io/
44. fun Application.configureOAuth(authConf: Authentication.Configuration) = authConf.oauth("oauth") { val config = environment.config.config("keynotedex.oauth.github") client = HttpClient(Apache) .apply { environment.monitor.subscribe(ApplicationStopping) { close() } } providerLookup = { OAuthServerSettings.OAuth2ServerSettings( name = "github", authorizeUrl = "https: //github.com/login/oauth/authorize", accessTokenUrl = "https: //github.com/login/oauth/access_token", clientId = config.propertyOrNull("clientId") ?.getString() ?: "", clientSecret = config.propertyOrNull("clientSecret") ?.getString() ?: "" ) } urlProvider = { settings: OAuthServerSettings -> redirectString(OAuthLoginEndpoint(settings.name)) } }
45. class ApplicationPage : Template<HTML> { val caption = Placeholder<TITLE>() 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") } } }
46. class KeynotedexPageContent : Template<HTML> { val head = Placeholder<HEAD>() val bundle = Placeholder<SCRIPT>() 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) } } } }
47. Don't overuse builders
48. fun Route.index() { static("frontend") { resource("web.bundle.js") } accept(ContentType.Text.Html) { get<IndexPage> { val model = mapOf( "jsbundle" to "/frontend/web.bundle.js" ) call.respond(FreeMarkerContent("index.ftl", model)) } } }
49. Shared code
50. Kotlin Multiplatform common jvm android js native compile
51. 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() }
52. common-android android Platform specific module common common-android common-jvm common-js common-native expectedBy android jvm js native compile
53. https://giphy.com/gifs/castle-nathan-fillion-favourite-Ow59c0pwTPruU
54. kotlinx.serialization •Cross-platform •Multi-format •Reflectionless https://imgflip.com/memetemplate/113426012/House-MD-Thumbs-Up
55. @Serializable data class SubmissionResponse( val submission: Submission )
56. val submissionResponse = KJSON.parse(responseText) call.respond( JSON.stringify( SubmissionResponse() ) ) JSON Serialise Deserialise
57. val submissionResponse = CBOR.load(responseBytes) call.respond( CBOR.dump( SubmissionResponse() ) ) CBOR Serialise Deserialise
58. val submissionResponse = ProtoBuf.load(resBytes) call.respond( ProtoBuf.dump( SubmissionResponse() ) ) Protocol Buffers Serialise Deserialise
59. https://memegenerator.net/instance/53270254/yeah-thatd-be-great-yeah-if-you-could-just-show-me-some-code-thatd-be-great
60. https://github.com/wiyarmir/keynotedex
61. What next?
62. Konan https://www.flickr.com/photos/edenpictures/9306258916
63. Android https://www.thinkgeek.com/product/e554/
64. Slides: tinyurl.com/mkcc-kotlinbeyondandroid Code: github.com/wiyarmir/keynotedex Contact: twitter.com/@wiyarmir https://milan.kotlincommunityconf.com