Multiplatform Kotlin

36ee3f54c56704a49805ffb32b596930?s=47 44
August 09, 2018

Multiplatform Kotlin

36ee3f54c56704a49805ffb32b596930?s=128

44

August 09, 2018
Tweet

Transcript

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

  2. 自己紹介 ヤマサキ ヨシヒロ 山崎 好洋 ヤフー株式会社 18年 新卒 • Kotlin

    • DDD(ドメイン駆動設計) • TDD(テスト駆動開発) • モブプログラミング @44x1carbon
  3. 業務・関心事を素直に表現したドメイン層を作り レイヤー毎に分割することで ドメイン層がその他の層に依存しなくなる ドメインの変更に強いシステムになる

  4. めっちゃいいやん!!

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

  6. ドメイン層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層

    サーバーサイド(Java) Web(JavaScript) アプリ(Java・Swift) ドメイン層 ドメイン層
  7. そこで出会ったのがKotlin

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

    *.kt
  9. ドメイン層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層

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

    アプリケーション層 プレゼンテーション層 プレゼンテーション層
  11. Effective architecture for Multiplatform native development in Kotlin KotlinAcademy(https://blog.kotlin-academy.com/) のMultiplatformタグ

    • バックエンド => Ktor, squash • クライアント => MVP ◦ Web: kotlin-react
  12. マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android

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

    desktop common-native common-client-native iOS
  14. 他の全てのモジュールに必要とされる物を入れる • データモデル(Article、FeedBack、News) ◦ kotlinx.serializationのSerializableアノテーションを付与する (https://github.com/Kotlin/kotlinx.serialization) • 各プラットフォーム毎に実装が期待されるexpectクラス (日付を表す、DateTime) •

    ユーティリティメソッド(文字列をケバブケースに変換するなど) commonパッケージ
  15. マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android

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

  17. expectとactual 各プラットフォーム毎で実装したいクラスはexpectキーワードを使って定義する expect class DateTime : Comparable<DateTime> { 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 }
  18. 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<DateTime> { 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(), ...) } }
  19. マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android

    desktop common-native common-client-native iOS
  20. common-clientパッケージ クライアント間で共有されるコードを入れるパッケージ • プレゼンター ◦ ViewのためのUIビジネスロジック • Viewインターフェース ◦ 表示に関する状態

    ◦ 状態遷移のメソッド • Repositoryインターフェース
  21. マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android

    desktop common-native common-client-native iOS
  22. common-client-*パッケージ • Http通信の実装 ◦ JvmならRetrofit, JavaScriptならXHR • Repositoryの実装クラス ◦ backendのAPIを呼び出す

    • coroutinesの実装 ◦ kotlinx.coroutines
  23. マルチプラットフォームのパッケージ構成 common common-client common-js common-jvm backend common-client-jvm common-client-js web android

    desktop common-native common-client-native iOS
  24. 各種クライアントパッケージ それぞれのライブラリに合わせてcommon-clientのViewインターフェースを実装 していく。 Web: kotlin-react, Desktop: tornadofx • データのバインディング •

    エラー表示 • 画面遷移
  25. 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
  26. ドメイン層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 アプリケーション層 プレゼンテーション層

    サーバーサイド(Java) Web(JavaScript) アプリ(Java・Swift) ドメイン層 ドメイン層
  27. ドメイン層 インフラ層 アプリケーション層 プレゼンテーション層 (実装) インフラ層 アプリケーション層 プレゼンテーション層 インフラ層 サーバーサイド(Kotlin/JVM)

    Web(Kotlin/JS) アプリ(Kotlin/JVM・Native) プレゼンテーション層(インターフェース) プレゼンテーション層 (実装)
  28. 良い所 • ドメイン層が共通化されるので、変数名などの表記揺れが少なくなる • 適度に共通化されているので、変更箇所が少ない • Kotlinのコードがたくさん書ける

  29. 難しい所 • 環境構築が大変 ◦ Gradle、Webpack • 必要な知識が多い ◦ Backend ×

    Kotlin ◦ React × Kotlin ◦ iOS× Kotlin ◦ Android× Kotlin
  30. Kotlinは Androidやサーバーサイド だけじゃない

  31. 何時でも何処でも Kotlin!

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