Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rust製の業務WebアプリケーションをRustでリプレイス_220428

 Rust製の業務WebアプリケーションをRustでリプレイス_220428

[email protected]

April 28, 2022
Tweet

Other Decks in Technology

Transcript

  1. A B O U T
    Rust製の業務Webアプリケーションを
    Rustでリプレイス

    View Slide

  2. A B O U T
    Rust製の業務Webアプリケーションを
    Rustでリプレイス
    のドサクサでBFF/FEを大整理した話

    View Slide

  3. Ken Ogura
    3
    ● フロントエンドエンジニア @CADDi
    ● 受発注管理アプリケーションのBFF/FE開発
    ● 競技プログラミングが得意
    ● YouTuber

    View Slide

  4. あらすじ
    ● 受発注プロダクトBFF/FEの開発体験が下がり始めていた
    ● BEを刷新することになったしBFF/FEも整理しよう!

    View Slide

  5. 技術スタック
    5
    5
    FRONTEND
    ・React
    ・TypeScript
    ・Styled-Components
    ・Next.js
    ・Storybook
    ・Jest
    ・Apollo Client
    BFF
    ・TypeScript
    ・Node.js
    ・NestJS (Express)
    ・Apollo Server
    BACKEND
    (microservices)
    ・Rust
    ・diesel
    ・tonic
    GraphQL gRPC
    Infrastructure GCP, Docker, Kubernetes, Cloudflare, Datadog
    Event Bus Cloud Pub/Sub
    DevOps GitHub, CircleCI, ArgoCD, Kustomize

    View Slide

  6. 技術スタック
    6
    FRONTEND
    ・React
    ・TypeScript
    ・Styled-Components
    ・Next.js
    ・Storybook
    ・Jest
    ・Apollo Client
    BFF
    ・TypeScript
    ・Node.js
    ・NestJS (Express)
    ・Apollo Server
    BACKEND
    (microservices)
    ・Rust
    ・diesel
    ・tonic
    GraphQL gRPC
    Infrastructure GCP, Docker, Kubernetes, Cloudflare, Datadog
    Event Bus Cloud Pub/Sub
    DevOps GitHub, CircleCI, ArgoCD, Kustomize
    ここの話をします

    View Slide

  7. 大整理その1
    7
    GraphQLを
    コードファーストに
    統一

    View Slide

  8. GraphQLをコードファーストに統一
    8
    ● APIといえばこんな格好をしている

    View Slide

  9. GraphQLをコードファーストに統一
    9
    ● APIといえばこんな格好をしている
    ● Schemaによってお互いのReq/Resの仕様の約束ができる

    View Slide

  10. GraphQLをコードファーストに統一
    10
    ● FE/BFF間は具体的にはこうなっている

    View Slide

  11. GraphQLをコードファーストに統一
    11
    ● オリジナルProductの最初期の依存関係はこう
    ○ ServerをSchemaFirstで開発
    ①スキーマを定義
    ②スキーマに則って
     サーバを実装
    凡例

    View Slide

  12. GraphQLをコードファーストに統一
    12
    ● 諸事情でこうなっていく
    ○ 一部CodeFirstも生じる
    ②実装をもとに
     スキーマを自動生成
    ①サーバを実装
    凡例

    View Slide

  13. GraphQLをコードファーストに統一
    13
    ● 混在はまずいのでコードファーストに統一
    ○ ポリシーが統一されて開発体験向上🚀🚀
    凡例

    View Slide

  14. GraphQLをコードファーストに統一
    14
    ● なぜコードファーストに統一したのか?
    ○ 謎を解明するためにドメインの奥地に、、、

    View Slide

  15. GraphQLをコードファーストに統一
    15
    ● かつての依存関係はこうなっていた
    凡例

    View Slide

  16. GraphQLをコードファーストに統一
    16
    ● BFFのGraphQLサーバー部分をコードファーストにすると、、、
    凡例

    View Slide

  17. GraphQLをコードファーストに統一
    17
    ● BFFのGraphQLサーバー部分をコードファーストにすると、、、
    ○ 依存の方向が統一されてCleanな感じに!
    凡例

    View Slide

  18. GraphQLをコードファーストに統一 まとめ
    18
    ● 実装方法のポリシーが統一された
    ● クリーンな構造になったために責務の
    切り分けを意識しやすくなった
    ● 開発体験向上🚀🚀🚀

    View Slide

  19. 大整理その2
    19
    gRPCスキーマと
    BFFを
    同じリポジトリで管理
    ※実際のところ
    BEもFEも全部まとめてモノレポ化して
    います

    View Slide

  20. モノレポ化
    20
    ● かつては、gRPCスキーマ(ProtoBuf)を別リポジトリに管理
    ● 更新が大変
    ○ サブモジュールを更新し忘れて動かない
    ○ PRがたくさんできる
    ○ CIが複雑

    View Slide

  21. モノレポ化
    21
    ● リプレイス後はモノリポジトリに!
    ● 開発時に行ったり来たりしなくても良い
    ○ サービスのデプロイはCIで出し分ければ
    アーキテクチャの疎結合性は
    保たれる。

    View Slide

  22. その他整理
    22
    - GraphQLスキーマの設計、コンベンションに従う
    - Backにあるマイクロサービス群を
    オブジェクトのつながりという形でまとめあげる
    - BFFの責務が明確になる
    - GraphQLでフィールドレベルのリゾルバを使う
    - N+1問題の解決をBE層まで引きずっていた過去との決別
    - ほかにも細々と

    View Slide

  23. まとめ
    23
    - ドメインを型で守るときは型定義の一貫性を保つために
    依存性を意識すると開発体験向上🚀🚀🚀🚀
    - リポジトリが同じか分かれているかはサービスの結合度
    とは独立した概念!
    モノレポにするかどうかは開発体験のウェイトを大きくして検討して
    良い

    View Slide