Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
A B O U T 物流拠点プロダクト
Slide 2
Slide 2 text
2 物流拠点プロダクト 入出荷予定確認、製品受入、検査、梱包、出荷 リーダー:入出荷確認、リソース計画 作業担当者:検査、製品受入、検査、梱包、出荷 物理を伴う難しさ、イレギュラー前提での設計が必要 予定を過ぎても届かない 予定されていないものが届いた 製品が届いたけど個数が足りない 検査でNGが出た
Slide 3
Slide 3 text
ARCHITECTURE 3 GraphQL NestJS Next.js Apollo Server URQL DB Prisma Storybook MSW Chakra-ui Antd
Slide 4
Slide 4 text
4 REPOSITORY yarn v3 yarn v1 に比べてインストール速い どの階層で yarn install しても大丈夫なのが👍 volta nodeバージョン管理 自動でnodeインストールしてくれる Monorepo
Slide 5
Slide 5 text
5 FRONTEND CSSを書く -> propertyをセットする Backendメンバーにも受け入れられやすい 型の補完が効き開発体験よい レイアウト系のコンポーネントはかなり便利 BoxやFlexを多用 Chakra UI
Slide 6
Slide 6 text
6 FRONTEND Chakra-ui はプリミティブなコンポーネントが多く、柔 軟性は高いが、高機能コンポーネントがない Antd で補完 Datepicker Table Antd
Slide 7
Slide 7 text
7 FRONTEND シンプルで使いやすい Apollo Clientと比べてBundle Sizeが約 1/3 React Suspenseのサポート 唯一Offlineのサポート 今後利用する可能性あるかも URQL
Slide 8
Slide 8 text
8 BACKEND Node.js and TypeScript ORM 開発体験とても良い prisma schema を書く DB migration code 自動生成 型つき prisma client 自動生成 GraphQLとの相性良い N + 1 問題をケア Prisma
Slide 9
Slide 9 text
9 TESTING Storybook CSF3.0 2.0よりよりシンプルにStoryを書けるようになった Storybookの定義をJestで再利用可能になった @storybook/testing-reactを使い、StoryをJestに取 り込んで結合テスト
Slide 10
Slide 10 text
10 TESTING Mock Service Worker API Mocking library ネットワークリクエストが発生するComponentも簡単に データをMockingできる StorybookでPage Componentのgraphql queryをMocking
Slide 11
Slide 11 text
11 今後の展望 Monorepo circleci/path-filteringでビルドワークフロー最適化 Testing Viewの結合テストはStorybookに集約 今後、Storybookのinteraction testingをCI実行できる ようになると、Jestで書かなくても良くなりそう JestはHooksのテストのみ