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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Presentational / Container Component
    Container
    Presentational
    Container
    Presentational
    Presentational Presentational
    Presentational Presentational Presentational

    View full-size slide

  11. Androidの場合は?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. やってみよう

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Bound call references (since Kotlin 1.1)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide