Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development |...
Transcript of Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development |...
![Page 1: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/1.jpg)
Kotlin for Frontend Development
Ruslan Ibragimov
Kotlin for Frontend Development | @HeapyHop
![Page 2: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/2.jpg)
About Me● Belarus Kotlin User Group Leader● Java Professionals BY Leader● FullStack Developer at ObjectStyle● Kotliner :)
2
![Page 3: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/3.jpg)
Agenda
Kotlin?
Kotlin & TypeScript
Practice
Tooling
The Future
Q&A
3Kotlin for Frontend Development | @HeapyHop
![Page 4: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/4.jpg)
Kotlin
4
![Page 5: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/5.jpg)
5
Current Kotlin Targets:
● JVM● Android● JavaScript
Kotlin for Frontend Development | @HeapyHop
![Page 7: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/7.jpg)
7https://blog.jetbrains.com/kotlin/2017/05/kotlin-on-android-now-official
![Page 8: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/8.jpg)
![Page 9: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/9.jpg)
In July 2011 JetBrains unveiled Project Kotlin
9
![Page 10: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/10.jpg)
10
![Page 11: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/11.jpg)
In July 2011 JetBrains unveiled Project Kotlin
Kotlin v1.0 was released on February 15, 2016
Kotlin Goes Open Source! February 14, 2012
Kotlin v1.1 was released on March 1, 201711
M1-M14
![Page 12: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/12.jpg)
Kotlin - Pragmatic Language● Interop: JS, JVM(Java)● Tooling● Safety
12Kotlin for Frontend Development | @HeapyHop
![Page 13: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/13.jpg)
Safety13
![Page 14: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/14.jpg)
14
val isCrazyMurderingBot = false
if (isCrazyMurderingBot = true) kill(humans)else be_nice_to(humans)
Kotlin for Frontend Development | @HeapyHop
![Page 15: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/15.jpg)
Hello, World!
15
// main.tsconsole.log("Hello, TypeScript!");
$ tsc main.ts$ node main.jsHello, TypeScript!
Kotlin for Frontend Development | @HeapyHop
![Page 16: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/16.jpg)
$ kotlinc-js -output main.js -meta-info main.kt
Hello, World!
16
// main.ktfun main(args: Array<String>) { println("Hello, Kotlin!")}
main/root-package.kjsmmain.jsmain.meta.js
Kotlin for Frontend Development | @HeapyHop
![Page 17: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/17.jpg)
main.js (plain)
17
if (typeof kotlin === 'undefined') { throw new Error("Error loading module 'main'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'main'.");}var main = function (_, Kotlin) { 'use strict'; var println = Kotlin.kotlin.io.println_s8jyv4$; function main_0(args) { println('Hello, Kotlin!'); } _.main_kand9s$ = main_0; Kotlin.defineModule('main', _); main_0([]); return _;}(typeof main === 'undefined' ? {} : main, kotlin);
?main
![Page 18: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/18.jpg)
index.js
18
// index.jskotlin = require("./node_modules/kotlin/kotlin.js");require("./main.js");
$ npm install kotlin$ node index.jsHello, Kotlin!
Kotlin for Frontend Development | @HeapyHop
![Page 19: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/19.jpg)
Functions
19
function foo(bar: string): string { return `Hello, ${bar}!`;}
fun foo(bar: String): String { return "Hello, $bar!"}
fun foo(bar: String) = "Hello, $bar!"
Kotlin for Frontend Development | @HeapyHop
const fn = function () { // ...}
(function () { //...})()
![Page 20: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/20.jpg)
Functions
20Kotlin for Frontend Development | @HeapyHop
fun reformat(str: String, normalizeCase: Boolean = true, upperCaseFirstLetter: Boolean = true, divideByCamelHumps: Boolean = false, wordSeparator: Char = ' ') { // ...}
reformat("abc", true, true, false, '_')
reformat("abc", wordSeparator = '_')
![Page 21: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/21.jpg)
String Template
21
val text = """ |Tell me and I forget. |Teach me and I remember. |Involve me and I learn. |(Benjamin Franklin) """.trimMargin()
Kotlin for Frontend Development | @HeapyHop
![Page 22: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/22.jpg)
Collections
22
/*1*/ val list = (1..3)/*2*/ .map({ it * 2 })/*3*/ .filter { it % 2 == 0 }/*4*/ .reduce { acc, i -> acc + i }/*5*/ .sum()
/*1*/ const sum = [1, 2, 3]/*2*/ .map(num => num * 2)/*3*/ .filter(it => it % 2 === 0)/*4*/ .reduce((acc, i) => acc + i, 0);
Kotlin for Frontend Development | @HeapyHop
function sum(acc, i) { return acc + i;}
const sum = (acc, i) => acc + i;
![Page 23: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/23.jpg)
Dynamic TypingTypeScript:
23
function foo(bar: any): number {...}
fun foo(bar: dynamic): Int { bar.prop bar.function()}
Kotlin:
Kotlin for Frontend Development | @HeapyHop
![Page 24: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/24.jpg)
24
Uncaught TypeError: Cannot read property 'foo' of null
Uncaught ReferenceError: bar is not defined
NullPointerException, NullReferenceException
![Page 25: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/25.jpg)
Null
25
var nullable: String? = nullnullable.length// Kotlin: Compile Error: Only safe (?.) or non-null...
String?
String or nullOnly String
String
Kotlin for Frontend Development | @HeapyHop
![Page 26: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/26.jpg)
Operator Overloading
26
class Complex(val i: Int, val j: Int) { operator fun plus(c: Complex) = Complex(this.i + c.i, this.j + c.j)}
val c = Complex(1, 0) + Complex(0, 1) // = Complex(1, 1)
Kotlin for Frontend Development | @HeapyHop
![Page 27: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/27.jpg)
If expression
27Kotlin for Frontend Development | @HeapyHop
let a;
if (smth) { a = "foo"} else { a = "bar"}
val a = if (smth) { "foo"} else { "bar"}
![Page 28: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/28.jpg)
Kotlin is Awesome!● Type Inference● Named Arguments● Default Arguments● Ranges● Template Strings● Operator Overloading● Null Safety● if-expression
28Kotlin for Frontend Development | @HeapyHop
● Properties● Data Classes● Sealed Classes (ADT)● Class Delegation● Extension Functions● More Expressions● Inline Functions● Generics (reified)● Object● Delegated Properties● Reflection● Coroutines!● Type-Safe Builders!● ...
![Page 29: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/29.jpg)
Future Kotlin Features?● Annotations for static analyses● Collection comprehensions● Format strings● Subject variable in when● Overloadable operators | and &● Static members for Kotlin classes● Vararg-like treatment of data
classes● Support package-private visibility● Optional (trailing) commas● Destructuring assignments
● Value classes● Truly immutable data● Unsigned arithmetic● SAM Conversions for Kotlin
interfaces● Use invokedynamic to compile Kotlin● Collection literals● Short notation for enum constants● Slices for lists and arrays● Private members accessible from
tests● Multi-catch
29Description
![Page 30: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/30.jpg)
Practice
30
![Page 31: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/31.jpg)
JavaScript● Target version: ECMAScript 5● Modules
○ UMD○ AMD○ Commonjs○ Plain (no module system)
● Async/Await, Yield○ Kotlin Coroutines!
■ rx■ actors/channels
31Kotlin for Frontend Development | @HeapyHop
![Page 32: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/32.jpg)
Calling JavaScript from Kotlin
32
fun debug(){ js("debugger")}
debug()
Kotlin for Frontend Development | @HeapyHop
if (typeof kotlin === 'undefined') { throw new Error("Error loading module 'main'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'main'.");}var main = function (_, Kotlin) { 'use strict'; function main$debug() { debugger; } function main_0(args) { var debug = main$debug; debug(); } _.main_kand9s$ = main_0; Kotlin.defineModule('main', _); main_0([]); return _;}(typeof main === 'undefined' ? {} : main, kotlin);
![Page 33: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/33.jpg)
Calling JavaScript from Kotlin
33
fun jsTypeOf(o: Any): String { return js("typeof o")}
jsTypeOf(42)
Kotlin for Frontend Development | @HeapyHop
if (typeof kotlin === 'undefined') { throw new Error("Error loading module 'main'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'main'.");}var main = function (_, Kotlin) { 'use strict'; function main$jsTypeOf(o) { return typeof o; } function main_0(args) { var jsTypeOf = main$jsTypeOf; jsTypeOf(42); } _.main_kand9s$ = main_0; Kotlin.defineModule('main', _); main_0([]); return _;}(typeof main === 'undefined' ? {} : main, kotlin);
![Page 34: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/34.jpg)
Type Definitions
34
![Page 35: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/35.jpg)
Calling JavaScript from Kotlin
35
// window.ktexternal fun alert(message: Any?): Unit
Kotlin for Frontend Development | @HeapyHop
![Page 36: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/36.jpg)
Calling JavaScript from Kotlin
36
// file.jsfunction MyClass() { }MyClass.sharedMember = function () { /* … */ };MyClass.prototype.ownMember = function () { /* ... */ };
// file.ktexternal class MyClass { companion object { fun sharedMember() }
fun ownMember()}
Kotlin for Frontend Development | @HeapyHop
![Page 37: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/37.jpg)
JavaScript Modules
37
// file.kt@JsModule("react-dom")external object ReactDOM { fun render(element: ReactElement?, container: Element?) fun<P: RProps, S: RState> findDOMNode(component: ReactComponent<P, S>): Element fun unmountComponentAtNode(domContainerNode: Element?)}
![Page 38: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/38.jpg)
Type-Safe Builders vs JSX
38
![Page 39: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/39.jpg)
JSX in Kotlin
39
override fun render(): ReactElement? { return div { + "Hello, ${props.name}!" }}
render() { return ( <div> "Hello, ${this.props.name}!" </div> )}
![Page 40: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/40.jpg)
CSS in Kotlin (Aza-Kotlin-CSS)
40
val css = Stylesheet { a { width = 10.px color = 0xFFFFFF opacity = .8
hover { color = 0xF2CACF } }}
val css = Stylesheet { div { top = 0 } // div{top:0}
a.hover { top = 0 } // a:hover{top:0}
div and span { top = 0 } // div,span{top:0}
li.nthChild(2) { top = 0 } // li:nth-child(2){top:0}
input["disabled"] { top = 0 } // input[disabled]{top:0}}
Kotlin for Frontend Development | @HeapyHop
const styles = { button: { fontSize: 12, '&:hover': { background: 'blue' } }}
![Page 41: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/41.jpg)
Tooling
41
![Page 42: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/42.jpg)
Editor/IDE?● Intellij Idea Community Edition/Ultimate ❤● Eclipse, Netbeans● Atom, Sublime
42Kotlin for Frontend Development | @HeapyHop
![Page 43: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/43.jpg)
Build● Whatever + Gradle/Maven● Plugin for Gradle: https://github.com/Kotlin/kotlin-frontend-plugin ⭐
○ NPM○ Webpack○ Karma
● Webpack Loader: https://github.com/huston007/kotlin-loader 🎉○ require('./app/app.kt');
43Kotlin for Frontend Development | @HeapyHop
![Page 44: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/44.jpg)
Debug● source maps● debugger;● println/console.log :)
44Kotlin for Frontend Development | @HeapyHop
![Page 45: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/45.jpg)
ts2kt$ npm install -g ts2kt
45
$ ts2kt [<options>] <d.ts files>
Kotlin for Frontend Development | @HeapyHop
![Page 46: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/46.jpg)
Java to Kotlin Conversion
46Kotlin for Frontend Development | @HeapyHop
![Page 47: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/47.jpg)
Real World Example
47
![Page 48: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/48.jpg)
48
Application:
reactreact-domreact-routerjqueryreact-markdownkotlinkotlinx-html-js
Build: 3mbMinimized: 1.3mbZipped: 230kb
Hello World:
Minimized: 600kbPrepack: 400kb[src]
![Page 49: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/49.jpg)
The Future● Bundle Size Optimization [src]● Seamless RPC Client-Server [src]● WASM? [src]● Easy shared code between JVM/JS/Native [src]● ...
49Kotlin for Frontend Development | @HeapyHop
![Page 50: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/50.jpg)
Multiplatform Projects & Libraries [src]
50
header fun foo()
Common module:
impl fun foo() {...}Impl module:
Common Moduleheader
JVM Moduleimpl
JS Moduleimpl
iOS Moduleimpl
Kotlin for Frontend Development | @HeapyHop
![Page 51: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/51.jpg)
Kotlin/Native
51
![Page 52: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/52.jpg)
Full-Stack on Koltin
52
![Page 53: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/53.jpg)
53
How to LearnDocs: http://kotlinlang.org/docs/reference/
In Browser: https://try.kotlinlang.org/
Kotlin in Action: https://www.manning.com/books/kotlin-in-action
Stepic Kotlin Course: https://stepik.org/course/Kotlin-2852/
Awesome Kotlin: https://kotlin.link/
Kotlin for Frontend Development | @HeapyHop
![Page 54: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/54.jpg)
Links● Bindings ready to use - https://github.com/danfma/kodando● Gaming in Browser!? - https://github.com/perses-games/tetris-kudens● React Application Sample - https://github.com/Kotlin/kotlin-fullstack-sample● Application Sample - https://github.com/JetBrains/kotlin-web-demo
54Kotlin for Frontend Development | @HeapyHop
![Page 55: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/55.jpg)
Conclusion: Pros/Cons+ Kotlin/JVM, Kotlin/Android, Kotlin/JS, Kotlin/Native, WASM(?)+ Language+ Intellij IDEA
- Intellij IDEA- Bundle Size- Gradle/Maven (for frontend devs)
55Kotlin for Frontend Development | @HeapyHop
![Page 56: Kotlin for Frontend Development · Development Ruslan Ibragimov Kotlin for Frontend Development | @HeapyHop. About Me Belarus Kotlin User Group Leader Java Professionals BY Leader](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa802999c8b5043b52ac482/html5/thumbnails/56.jpg)
Q&Ahttps://kotlin.link/
56