Kotlin with JavaScript & React: A Reality

Transcript

1. KOTLIN WITH JAVASCRIPT & REACT: A REALITY
2. Hi, I’m Adora Software Engineer Creator, adorahack.com Co-organizer GDG Ajah, Unstack, Android Ngr Twitter: @theadoranwodo YouTube: adorahack
3. KOTLIN ?
4. Kotlin is a cross-platform, statically typed, general-purpose programming language with type inference.
5. WHY KOTLIN FOR JAVASCRIPT?
6. You’re not a fan of comparisons in Javascript '' == false 0 == false 0 === false null === undefined null == undefined null >= 0
7. Interoperability index.js function getToken(){ // do some stuff here // return a token string } Main.kt val TOKEN = js("getToken()") as String
8. Kotlin is modern & easy to learn.
9. Share code between platforms
10. KOTLIN & REACT
11. Create React Kotlin App. npm install -g create-react-kotlin-app Kotlin React Wrapper. npm i @jetbrains/kotlin-react
12. Lambdas are used in place of JSX when doing React with Kotlin
13. const Message = ({ message}) => { if (message ) { return ( <div>Hey, {message}</div> ); } return null } Functional Components - Message.js
14. fun RBuilder.alert(message: String = "") = if (message.isNotEmpty()) { div{ + “Hey, $message” } } else { empty } Functional Components - Message.kt
15. • RComponent • RBuilder • RState • RProps • RActions • rEnhancer Some things to remember
16. interface WelcomeProps: RProps { var name: String } class Welcome: RComponent<WelcomeProps, RState>() { override fun RBuilder.render() { div { +"Hello, ${props.name}" } } } fun RBuilder.welcome(name: String = "John") = child(Welcome::class) { attrs.name = name } Class Components (Welcome.kt) Code snippet from https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react
17. Reusing Components Code snippet from https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react fun RBuilder.welcome(name: String = "John") = child(Welcome::class) { attrs.name = name }
18. OTHER KOTLIN WEB WRAPPERS
19. kotlin-css & kotlin-styled DSL for creating stylesheets in Kotlin. npm i @jetbrains/kotlin-css npm i @jetbrains/kotlin-css-js npm i @jetbrains/kotlin-styled
20. kotlin-mocha If you want to test, use this guy. npm i @jetbrains/kotlin-mocha
21. kotlin-react-dom Kotlin wrapper for the React DOM library. npm i @jetbrains/kotlin-react-dom
22. kotlin-react-redux Kotlin wrapper for the React Redux library. npm i @jetbrains/kotlin-react-redux
23. kotlin-react-router-dom Kotlin wrapper for the React Router DOM library. npm i @jetbrains/kotlin-react-router-dom
24. kotlin-redux Kotlin wrapper for the Redux library. npm i @jetbrains/kotlin-redux
25. • Introduction to Kotlin • Why Kotlin for JavaScript • Kotlin in React • Existing Kotlin JS wrappers Summary
26. • https://kotlinlang.org/docs/reference/js-overview.html • https://github.com/JetBrains/kotlin-wrappers • https://github.com/JetBrains/create-react-kotlin-app • https://adorahack.com Helpful resources
27. Build for the web however you like!
28. THANKS! Website: adoranwodo.com Blog: adorahack.com Twitter: @adoranwodo