riverpod_graph 活用術

by masssun

Slide 1

Slide 1 text

riverpod_graph 活用術 YOUTRUST x ゆめみ Flutter LT会@渋谷 #4

Slide 2

Slide 2 text

About me 👨 増山洸輝 (masuyama koki) 🏢 株式会社サイバーエージェント 🛒 小売 DX をやってます　 @_masssun 　 @masssun

Slide 3

Slide 3 text

アジェンダ ● riverpod_graph とは ● riverpod_graph 導入 ● riverpod_graph 使い方 ● riverpod_graph 活用術

Slide 4

Slide 4 text

アジェンダ ● riverpod_graph とは ● riverpod_graph 導入 ● riverpod_graph 使い方 ● riverpod_graph 活用術

Slide 5

Slide 5 text

● Provider / Widget 間の依存関係を可視化するためのツール ○ (※ Work in progress) ● Text to Diagram (D2 / Mermaid) シンタックスで出力される ● https://github.com/rrousselGit/riverpod/tree/master/packages/rive rpod_graph riverpod_graph とは

Slide 6

Slide 6 text

riverpod_graph とは

Slide 7

Slide 7 text

アジェンダ ● riverpod_graph とは ● riverpod_graph 導入 ● riverpod_graph 使い方 ● riverpod_graph 活用術

Slide 8

Slide 8 text

riverpod_graph 導入

Slide 9

Slide 9 text

アジェンダ ● riverpod_graph とは ● riverpod_graph 導入 ● riverpod_graph 使い方 ● riverpod_graph 活用術

Slide 10

Slide 10 text

riverpod_graph 使い方

Slide 11

Slide 11 text

アジェンダ ● riverpod_graph とは ● riverpod_graph 導入 ● riverpod_graph 使い方 ● riverpod_graph 活用術

Slide 12

Slide 12 text

● Markdown で出力し、VSCode で閲覧 riverpod_graph 活用術

Slide 13

Slide 13 text

● システムの全体像を把握しやすくする ● 設計改善のヒントにする ● Notiﬁer のテストを書く際の補助ツールとして使う riverpod_graph 活用術

Slide 14

Slide 14 text

● システムの全体像を把握しやすくする ● 設計改善のヒントにする ● Notiﬁer のテストを書く際の補助ツールとして使う riverpod_graph 活用術

Slide 15

Slide 15 text

Notiﬁer のテストを書くときにツラいこと

Slide 16

Slide 16 text

Notiﬁer のテストを書くときにツラいこと

Slide 17

Slide 17 text

● ref.watch している Provider をかき集めること ○ build() 内のコードを丹念に追わなければならない Notiﬁer のテストを書くときにツラいこと

Slide 18

Slide 18 text

● 依存関係図があれば、Provider をかき集めるコストを軽減できる Notiﬁer のテストを書くときにツラいこと

Slide 19

Slide 19 text

● 全てのコードに対して実行するとカオスになる Notiﬁer の依存関係図を生成するためのディレクトリ構成

Slide 20

Slide 20 text

● Feature-first？ ● Layer-first？ Notifier の依存関係図を生成するためのディレクトリ構成

Slide 21

Slide 21 text

Notiﬁer の依存関係図を生成するためのディレクトリ構成

Slide 22

Slide 22 text

● dart pub global run riverpod_graph lib/feature/order/core Notiﬁer の依存関係図を生成するためのディレクトリ構成

Slide 23

Slide 23 text

● dart pub global run riverpod_graph lib/feature/order Notiﬁer の依存関係図を生成するためのディレクトリ構成

Slide 24

Slide 24 text

● riverpod_graph によって Provider / Widget 間の依存関係図を生成することができる ● 依存関係図があることで Notiﬁer のテストを書く負担が少し減る ● 見やすい依存関係図を生成するためにディレクトリ戦略を考える必要があるまとめ