Slide 1

Slide 1 text

Multh Platform Kotlin Mix Leap Study #21 LT 2018/08/09

Slide 2

Slide 2 text

自己紹介 ヤマサキ ヨシヒロ 山崎 好洋 ヤフー株式会社 18年 新卒 ● Kotlin ● DDD(ドメイン駆動設計) ● TDD(テスト駆動開発) ● モブプログラミング @44x1carbon

Slide 3

Slide 3 text

業務・関心事を素直に表現したドメイン層を作り レイヤー毎に分割することで ドメイン層がその他の層に依存しなくなる ドメインの変更に強いシステムになる

Slide 4

Slide 4 text

めっちゃいいやん!!

Slide 5

Slide 5 text

しかし、言語の壁は厚かった

Slide 6

Slide 6 text

ドメイン層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層 サーバーサイド(Java) Web(JavaScript) アプリ(Java・Swift) ドメイン層 ドメイン層

Slide 7

Slide 7 text

そこで出会ったのがKotlin

Slide 8

Slide 8 text

Kotlin色んな物に変換できる Kotlinコードは、Androidで動くJavaバイトコードだけでなく、JavaScriptやネイ ティブバイナリにコンパイル(変換)することが出来る Designed by Freepik and distributed by Flaticon *.kt

Slide 9

Slide 9 text

ドメイン層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層 サーバーサイド(Java) Web(JavaScript) アプリ(Java・Swift) ドメイン層 ドメイン層

Slide 10

Slide 10 text

ドメイン層 インフラ層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 サーバーサイド(Kotlin/JVM) Web(Kotlin/JS) アプリ(Kotlin/JVM・Native) アプリケーション層 アプリケーション層 プレゼンテーション層 プレゼンテーション層

Slide 11

Slide 11 text

Effective architecture for Multiplatform native development in Kotlin KotlinAcademy(https://blog.kotlin-academy.com/) のMultiplatformタグ ● バックエンド => Ktor, squash ● クライアント => MVP ○ Web: kotlin-react

Slide 12

Slide 12 text

マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android desktop common-native common-client-native iOS

Slide 13

Slide 13 text

マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android desktop common-native common-client-native iOS

Slide 14

Slide 14 text

他の全てのモジュールに必要とされる物を入れる ● データモデル(Article、FeedBack、News) ○ kotlinx.serializationのSerializableアノテーションを付与する (https://github.com/Kotlin/kotlinx.serialization) ● 各プラットフォーム毎に実装が期待されるexpectクラス (日付を表す、DateTime) ● ユーティリティメソッド(文字列をケバブケースに変換するなど) commonパッケージ

Slide 15

Slide 15 text

マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android desktop common-native common-client-native iOS

Slide 16

Slide 16 text

commonパッケージで定義された、expectクラスの各プラットフォーム毎に実装 を書くパッケージ ● actualクラス common-*パッケージ

Slide 17

Slide 17 text

expectとactual 各プラットフォーム毎で実装したいクラスはexpectキーワードを使って定義する expect class DateTime : Comparable { val second: Int val minute: Int val hour: Int val dayOfMonth: Int val monthOfYear: Int val year: Int fun toDateFormatString(): String operator fun plus(millis: Long): DateTime }

Slide 18

Slide 18 text

expectとactual JvmであればCalenderクラス、JavaScriptならDateクラスを用いて実装する import kotlin.js.Date actual data class DateTime( actual val second: Int, actual val minute: Int, actual val hour: Int, actual val dayOfMonth: Int, actual val monthOfYear: Int, actual val year: Int ) : Comparable { actual fun toDateFormatString(): String = DATE_FORMAT... override operator fun compareTo(other: DateTime): Int = compareValuesBy(this, other, ... actual operator fun plus(millis: Long): DateTime { val date = Date(year, monthOfYear, dayOfMonth, hour, minute, second) val newDate = Date(date.getUTCMilliseconds() + millis) return DateTime(newDate.getSeconds(), ...) } }

Slide 19

Slide 19 text

マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android desktop common-native common-client-native iOS

Slide 20

Slide 20 text

common-clientパッケージ クライアント間で共有されるコードを入れるパッケージ ● プレゼンター ○ ViewのためのUIビジネスロジック ● Viewインターフェース ○ 表示に関する状態 ○ 状態遷移のメソッド ● Repositoryインターフェース

Slide 21

Slide 21 text

マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android desktop common-native common-client-native iOS

Slide 22

Slide 22 text

common-client-*パッケージ ● Http通信の実装 ○ JvmならRetrofit, JavaScriptならXHR ● Repositoryの実装クラス ○ backendのAPIを呼び出す ● coroutinesの実装 ○ kotlinx.coroutines

Slide 23

Slide 23 text

マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android desktop common-native common-client-native iOS

Slide 24

Slide 24 text

各種クライアントパッケージ それぞれのライブラリに合わせてcommon-clientのViewインターフェースを実装 していく。 Web: kotlin-react, Desktop: tornadofx ● データのバインディング ● エラー表示 ● 画面遷移

Slide 25

Slide 25 text

JSON kotlinx.serialization common-client RepositoryInterface common-client Presenter backend API common DataModel web View iOS View Android View common-client ViewInterface common-client-* Repository

Slide 26

Slide 26 text

ドメイン層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層 サーバーサイド(Java) Web(JavaScript) アプリ(Java・Swift) ドメイン層 ドメイン層

Slide 27

Slide 27 text

ドメイン層 インフラ層 アプリケーション層 プレゼンテーション層 (実装) インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 サーバーサイド(Kotlin/JVM) Web(Kotlin/JS) アプリ(Kotlin/JVM・Native) プレゼンテーション層(インターフェース) プレゼンテーション層 (実装)

Slide 28

Slide 28 text

良い所 ● ドメイン層が共通化されるので、変数名などの表記揺れが少なくなる ● 適度に共通化されているので、変更箇所が少ない ● Kotlinのコードがたくさん書ける

Slide 29

Slide 29 text

難しい所 ● 環境構築が大変 ○ Gradle、Webpack ● 必要な知識が多い ○ Backend × Kotlin ○ React × Kotlin ○ iOS× Kotlin ○ Android× Kotlin

Slide 30

Slide 30 text

Kotlinは Androidやサーバーサイド だけじゃない

Slide 31

Slide 31 text

何時でも何処でも Kotlin!

Slide 32

Slide 32 text

参考リンク KotlinAcademy マルチプラットフォーム関連記事 https://blog.kotlin-academy.com/multiplatform/home KotlinAcademyAppリポジトリ https://github.com/MarcinMoskala/KotlinAcademyApp KotlinConfAppリポジトリ https://github.com/JetBrains/kotlinconf-app