Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ankoでコンポーネント指向

 Ankoでコンポーネント指向

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

Keita Kagurazaka

December 13, 2016
Tweet

More Decks by Keita Kagurazaka

Other Decks in Programming

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