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

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

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

[email protected]

March 02, 2022
Tweet

Other Decks in Technology

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