Tweet
Tweet

Slide 1

Slide 1 text

20年続いているサービスの 複雑な注文画面を GraphQLを使って改善した話 株式会社出前館・橋本茉利奈

Slide 2

Slide 2 text

橋本茉利奈 Hashimoto Marina 株式会社出前館 モバイルアプリエンジニア

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

出前館アプリ

Slide 5

Slide 5 text

注文画面

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

お届け時間

Slide 8

Slide 8 text

お届け時間 決済方法

Slide 9

Slide 9 text

お届け時間 決済方法 クーポン利用

Slide 10

Slide 10 text

お届け時間 決済方法 クーポン利用 LINEポイント

Slide 11

Slide 11 text

お届け時間 決済方法 クーポン利用 LINEポイント 特典の付与

Slide 12

Slide 12 text

お届け時間 決済方法 クーポン利用 LINEポイント 特典の付与 料金の再計算

Slide 13

Slide 13 text

お届け時間 決済方法 クーポン利用 LINEポイント 特典の付与 料金の再計算 めっちゃ切り替わる…😵

Slide 14

Slide 14 text

状態管理が大変…😵

Slide 15

Slide 15 text

状態管理が大変…😵 • 画面内に状態を管理しなければいけない要素が多い • 増え続ける決済パターン • ユーザ操作によって切り替わる注文情報 • ユーザへの許諾チェックボックスの表示制御 …etc

Slide 16

Slide 16 text

どうする…🤔

Slide 17

Slide 17 text

とにかくシンプルを目指す

Slide 18

Slide 18 text

RecoilをState管理に使ってみた • ねらい：State管理をできるだけシンプルにする • 要素をできるだけ細かく分解して管理する • Stateをどこからでも呼び出せる

Slide 19

Slide 19 text

screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method

Slide 20

Slide 20 text

screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method

Slide 21

Slide 21 text

screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method 依存関係が多すぎる…😵

Slide 22

Slide 22 text

screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method

Slide 23

Slide 23 text

screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method

Slide 24

Slide 24 text

screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method 頻繁に更新される…😵

Slide 25

Slide 25 text

screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method かえって複雑に…😵

Slide 26

Slide 26 text

どうする…🤔

Slide 27

Slide 27 text

状態を2種類にわける

Slide 28

Slide 28 text

Server Cache / Local State

Slide 29

Slide 29 text

Server Cache • サーバの情報を保持するキャッシュ • サーバとクライアントの情報の一致が常に保証されている • キャッシュの値がコンポーネントへリアクティブに作用する

Slide 30

Slide 30 text

Local State • クライアントでのユーザ操作による情報を管理するState • クライアントのみで一時的に保持している値を管理

Slide 31

Slide 31 text

screen Server Cache / Local State Server user input Server Cache Local State

Slide 32

Slide 32 text

注文画面で実装する💪

Slide 33

Slide 33 text

注文画面で実装する💪 • Server Cache → Apollo Client のキャッシュを使う • Local State → React useState を使う

Slide 34

Slide 34 text

screen 注文画面で実装する💪 Apollo Server (BFF) user input Apollo Client Cache useState

Slide 35

Slide 35 text

注文画面で実装する💪 • Server Cache → Apollo Client のキャッシュを使う • Local State → React useState を使う

Slide 36

Slide 36 text

Server Cache→ apollo client のキャッシュを使う • BFFのレスポンス情報自体を、Server Cacheとして保持する • BFF (GraphQL) によって、1画面描画のためのリクエストが1回で 済むのでServer Cacheの状態管理が容易 • BFFのスキーマで型定義できる

Slide 37

Slide 37 text

注文画面で実装する💪 • Server Cache → Apollo Clientのキャッシュを使う • Local State → React useState を使う

Slide 38

Slide 38 text

Local State → React useState を使う • Server Cacheのおかげで、Localで独自に定義するStateを減らすこと ができる

Slide 39

Slide 39 text

screen Before... Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method

Slide 40

Slide 40 text

screen After... Apollo Server (BFF) user input Apollo Client Cache useState isEnabled address payment method

Slide 41

Slide 41 text

まとめ

Slide 42

Slide 42 text

まとめ • 注文画面は、出前館アプリの中でも状態管理が大変な画面のひとつ • まずRecoilで管理する方法を試したものの、膨大な量のStateを管 理しなければならず、大変なことに...

Slide 43

Slide 43 text

まとめ • そこで、画面で管理するStateをSever CacheとLocal Stateの2種類に 分類して管理することにした

Slide 44

Slide 44 text

まとめ • Server Cacheとして, Apollo Client のキャッシュを活用することで 、型安全で、かつシンプルにサーバ情報を保持できるようになった

Slide 45

Slide 45 text

まとめ • Server Cacheがあるおかげで、ユーザ操作によって更新がかかる StateのみをLocal Stateで管理すれば良くなった

Slide 46

Slide 46 text

No content