Ankoでコンポーネント指向

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

Transcript

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

   View Slide

2. 自己紹介
   ● @kkagurazaka
   ● 普段はC++で画像処理とか
   ● Kotlin lover
   ● 趣味Androider
   RxProperty for Android
   https://github.com/k-kagurazaka/rx-property-android
   

   View Slide

3. 初LTです
   

   View Slide

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

   View Slide

5. 普通のModel-View-Presenter
   View Presenter
   ● View
   Template
   ● UI State
   ● Event Handling
   ● View Controller
   

   View Slide

6. 普通のModel-View-ViewModel
   View ViewModel
   ● View
   Template
   ● Event Handling
   ● UI State
   

   View Slide

7. コンポーネント指向
   AllTasksComponent
   View ViewModel
   ToolbarComponent
   View ViewModel
   TaskListComponent
   View ViewModel
   TaskComponent
   View ViewModel
   FABComponent
   View ViewModel
   

   View Slide

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

   View Slide

9. なにが嬉しいのか？
   ● 関心の分離
   View TemplateとPresentation Logicの分離は「技術による分離」
   ● カプセル化
   1つのコンポーネントに関心事項が収まる
   ● 再利用性
   一度定義したコンポーネントは使い回せる
   

   View Slide

10. Presentational / Container Component
    Presentational Container
    関心 どう見えるか どう動くか
    データ読み込み
    親コンポーネントから与え
    られる
    モデルから取得
    データ書き込み
    親コンポーネントから与え
    られるコールバックを呼ぶ
    モデルのロジックをキック
    内部状態 （なるべく）持たない 持つ
    

    View Slide

11. Presentational / Container Component
    Container
    Presentational
    Container
    Presentational
    Presentational Presentational
    Presentational Presentational Presentational
    

    View Slide

12. Androidの場合は？
    

    View Slide

13. ● Container Component
    ○ Activity / Fragment
    ○ イベントを受けてモデルをキックする、実質Presenter
    ● Presentational Component
    ○ (Custom) View / Composite View
    ○ 親から受け取った値を表示するだけ
    ● View Template
    ○ layout.xml + DataBinding
    ○ でコンポーネントのネストを実現
    

    View Slide

14. layout.xml + DataBindingの辛み
    ● XMLそのものが辛い
    ○ タイプセーフじゃない
    ○ DataBinding周りの補完が不十分
    ○ Javaコードと行ったり来たり
    ● エラーの原因がわかりにくい
    ○ Android Studioでうまくエラーメッセージ出ない経験ないですか？
    ● Kotlinとの相性がイマイチ
    ○ 大分マシにはなったものの、kaptは問題が起きやすい
    

    View Slide

15. View Slide

16. Anko
    ● KotlinでAndroidアプリ開発するのに便利な機能たくさん
    ○ layout.xmlをKotlin上でDSLとして・・・
    ○ 非同期処理を簡単に・・・
    ○ SQLiteも簡単に・・・
    ○ その他便利なユーティリティ多数
    ● JetBrains製
    

    View Slide

17. Layout DSL
    ● タイプセーフ・nullセーフ
    ● 再利用性が高い
    ● パース時間ゼロ
    ● DataBinding不要
    ⇒コンポーネント作れる！
    

    View Slide

18. やってみよう
    

    View Slide

19. View Slide

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

    View Slide

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

    View Slide

22. Bound call references (since Kotlin 1.1)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. まとめ
    ● Ankoを使えばAndroidでもコンポーネント指向はできる
    ● ただし、まだネタ枠
    ○ タブレット対応どうする？
    ○ アーキテクチャどうする？
    ○ propsのバケツリレーどうする？
    

    View Slide

27. Thanks!
    

    View Slide