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

Transcript

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

   View Slide

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

   View Slide

3. ARCHITECTURE
   3
   GraphQL NestJS
   Next.js Apollo
   Server
   URQL
   DB
   Prisma
   Storybook MSW
   Chakra-ui
   Antd
   

   View Slide

4. 4
   REPOSITORY
   yarn v3
   yarn v1 に比べてインストール速い
   どの階層で yarn install しても大丈夫なのが👍
   volta
   nodeバージョン管理
   自動でnodeインストールしてくれる
   Monorepo
   

   View Slide

5. 5
   FRONTEND
   CSSを書く -> propertyをセットする
   Backendメンバーにも受け入れられやすい
   型の補完が効き開発体験よい
   レイアウト系のコンポーネントはかなり便利
   BoxやFlexを多用
   Chakra UI
   

   View Slide

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

   View Slide

7. 7
   FRONTEND
   シンプルで使いやすい
   Apollo Clientと比べてBundle Sizeが約 1/3
   React Suspenseのサポート
   唯一Offlineのサポート
   今後利用する可能性あるかも
   URQL
   

   View Slide

8. 8
   BACKEND
   Node.js and TypeScript ORM
   開発体験とても良い
   prisma schema を書く
   DB migration code 自動生成
   型つき prisma client 自動生成
   GraphQLとの相性良い
   N + 1 問題をケア
   Prisma
   

   View Slide

9. 9
   TESTING
   Storybook CSF3.0
   2.0よりよりシンプルにStoryを書けるようになった
   Storybookの定義をJestで再利用可能になった　　　　
   　@storybook/testing-reactを使い、StoryをJestに取
   り込んで結合テスト
   

   View Slide

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

    View Slide

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

    View Slide