Slide 1

Slide 1 text

ざっくり Jetpack Compose Cookpad.apk #3 2019/07/23

Slide 2

Slide 2 text

About me •Kenji Abe •メディアプロダクト開発部 •cookpadLive, storeTV •Twitter: @STAR_ZERO

Slide 3

Slide 3 text

⚠注意⚠ まだAlphaにもなってないので、 今後変更されると思います。 2019/07/20のコードでやっています。

Slide 4

Slide 4 text

Jetpack Compose

Slide 5

Slide 5 text

Jetpack Compose •Google I/O 2019で発表 •UIを宣言的に書いてく •Kotlinを使う •React, Litho, Vue.js, Flutterみたいな感じ

Slide 6

Slide 6 text

Jetpack Composeで アプリを作ってみた https://github.com/STAR-ZERO/GithubCompose

Slide 7

Slide 7 text

Hello World

Slide 8

Slide 8 text

Hello World override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MaterialTheme { Text(text = "Hello World") } } }

Slide 9

Slide 9 text

レイアウト

Slide 10

Slide 10 text

レイアウト MaterialTheme { Container( padding = EdgeInsets(16.dp), alignment = Alignment.TopLeft, width = 240.dp, height = 120.dp ) { Text(text = "Hello World") } }

Slide 11

Slide 11 text

レイアウト MaterialTheme { Column { Row { Text(text = "123") Text(text = "456") } Row { Text(text = "abc") Text(text = "def") } } }

Slide 12

Slide 12 text

レイアウト MaterialTheme { Table { for (i in 0 until 20) { tableRow { for (j in 0 until 2) { Padding(16.dp) { Text(text = "Cell $i - $j") } } } } } }

Slide 13

Slide 13 text

ステート

Slide 14

Slide 14 text

ステート Column { val counter = +state { 0 } Text(text = "count = ${counter.value}") Button( text = "Button", onClick = { counter.value++ } ) }

Slide 15

Slide 15 text

ステート Column { val flag = +state { false } if (flag.value) { Text(text = "Jepack") } else { Text(text = "Compose") } Button( text = "Button", onClick = { flag.value = !flag.value } ) }

Slide 16

Slide 16 text

Commit Scope? (Lifecycle?)

Slide 17

Slide 17 text

Commit Scope Column { +onActive { } // 最初の1回 +onCommit { // 描画されるたび onDispose { } // 破棄されるとき } val flag = +state { false } if (flag.value) { Container { +onCommit { onDispose { } } } } else { // ... } }

Slide 18

Slide 18 text

まとめ

Slide 19

Slide 19 text

まとめ •直感的でよさそう ‣ でも、すべてJetpack Composeはツライかも? •ステートやライフサイクルは今までと異なるので注意 ‣ 設計どうしよう

Slide 20

Slide 20 text

まとめ •ただし、今やるべきではない ‣ Alphaにもなってないので当然 ‣ 正式リリースまではだいぶ時間かかりそうな印象

Slide 21

Slide 21 text

ありがとうございました