Ankoでコンポーネント指向

 Ankoでコンポーネント指向

第4回Kotlin勉強会 (https://connpass.com/event/44710/) で発表した資料です。

0f8842fabcd31a6c9007ddcd648247db?s=128

Keita Kagurazaka

December 13, 2016
Tweet

Transcript

  1. Ankoでコンポーネント指向 2016/12/13 第4回 Kotlin勉強会 @ Sansan @kkagurazaka

  2. 自己紹介 • @kkagurazaka • 普段はC++で画像処理とか • Kotlin lover • 趣味Androider

    RxProperty for Android https://github.com/k-kagurazaka/rx-property-android
  3. 初LTです

  4. コンポーネント指向 • 近年Webフロント界隈で注目 • プレゼンテーション層のパラダイム

  5. 普通のModel-View-Presenter View Presenter • View Template • UI State •

    Event Handling • View Controller
  6. 普通のModel-View-ViewModel View ViewModel • View Template • Event Handling •

    UI State
  7. コンポーネント指向 AllTasksComponent View ViewModel ToolbarComponent View ViewModel TaskListComponent View ViewModel

    TaskComponent View ViewModel FABComponent View ViewModel
  8. Reactの場合 UI State Event Handling View Template

  9. なにが嬉しいのか? • 関心の分離 View TemplateとPresentation Logicの分離は「技術による分離」 • カプセル化 1つのコンポーネントに関心事項が収まる •

    再利用性 一度定義したコンポーネントは使い回せる
  10. Presentational / Container Component Presentational Container 関心 どう見えるか どう動くか データ読み込み

    親コンポーネントから与え られる モデルから取得 データ書き込み 親コンポーネントから与え られるコールバックを呼ぶ モデルのロジックをキック 内部状態 (なるべく)持たない 持つ
  11. Presentational / Container Component Container Presentational Container Presentational Presentational Presentational

    Presentational Presentational Presentational
  12. Androidの場合は?

  13. • Container Component ◦ Activity / Fragment ◦ イベントを受けてモデルをキックする、実質Presenter •

    Presentational Component ◦ (Custom) View / Composite View ◦ 親から受け取った値を表示するだけ • View Template ◦ layout.xml + DataBinding ◦ <include>でコンポーネントのネストを実現
  14. layout.xml + DataBindingの辛み • XMLそのものが辛い ◦ タイプセーフじゃない ◦ DataBinding周りの補完が不十分 ◦

    Javaコードと行ったり来たり • エラーの原因がわかりにくい ◦ Android Studioでうまくエラーメッセージ出ない経験ないですか? • Kotlinとの相性がイマイチ ◦ 大分マシにはなったものの、kaptは問題が起きやすい
  15. None
  16. Anko • KotlinでAndroidアプリ開発するのに便利な機能たくさん ◦ layout.xmlをKotlin上でDSLとして・・・ ◦ 非同期処理を簡単に・・・ ◦ SQLiteも簡単に・・・ ◦

    その他便利なユーティリティ多数 • JetBrains製
  17. Layout DSL • タイプセーフ・nullセーフ • 再利用性が高い • パース時間ゼロ • DataBinding不要

    ⇒コンポーネント作れる!
  18. やってみよう

  19. None
  20. 1. AnkoComponentを継承してLayout DSL

  21. 2. 外部とのI/F定義 ダサい・・・

  22. Bound call references (since Kotlin 1.1)

  23. Javaのgetter/setterから自動生成されたプロパティには未対応

  24. 気を取り直して・・・

  25. 3. DSL内で使える拡張関数を定義 あとは同じようにコンポーネントを作っていくだけ!

  26. まとめ • Ankoを使えばAndroidでもコンポーネント指向はできる • ただし、まだネタ枠 ◦ タブレット対応どうする? ◦ アーキテクチャどうする? ◦

    propsのバケツリレーどうする?
  27. Thanks!