Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
riverpod_graph 活用術
Search
masssun
December 10, 2023
Programming
0
1k
riverpod_graph 活用術
2023/12/08 に開催された YOUTRUST x ゆめみ Flutter LT会@渋谷 #4 の登壇資料です
masssun
December 10, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
CSC305 Lecture 10
javiergs
PRO
0
230
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
530
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
830
Ktorで簡単AIアプリケーション
tsukakei
0
100
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
SODA - FACT BOOK(JP)
sodainc
1
8.7k
Cursorハンズオン実践!
eltociear
2
1.2k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
What's new in Spring Modulith?
olivergierke
1
170
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
CSC305 Lecture 08
javiergs
PRO
0
280
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Designing for Performance
lara
610
69k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Rails Girls Zürich Keynote
gr2m
95
14k
The Cult of Friendly URLs
andyhume
79
6.6k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Transcript
riverpod_graph 活用術 YOUTRUST x ゆめみ Flutter LT会@渋谷 #4
About me 👨 増山 洸輝 (masuyama koki) 🏢 株式会社サイバーエージェント 🛒
小売 DX をやってます @_masssun @masssun
アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方
• riverpod_graph 活用術
アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方
• riverpod_graph 活用術
• Provider / Widget 間の依存関係を可視化するためのツール ◦ (※ Work in progress)
• Text to Diagram (D2 / Mermaid) シンタックスで出力される • https://github.com/rrousselGit/riverpod/tree/master/packages/rive rpod_graph riverpod_graph とは
riverpod_graph とは
アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方
• riverpod_graph 活用術
riverpod_graph 導入
アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方
• riverpod_graph 活用術
riverpod_graph 使い方
アジェンダ • riverpod_graph とは • riverpod_graph 導入 • riverpod_graph 使い方
• riverpod_graph 活用術
• Markdown で出力し、VSCode で閲覧 riverpod_graph 活用術
• システムの全体像を把握しやすくする • 設計改善のヒントにする • Notifier のテストを書く際の補助ツールとして使う riverpod_graph 活用術
• システムの全体像を把握しやすくする • 設計改善のヒントにする • Notifier のテストを書く際の補助ツールとして使う riverpod_graph 活用術
Notifier のテストを書くときにツラいこと
Notifier のテストを書くときにツラいこと
• ref.watch している Provider をかき集めること ◦ build() 内のコードを丹念に追わなければならない Notifier のテストを書くときにツラいこと
• 依存関係図があれば、Provider をかき集めるコストを軽減できる Notifier のテストを書くときにツラいこと
• 全てのコードに対して実行するとカオスになる Notifier の依存関係図を生成するためのディレクトリ構成
• Feature-first? • Layer-first? Notifier の依存関係図を生成するためのディレクトリ構成
Notifier の依存関係図を生成するためのディレクトリ構成
• dart pub global run riverpod_graph lib/feature/order/core Notifier の依存関係図を生成するためのディレクトリ構成
• dart pub global run riverpod_graph lib/feature/order Notifier の依存関係図を生成するためのディレクトリ構成
• riverpod_graph によって Provider / Widget 間の依存関係図を生成するこ とができる • 依存関係図があることで
Notifier のテストを書く負担が少し減る • 見やすい依存関係図を生成するためにディレクトリ戦略を考える必要があ る まとめ