Slide 1
Slide 1 text
Kotlin Js ͞ΘͬͯΈͨ
(PUBOEBKT
!NBUUBL
Slide 2
Slide 2 text
Kotlinʁ
Slide 3
Slide 3 text
ܕ҆શ, JVMݴޠ
Slide 4
Slide 4 text
Androidʹ͓͚Δ
SwiftͬΆ͍ݴޠ
Androidք۾ͩͱ
Better Javaͳ։ൃݴޠͱͯ͠ɺྲྀߦΓग़ͯ͠Δ
Slide 5
Slide 5 text
Kotlin.jsͱʁ
Slide 6
Slide 6 text
JVMܥͷAlt JSݴޠͰ͢
- ੩的型付け
- 型安全、Null安全
- Kotlinライブラリが使える
- クライアント/サʔバʔがKotlinで書ける
- JetBrainsが作ってるのでEditorサポʔトが早い！
ࢀߟIUUQZZZBOLCMPHTQPUKQLPUMJOBMUKTLPUMJOIUNM
Slide 7
Slide 7 text
type safeʹ html͕͔͚ͨΓ͢Δ
ࢀߟ: https://kotlinlang.org/docs/reference/type-safe-builders.html
Slide 8
Slide 8 text
͍ํ
- ύλʔϯ1. gradle -
Slide 9
Slide 9 text
1. SDKMan
$ curl -s get.sdkman.io | bash
Slide 10
Slide 10 text
2. gradle install
$ sdk use gradle 2.8
Slide 11
Slide 11 text
buildscript {
ext.kotlin_version = '1.0.0-beta-1038'
repositories {
mavenCentral()
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
apply plugin: "kotlin2js"
repositories {
mavenCentral()
}
dependencies {
compile "org.jetbrains.kotlin:kotlin-js-library:$kotlin_version"
}
compileKotlin2Js.kotlinOptions.sourceMap = true
compileKotlin2Js.kotlinOptions.outputFile = "${projectDir}/web/js/app.js"
compileKotlin2Js.kotlinOptions.suppressWarnings = true
compileKotlin2Js.kotlinOptions.verbose = true
task copyJsFilesFromDependencies(dependsOn: build) {
configurations.compile.each { File file ->
copy {
includeEmptyDirs = false
from zipTree(file.absolutePath)
into "${projectDir}/web/js/lib"
include { fileTreeElement ->
def path = fileTreeElement.path
path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
}
}
}
}
Slide 12
Slide 12 text
buildscript {
ext.kotlin_version = '1.0.0-beta-1038'
repositories {
mavenCentral()
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
apply plugin: "kotlin2js"
repositories {
mavenCentral()
}
dependencies {
compile "org.jetbrains.kotlin:kotlin-js-library:$kotlin_version"
}
compileKotlin2Js.kotlinOptions.sourceMap = true
compileKotlin2Js.kotlinOptions.outputFile = "${projectDir}/web/js/app.js"
compileKotlin2Js.kotlinOptions.suppressWarnings = true
compileKotlin2Js.kotlinOptions.verbose = true
task copyJsFilesFromDependencies(dependsOn: build) {
configurations.compile.each { File file ->
copy {
includeEmptyDirs = false
from zipTree(file.absolutePath)
into "${projectDir}/web/js/lib"
include { fileTreeElement ->
def path = fileTreeElement.path
path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
}
}
}
}
3. build.gradleॻ͘
Slide 13
Slide 13 text
4. ίʔυॻ͘
Slide 14
Slide 14 text
5. build͢Δ
$ gradle clean build
Slide 15
Slide 15 text
ίʔυ͕ग़ྗ͞ΕΔ
Slide 16
Slide 16 text
σΟϨΫτϦߏ
$ find . -type f
.
├── build.gradle
├── src
│ └── main
│ └── kotlin
│ └── me
│ └── mattak
│ └── example
│ └── kotlinjs
│ └── main.kt
└── web
├── index.html
└── js
├── app.js
├── app.js.map
└── lib
├── kotlin.js
└── stdlib.meta.js
Slide 17
Slide 17 text
͍ํ
- ύλʔϯ2. homebrew -
Slide 18
Slide 18 text
1. brew install
$ brew install kotlin
Slide 19
Slide 19 text
2. ίʔυΛॻ͘
Slide 20
Slide 20 text
3. convert͢Δ
$ kotlinc-js main.kt -output main.js
Slide 21
Slide 21 text
ίʔυ͕ग़ྗ͞ΕΔ
Slide 22
Slide 22 text
͍ํ
- ύλʔϯ3. ΏͱΓΉ͚ -
Slide 23
Slide 23 text
try.kotlinlang.org
Slide 24
Slide 24 text
ͦͷଞಛ
Slide 25
Slide 25 text
Q. ϥϯλΠϜͷαΠζ
ͱ͔େ͖͍ΜͰ͠ΐ͏ʁ
Slide 26
Slide 26 text
A. ͏Μ
$ ls -lha web/js/lib/
total 1912
drwxr-xr-x 4 mattak staff 136B 10 27 17:39 .
drwxr-xr-x 3 mattak staff 102B 10 27 17:39 ..
-rw-r--r-- 1 mattak staff 804K 10 27 17:39 kotlin.js
-rw-r--r-- 1 mattak staff 146K 10 27 17:39 stdlib.meta.js
minifyͯ͠ͳ͍͚Ͳ
jsͷϥΠϒϥϦͱͯ݁͠ߏαΠζͰ͔͍
Slide 27
Slide 27 text
Q. JavaͷϥΠϒϥϦ
ͱ͔ݺͼग़ͤΔͷʁ
Slide 28
Slide 28 text
A. Ұ෦Αͼͩͤ·͢
Slide 29
Slide 29 text
Q. طଘͷJsͷϥΠϒ
ϥϦͱ࿈ܞͰ͖Δͷʁ
Slide 30
Slide 30 text
A. native annotaionͰఆٛॻ͚
͔ͭ͑ΔͬΆ͍
ࢀߟ: http://www.slideshare.net/mikeneck/kotlin-as-an-altjs/19
Slide 31
Slide 31 text
Q. ࣮༻తʁ
Slide 32
Slide 32 text
A. ͦΜͳ࣮༻త͡Όͳ͍͔
- js系の他の文化とあんまり親和してない
- javaの資࢈もあんまり活きてない
- Alt JSな型安全言語では、TypeScriptのほうが࣮用的かも
Slide 33
Slide 33 text
݁
- ݱঢ়ͩͱ͓ͪΌͰɺ࣮༻తͰͳ͍͔
- ͋ͱࠓnpm͔ΒཧͰ͖ͳ͍Α
- type safe html builderͱ͔໘നͦ͏
Slide 34
Slide 34 text
αϯϓϧͱ͔
https://github.com/mattak/KotlinJsSample