$30 off During Our Annual Pro Sale. View details »

物流拠点プロダクト フロントエンド技術紹介 - CADDi

物流拠点プロダクト フロントエンド技術紹介 - CADDi

recruiting@caddi.jp

March 02, 2022
Tweet

More Decks by recruiting@caddi.jp

Other Decks in Technology

Transcript

  1. A B O U T 物流拠点プロダクト

  2. 2 物流拠点プロダクト 入出荷予定確認、製品受入、検査、梱包、出荷  リーダー:入出荷確認、リソース計画  作業担当者:検査、製品受入、検査、梱包、出荷 物理を伴う難しさ、イレギュラー前提での設計が必要  予定を過ぎても届かない  予定されていないものが届いた  製品が届いたけど個数が足りない  検査でNGが出た

  3. ARCHITECTURE 3 GraphQL NestJS Next.js Apollo Server URQL DB Prisma

    Storybook MSW Chakra-ui Antd
  4. 4 REPOSITORY yarn v3 yarn v1 に比べてインストール速い どの階層で yarn install

    しても大丈夫なのが👍 volta nodeバージョン管理 自動でnodeインストールしてくれる Monorepo
  5. 5 FRONTEND CSSを書く -> propertyをセットする Backendメンバーにも受け入れられやすい 型の補完が効き開発体験よい レイアウト系のコンポーネントはかなり便利 BoxやFlexを多用 Chakra

    UI
  6. 6 FRONTEND Chakra-ui はプリミティブなコンポーネントが多く、柔 軟性は高いが、高機能コンポーネントがない  Antd で補完 Datepicker Table Antd

  7. 7 FRONTEND シンプルで使いやすい Apollo Clientと比べてBundle Sizeが約 1/3 React Suspenseのサポート 唯一Offlineのサポート

    今後利用する可能性あるかも URQL
  8. 8 BACKEND Node.js and TypeScript ORM 開発体験とても良い prisma schema を書く

    DB migration code 自動生成 型つき prisma client 自動生成 GraphQLとの相性良い N + 1 問題をケア Prisma
  9. 9 TESTING Storybook CSF3.0 2.0よりよりシンプルにStoryを書けるようになった Storybookの定義をJestで再利用可能になった      @storybook/testing-reactを使い、StoryをJestに取 り込んで結合テスト

  10. 10 TESTING Mock Service Worker API Mocking library ネットワークリクエストが発生するComponentも簡単に データをMockingできる

    StorybookでPage Componentのgraphql queryをMocking
  11. 11 今後の展望 Monorepo circleci/path-filteringでビルドワークフロー最適化 Testing Viewの結合テストはStorybookに集約 今後、Storybookのinteraction testingをCI実行できる ようになると、Jestで書かなくても良くなりそう JestはHooksのテストのみ