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
400
riverpod_graph 活用術
2023/12/08 に開催された YOUTRUST x ゆめみ Flutter LT会@渋谷 #4 の登壇資料です
masssun
December 10, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
Milestoner
bkuhlmann
1
410
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
480
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
370
ゆるい個人開発のススメ
kuroppe1819
10
1k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
870
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
Next.js App Router
quramy
11
1.7k
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
510
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
65
14k
GitHub's CSS Performance
jonrohan
1025
450k
Thoughts on Productivity
jonyablonski
60
3.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Teambox: Starting and Learning
jrom
128
8.4k
Building Applications with DynamoDB
mza
88
5.6k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
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 のテストを書く負担が少し減る • 見やすい依存関係図を生成するためにディレクトリ戦略を考える必要があ る まとめ