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